/*
 * 블로그 서브페이지 전용 스타일 (home.php / category.php)
 *
 * 배경: 채널톡 블로그(channel.io/ko/blog) Playwright 실측 분석 기반 구현
 *   · 데스크톱: 좌측 사이드바(250px) + 콘텐츠(1004px), gap 8px (내부 패딩으로 시각적 간격 확보)
 *   · 모바일: 사이드바 숨김, 상단 드롭다운 전환
 *   · 카드: 16:9 이미지 + 제목/설명/메타
 *
 * 디자인 토큰은 main.css의 :root 변수 그대로 사용합니다.
 * 변경 이력:
 *   2026-06-01 — 최초 생성 (채널톡 블로그 UI 클론 기반)
 */

/* ────────────────────────────────────────
   페이지 래퍼
──────────────────────────────────────── */
.ll-blog-page {
    padding-top: 40px;
    padding-bottom: 120px;
    min-height: 70vh;
}

/* v3: 타이틀 히어로가 padding-top 역할을 대신 — 상단 여백 제거 */
.ll-blog-page--v3 {
    padding-top: 0;
}

/* v3: 히어로와 레이아웃 사이 여백 */
.ll-blog-page--v3 .ll-container {
    padding-top: 48px;
}

/* 블로그 글상세 페이지: 헤더와의 여백 확보 */
.ll-single-page {
    padding-top: 64px;
}


/* ────────────────────────────────────────
   2단 레이아웃: 사이드바 + 메인
   · 채널톡 실측: 사이드바 250px / 콘텐츠 1004px / 전체 1262px
   · 루니버스랩 컨테이너 1200px 기준으로 비례 조정
──────────────────────────────────────── */
/* ── 블로그 레이아웃: align-items:start + grid item sticky 패턴
   grid item 자체에 position:sticky + align-self:start를 함께 써야
   뷰포트 기준 sticky가 그리드 컨테이너 높이 안에서 올바르게 작동합니다. */
.ll-blog-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0 32px;
    align-items: start;
}


/* ────────────────────────────────────────
   좌측 사이드바
──────────────────────────────────────── */
.ll-blog-sidebar {
    position: sticky;
    top: 96px;
    padding-right: 24px;
    border-right: 1px solid var(--ll-line);
}

.ll-blog-sidebar__inner {
    padding: 8px 0;
}

.ll-blog-sidebar__heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--ll-ink);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    font-family: "Instrument Serif", serif;
}

/* 카테고리 목록 */
.ll-blog-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ll-blog-sidebar__item a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ll-muted);
    line-height: 1.4;
    overflow: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}

/* 한글 / 영문 레이어 — 호버 시 영문으로 슬라이드 전환 */
.ll-blog-sidebar__item a .ll-sidebar-kr,
.ll-blog-sidebar__item a .ll-sidebar-en {
    display: block;
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    will-change: transform, opacity;
}

.ll-blog-sidebar__item a .ll-sidebar-en {
    position: absolute;
    left: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ll-ink);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.ll-blog-sidebar__item a {
    position: relative;
}

.ll-blog-sidebar__item a:hover .ll-sidebar-kr {
    opacity: 0;
    transform: translateY(-6px);
}

.ll-blog-sidebar__item a:hover .ll-sidebar-en {
    opacity: 1;
    transform: translateY(0);
}

.ll-blog-sidebar__item a:hover {
    background: var(--ll-card);
    color: var(--ll-ink);
}

/* 활성 카테고리 */
.ll-blog-sidebar__item--active a {
    background: var(--ll-card);
    color: var(--ll-ink);
    font-weight: 600;
}


/* ────────────────────────────────────────
   메인 콘텐츠 영역
──────────────────────────────────────── */
.ll-blog-main {
    /* 사이드바와 자연스럽게 분리 */
    min-width: 0; /* grid overflow 방지 */
}

.ll-blog-spacer {
    height: 16px;
}


/* ────────────────────────────────────────
   섹션 공통 스타일
──────────────────────────────────────── */
.ll-blog-section {
    margin-bottom: 56px;
}

/* 최근 아티클 아래 구분선 */
.ll-blog-section + .ll-blog-section {
    padding-top: 48px;
    border-top: 1px solid var(--ll-line);
}

/* 섹션 헤더: 제목 + "모두보기" 링크 */
.ll-blog-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ll-blog-section__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ll-ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.ll-blog-section__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ll-muted);
    transition: color 0.2s ease;
}

.ll-blog-section__more:hover {
    color: var(--ll-ink);
}

.ll-blog-section__more svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ll-blog-section__more:hover svg {
    transform: translateX(3px);
}


/* ────────────────────────────────────────
   카테고리 레이블 태그
──────────────────────────────────────── */
.ll-blog-tag {
    display: inline-block;
    /* flex 컨테이너 안에서 align-items:stretch에 의해 풀스크린 스트립이 되는 버그 방지 */
    align-self: flex-start;
    width: fit-content; /* IE 미지원이지만 모던 브라우저 대상으로 충분 */
    padding: 3px 10px;
    margin-bottom: 10px;
    background: var(--ll-lime);
    color: var(--ll-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
}


/* ────────────────────────────────────────
   대표 아티클 카드 (채널톡 RepresentationArticleCard)
   · 데스크톱: 좌(이미지 약 45%) + 우(텍스트 55%) 2열 그리드
   · 클릭 시 이미지 scale 확대
──────────────────────────────────────── */
/* 섬네일 없을 때 콘텐츠가 전체 너비를 차지하도록 1열로 전환 */
.ll-blog-featured--no-img {
    grid-template-columns: 1fr !important;
}

.ll-blog-featured {
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    border-radius: var(--ll-radius);
    overflow: hidden;
    background: var(--ll-card);
    margin-bottom: 24px;
    transition: box-shadow 0.25s ease;
}

.ll-blog-featured:hover {
    box-shadow: 0 16px 40px rgba(32, 37, 38, 0.08);
}

/* 이미지 래퍼 */
.ll-blog-featured__media {
    display: block;
    overflow: hidden;
    /* 이미지 영역이 항상 꽉 차도록 */
    aspect-ratio: 4 / 3;
}

.ll-blog-featured__media img,
.ll-blog-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ll-blog-featured:hover .ll-blog-featured__media img {
    transform: scale(1.05);
}

/* 텍스트 영역 */
.ll-blog-featured__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 36px 36px 32px;
}

.ll-blog-featured__body {
    flex: 1;
}

.ll-blog-featured__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ll-ink);
    margin: 0 0 12px;
    letter-spacing: -0.025em;
}

.ll-blog-featured__title a {
    color: inherit;
    transition: color 0.2s ease;
}

.ll-blog-featured__title a:hover {
    color: var(--ll-muted);
}

.ll-blog-featured__desc {
    font-size: 15px;
    color: var(--ll-muted);
    line-height: 1.65;
    margin: 0;
    /* 3줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-blog-featured__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: 13px;
    color: var(--ll-muted);
}


/* ────────────────────────────────────────
   카드 그리드 (3열)
──────────────────────────────────────── */
.ll-blog-cards-grid {
    display: grid;
    gap: 24px;
}

.ll-blog-cards-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ll-blog-cards-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}


/* ────────────────────────────────────────
   블로그 카드 (채널톡 VerticalArticleCard)
──────────────────────────────────────── */
.ll-blog-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ll-card);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ll-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(32, 37, 38, 0.09);
}

/* 카드 이미지 */
.ll-blog-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--ll-line);
    flex-shrink: 0;
}

.ll-blog-card__media img,
.ll-blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ll-blog-card:hover .ll-blog-card__media img {
    transform: scale(1.06);
}

/* 카드 텍스트 영역 */
.ll-blog-card__body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.ll-blog-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ll-ink);
    margin: 0;
    /* 제목 2줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-blog-card__title a {
    color: inherit;
    transition: color 0.18s ease;
}

.ll-blog-card__title a:hover {
    color: var(--ll-muted);
}

.ll-blog-card__desc {
    font-size: 13px;
    color: var(--ll-muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    /* 설명 2줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ll-muted);
    margin-top: 8px;
    flex-shrink: 0;
}

/* 날짜·저자 구분점 */
.ll-blog-meta__dot {
    opacity: 0.5;
    font-size: 10px;
}


/* ────────────────────────────────────────
   포스트 없음 빈 상태
──────────────────────────────────────── */
.ll-blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    text-align: center;
    color: var(--ll-muted);
}

.ll-blog-empty svg {
    opacity: 0.4;
}

.ll-blog-empty p {
    font-size: 16px;
    margin: 0;
}

.ll-blog-empty a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ll-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ────────────────────────────────────────
   모바일 상단 카테고리 드롭다운
   (데스크톱에서는 display:none — 모바일에서만 노출)
──────────────────────────────────────── */
.ll-blog-topbar {
    display: none;
    background: var(--ll-bg);
    border-bottom: 1px solid var(--ll-line);
    position: sticky;
    top: 0;
    z-index: 200;
}

.ll-blog-topbar__inner {
    width: min(100% - 48px, var(--ll-container));
    margin: 0 auto;
    position: relative;
}

.ll-blog-topbar__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 14px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--ll-ink);
}

.ll-blog-topbar__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ll-blog-topbar__btn[aria-expanded="true"] .ll-blog-topbar__chevron {
    transform: rotate(180deg);
}

/* [hidden] 속성을 CSS display:flex가 덮어쓰는 버그 방지:
   기본은 display:none, hidden이 없을 때만 flex로 전환 */
.ll-blog-topbar__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--ll-bg);
    border: 1px solid var(--ll-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(32, 37, 38, 0.1);
    padding: 8px;
    z-index: 300;
    flex-direction: column;
    gap: 2px;
}

.ll-blog-topbar__panel:not([hidden]) {
    display: flex;
}

.ll-blog-topbar__item {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--ll-muted);
    transition: background 0.15s, color 0.15s;
}

.ll-blog-topbar__item:hover {
    background: var(--ll-card);
    color: var(--ll-ink);
}

.ll-blog-topbar__item--active {
    background: var(--ll-card);
    color: var(--ll-ink);
    font-weight: 600;
}


/* ════════════════════════════════════════
   반응형: 태블릿 이하 (max-width: 1024px)
════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ll-blog-layout {
        grid-template-columns: 200px 1fr;
        gap: 0 24px;
    }

    .ll-blog-sidebar {
        padding-right: 16px;
    }

    .ll-blog-featured {
        grid-template-columns: 1fr;
    }

    .ll-blog-featured__media {
        aspect-ratio: 16 / 9;
    }

    .ll-blog-featured__content {
        padding: 24px;
    }

    .ll-blog-featured__title {
        font-size: 19px;
    }

    .ll-blog-cards-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ════════════════════════════════════════
   반응형: 모바일 (max-width: 768px)
════════════════════════════════════════ */
@media (max-width: 768px) {

    .ll-blog-page {
        padding-top: 0; /* 드롭다운이 sticky라 별도 상단 여백 불필요 */
        padding-bottom: 80px;
    }

    /* 사이드바 숨기고 모바일 드롭다운 노출 */
    .ll-blog-sidebar {
        display: none;
    }

    .ll-blog-topbar {
        display: block;
    }

    /* 1열 레이아웃으로 전환 */
    .ll-blog-layout {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 24px;
    }

    /* 대표 카드: 모바일에서 세로 스택 */
    .ll-blog-featured {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .ll-blog-featured__content {
        padding: 20px;
    }

    .ll-blog-featured__title {
        font-size: 18px;
    }

    .ll-blog-featured__desc {
        -webkit-line-clamp: 2;
    }

    /* 카드 그리드: 모바일 1열 → 가로 레이아웃 카드 */
    .ll-blog-cards-grid--3,
    .ll-blog-cards-grid--4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* 모바일 카드: 가로 배치 (이미지 왼쪽 고정 폭 + 텍스트 오른쪽) */
    .ll-blog-card {
        flex-direction: row;
        border-radius: 12px;
    }

    .ll-blog-card__media {
        width: 120px;
        min-width: 120px;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
        border-radius: 0;
    }

    .ll-blog-card__body {
        padding: 14px 16px;
        gap: 4px;
    }

    .ll-blog-card__title {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }

    .ll-blog-card__desc {
        display: none; /* 모바일 가로 카드에서 설명은 숨김 */
    }

    .ll-blog-section__title {
        font-size: 17px;
    }

    .ll-blog-section + .ll-blog-section {
        padding-top: 32px;
    }

    .ll-blog-section {
        margin-bottom: 32px;
    }
}


/* ────────────────────────────────────────
   페이지네이션 (category.php)
──────────────────────────────────────── */
.ll-blog-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

/* WordPress 기본 pagination 구조 재스타일 */
.ll-blog-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.ll-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ll-muted);
    transition: background 0.15s, color 0.15s;
}

.ll-blog-pagination .page-numbers:hover {
    background: var(--ll-card);
    color: var(--ll-ink);
}

.ll-blog-pagination .page-numbers.current {
    background: var(--ll-dark);
    color: #fff;
    font-weight: 700;
}

.ll-blog-pagination .page-numbers.dots {
    width: auto;
    padding: 0 4px;
    background: none;
}

/* 이전/다음 화살표 */
.ll-blog-pagination .prev.page-numbers,
.ll-blog-pagination .next.page-numbers {
    color: var(--ll-ink);
}

/* 카테고리 설명 */
.ll-blog-cat__desc {
    font-size: 14px;
    color: var(--ll-muted);
    margin: 6px 0 0;
}


/* ════════════════════════════════════════
   반응형: 소형 모바일 (max-width: 480px)
════════════════════════════════════════ */
@media (max-width: 480px) {
    .ll-blog-card__media {
        width: 96px;
        min-width: 96px;
    }

    .ll-blog-featured__title {
        font-size: 16px;
    }
}


/* ════════════════════════════════════════
   뉴스레터 구독 섹션 (blog-newsletter.php)
   · dark 배경 + lime accent — 루니버스랩 브랜드
   · HubSpot 블로그의 인라인 구독 패턴 참고
════════════════════════════════════════ */
.ll-blog-newsletter {
    background: var(--ll-dark);
    border-radius: var(--ll-radius);
    padding: 56px 48px;
    margin: 0 0 56px;
    overflow: hidden;
    position: relative;
}

/* 배경 장식 — 라임 그라디언트 글로우 */
.ll-blog-newsletter::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(209,245,60,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.ll-blog-newsletter__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* 텍스트 */
.ll-blog-newsletter__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ll-lime);
    margin-bottom: 12px;
}

.ll-blog-newsletter__title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
}

.ll-blog-newsletter__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin: 0;
}

/* 폼 영역 */
.ll-blog-newsletter__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 24px 0;
}

.ll-blog-newsletter__success-msg {
    font-size: 16px;
    color: #fff;
    margin: 0;
}

.ll-blog-newsletter__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ll-blog-newsletter__input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.ll-blog-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.ll-blog-newsletter__input:focus {
    border-color: var(--ll-lime);
    background: rgba(255, 255, 255, 0.12);
}

/* 동의 체크박스 */
.ll-blog-newsletter__consent {
    margin-bottom: 16px;
}

.ll-blog-newsletter__check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

/* 기본 체크박스 숨기고 커스텀으로 교체 — 네이티브 체크 표시 깨짐 방지 */
.ll-blog-newsletter__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ll-blog-newsletter__check-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.ll-blog-newsletter__checkbox:checked + .ll-blog-newsletter__check-custom {
    border-color: var(--ll-lime);
    background: var(--ll-lime);
}

.ll-blog-newsletter__checkbox:checked + .ll-blog-newsletter__check-custom::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--ll-dark);
    border-bottom: 2px solid var(--ll-dark);
    transform: rotate(-45deg) translateY(-1px);
}

.ll-blog-newsletter__check-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.ll-blog-newsletter__check-text a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 에러 메시지 */
.ll-blog-newsletter__error {
    font-size: 12px;
    color: #ff6b6b;
    min-height: 16px;
    margin-bottom: 8px;
}

/* 구독 버튼 */
.ll-blog-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--ll-lime);
    color: var(--ll-dark);
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.ll-blog-newsletter__btn:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

.ll-blog-newsletter__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 뉴스레터 모바일 */
@media (max-width: 768px) {
    .ll-blog-newsletter {
        padding: 36px 24px;
        margin: 0 0 32px;
        border-radius: 16px;
    }

    .ll-blog-newsletter__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ll-blog-newsletter__title {
        font-size: 22px;
    }
}


/* ════════════════════════════════════════
   인라인 CTA 배너 (blog-cta-banner.php)
   · 포트폴리오 variant: 라이트 카드 + 장식
   · 상담 variant: 다크 배경 + 버튼 2개
════════════════════════════════════════ */
.ll-blog-cta-banner {
    position: relative;
    border-radius: var(--ll-radius);
    overflow: hidden;
    margin: 0 0 56px;
}

.ll-blog-cta-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 48px;
    position: relative;
    z-index: 1;
}

.ll-blog-cta-banner__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.ll-blog-cta-banner__heading {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.ll-blog-cta-banner__sub {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.7;
}

.ll-blog-cta-banner__text {
    flex: 1;
    min-width: 0;
}

.ll-blog-cta-banner__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* 버튼 공통 */
.ll-blog-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
}

.ll-blog-cta-banner__btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 장식 원 */
.ll-blog-cta-banner__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ll-blog-cta-banner__deco-circle {
    position: absolute;
    border-radius: 50%;
}

/* ── 포트폴리오 variant (라이트) */
.ll-blog-cta-banner--portfolio {
    background: var(--ll-card);
    border: 1px solid var(--ll-line);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__eyebrow {
    color: var(--ll-muted);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__heading {
    color: var(--ll-ink);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__sub {
    color: var(--ll-muted);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__btn--outline {
    background: transparent;
    border: 1.5px solid var(--ll-ink);
    color: var(--ll-ink);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__deco-circle--1 {
    width: 200px;
    height: 200px;
    right: -40px;
    top: -60px;
    background: rgba(209, 245, 60, 0.15);
}

.ll-blog-cta-banner--portfolio .ll-blog-cta-banner__deco-circle--2 {
    width: 120px;
    height: 120px;
    right: 60px;
    bottom: -40px;
    background: rgba(32, 37, 38, 0.05);
}

/* ── 상담 variant (다크) */
.ll-blog-cta-banner--consult {
    background: var(--ll-dark);
    color: #fff;
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__eyebrow {
    color: var(--ll-lime);
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__heading {
    color: #fff;
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__sub {
    color: rgba(255,255,255,0.55);
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__btn--primary {
    background: var(--ll-lime);
    color: var(--ll-dark);
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.7);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__btn--ghost:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__kakao-icon {
    flex-shrink: 0;
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__deco-circle--1 {
    width: 260px;
    height: 260px;
    right: -60px;
    top: -80px;
    background: rgba(209, 245, 60, 0.08);
}

.ll-blog-cta-banner--consult .ll-blog-cta-banner__deco-circle--2 {
    width: 140px;
    height: 140px;
    right: 100px;
    bottom: -50px;
    background: rgba(255, 255, 255, 0.04);
}

/* CTA 배너 모바일 */
@media (max-width: 768px) {
    .ll-blog-cta-banner {
        margin: 0 0 32px;
        border-radius: 16px;
    }

    .ll-blog-cta-banner__content {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
        gap: 20px;
    }

    .ll-blog-cta-banner__heading {
        font-size: 18px;
    }

    .ll-blog-cta-banner__actions {
        width: 100%;
    }

    .ll-blog-cta-banner__btn {
        width: 100%;
        justify-content: center;
    }
}


/* ════════════════════════════════════════
   사이드바 상담 CTA 카드
════════════════════════════════════════ */
.ll-sidebar-cta {
    margin-top: 32px;
    padding: 22px 18px;
    background: var(--ll-dark);
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ll-sidebar-cta__icon {
    color: var(--ll-lime);
    margin-bottom: 2px;
}

.ll-sidebar-cta__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.ll-sidebar-cta__desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
    margin: 0;
}

.ll-sidebar-cta__btn {
    display: block;
    margin-top: 4px;
    padding: 11px 14px;
    background: var(--ll-lime);
    color: var(--ll-dark);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    transition: opacity 0.2s;
}

.ll-sidebar-cta__btn:hover {
    opacity: 0.85;
}

.ll-sidebar-cta__link {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    transition: color 0.2s;
}

.ll-sidebar-cta__link:hover {
    color: rgba(255, 255, 255, 0.8);
}


/* ll-floating-cta 제거됨 — footer.php의 ll-social-fab (Kakao 링크 포함)으로 통합 */



/* ════════════════════════════════════════
   싱글 포스트 페이지 (single.php)
   인블로그(inblog.ai) Firecrawl + Playwright 실측값 기반 v3 전면 재설계:
   · 3열 그리드: 좌측 TOC sticky(200px) | 중앙 본문(~660px) | 우측 관련 글(240px)
   · H1: 44px / fw600 / lh57.2px (실측)
   · 헤더 순서: 카테고리 → H1 → 설명 → 저자+공유 → 히어로 이미지
   · TOC: JS 자동 생성 + IntersectionObserver 활성 하이라이트
════════════════════════════════════════ */

/* ── 3열 그리드 레이아웃 ── */
/* ── sticky 3열 그리드
   핵심: overflow-y: auto가 새 스크롤 컨텍스트를 만들어 뷰포트 기준 sticky를 차단함.
   해결: grid item 자체에 align-self:start + position:sticky 적용.
   align-self:start → 셀이 콘텐츠 높이만큼 (stretch 아님)
   position:sticky  → 그리드 컨테이너 높이 안에서 뷰포트 기준으로 고정 */
.ll-single-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 240px;
    gap: 0 48px;
    align-items: start; /* 각 셀이 콘텐츠 높이로 — sticky와 함께 사용 시 필요 */
    padding: 40px 0 80px;
}

/* ── 좌측: 목차(TOC) ── */
.ll-single-toc {
    /* grid item 자체가 sticky — overflow 없어야 뷰포트 기준 동작 */
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
}

.ll-single-toc::-webkit-scrollbar {
    display: none;
}

.ll-single-toc__inner {
    padding: 0;
    /* sticky는 outer(.ll-single-toc)에 있으므로 inner에는 미적용 */
}

/* ← 블로그 목록 돌아가기 링크 (TOC 맨 위) */
.ll-single-toc__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ll-muted);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.ll-single-toc__back:hover {
    background: var(--ll-card);
    color: var(--ll-ink);
}

.ll-single-toc__heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ll-muted);
    margin: 0 0 12px;
}

.ll-single-toc__nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* TOC 링크 공통 */
.ll-toc-item {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ll-muted);
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    border-radius: 0 6px 6px 0;
}

.ll-toc-item:hover {
    color: var(--ll-ink);
    background: var(--ll-card);
}

/* H3: 들여쓰기 */
.ll-toc-item--h3 {
    padding-left: 20px;
    font-size: 12px;
}

/* 활성 섹션 하이라이트 */
.ll-toc-item.is-active {
    color: var(--ll-ink);
    font-weight: 600;
    border-left-color: var(--ll-ink);
}

/* 모바일 TOC 아코디언 (JS로 활성화) */
.ll-single-toc__toggle {
    display: none; /* JS가 [hidden] 제거 후에도 모바일에서만 표시 */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: var(--ll-card);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ll-ink);
    cursor: pointer;
    margin-bottom: 0;
}

.ll-single-toc__mobile {
    border: 1px solid var(--ll-line);
    border-radius: 0 0 10px 10px;
    padding: 8px;
    margin-bottom: 24px;
}

/* ── 우측: 관련 아티클 사이드바 ── */
.ll-single-related-sidebar {
    /* TOC와 동일 패턴: grid item 자체에 sticky 적용 */
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
}

.ll-single-related-sidebar::-webkit-scrollbar {
    display: none;
}

.ll-single-related-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ll-single-related-sidebar__heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ll-muted);
    margin: 0;
}

.ll-single-related-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 관련 글 미니 카드 */
.ll-related-mini-card {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: var(--ll-ink);
    padding: 12px;
    border-radius: 10px;
    background: var(--ll-card);
    transition: background 0.15s, transform 0.15s;
}

.ll-related-mini-card:hover {
    background: var(--ll-line);
    transform: translateX(2px);
}

.ll-related-mini-card__img-wrap {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ll-line);
}

.ll-related-mini-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ll-related-mini-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ll-related-mini-card__cat {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ll-muted);
}

.ll-related-mini-card__title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ll-ink);
    margin: 0;
    /* 2줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-related-mini-card__date {
    font-size: 11px;
    color: var(--ll-muted);
    margin-top: auto;
}

/* 우측 사이드바용 상담 CTA (더 작게) */
.ll-sidebar-cta--in-related {
    padding: 16px;
    font-size: inherit;
}

.ll-sidebar-cta--in-related .ll-sidebar-cta__title {
    font-size: 14px;
}

.ll-sidebar-cta--in-related .ll-sidebar-cta__desc {
    font-size: 11px;
}

.ll-sidebar-cta--in-related .ll-sidebar-cta__btn {
    font-size: 12px;
    padding: 9px 12px;
}

/* ── 아티클 헤더 ── */
.ll-single-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ll-line);
}

/* 카테고리 태그 (H1 위, 회색 subtle — 인블로그 패턴) */
.ll-single-header-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.ll-single-header-cat {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: var(--ll-card);
    color: var(--ll-muted);
    border: 1px solid var(--ll-line);
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.ll-single-header-cat:hover {
    border-color: var(--ll-ink);
    color: var(--ll-ink);
}

/* H1: 인블로그 실측 44px / fw600 / lh57px */
.ll-single-title {
    font-size: 44px;
    font-weight: 600;
    line-height: 57.2px;
    letter-spacing: -0.025em;
    color: var(--ll-ink);
    margin: 0 0 16px;
}

/* 발췌 설명 */
.ll-single-desc {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ll-muted);
    margin: 0 0 20px;
}

/* 저자 줄: 좌=저자정보, 우=공유버튼 (인블로그 패턴) */
.ll-single-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ll-single-byline__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--ll-muted);
}

.ll-single-byline__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.ll-single-byline__author {
    font-weight: 600;
    color: var(--ll-ink);
}

.ll-single-byline__date {
    color: var(--ll-muted);
}

/* ── 상단 공유 버튼 (인라인, 저자줄 우측) ── */
.ll-single-share-top {
    position: relative;
    flex-shrink: 0;
}

.ll-single-share-top__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--ll-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ll-muted);
    cursor: pointer;
    padding: 7px 14px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ll-single-share-top__btn:hover {
    background: var(--ll-card);
    color: var(--ll-ink);
    border-color: var(--ll-ink);
}

/* 공유 드롭다운 패널 */
.ll-single-share-top__panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--ll-bg);
    border: 1px solid var(--ll-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(32, 37, 38, 0.1);
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    z-index: 200;
}

.ll-single-share-top__panel:not([hidden]) {
    display: flex;
}

.ll-single-share-top__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ll-ink);
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    text-decoration: none;
}

.ll-single-share-top__item:hover {
    background: var(--ll-card);
}

.ll-single-share-top__item--kakao {
    color: #3A1D1D;
    background: #FEF9C3;
}

.ll-single-share-top__item--kakao:hover {
    background: #FEF08A;
}

/* ── 히어로 이미지 (저자 아래, 인블로그 패턴) ── */
.ll-single-hero {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--ll-card);
    margin-bottom: 40px;
}

.ll-single-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 본문 콘텐츠 ── */
.ll-single-content {
    font-size: 17px;
    line-height: 1.85;
    color: var(--ll-ink);
    margin-bottom: 48px;
}

.ll-single-content h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    margin: 2.4em 0 0.8em;
    letter-spacing: -0.025em;
    color: var(--ll-ink);
    /* 스크롤 offset 보정 (TOC 클릭 시 헤더에 가리지 않도록) */
    scroll-margin-top: 110px;
}

.ll-single-content h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 2em 0 0.6em;
    letter-spacing: -0.02em;
    scroll-margin-top: 110px;
}

.ll-single-content h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 1.6em 0 0.5em;
    scroll-margin-top: 110px;
}

.ll-single-content p {
    margin: 0 0 1.5em;
}

.ll-single-content ul,
.ll-single-content ol {
    padding-left: 1.6em;
    margin: 0 0 1.5em;
}

.ll-single-content li {
    margin-bottom: 0.5em;
    line-height: 1.7;
}

.ll-single-content blockquote {
    margin: 2em 0;
    padding: 22px 28px;
    border-left: 4px solid var(--ll-lime);
    background: var(--ll-card);
    border-radius: 0 12px 12px 0;
    font-size: 16px;
    font-style: italic;
    color: var(--ll-muted);
}

.ll-single-content blockquote p { margin: 0; }

.ll-single-content img {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em 0;
}

.ll-single-content a {
    color: var(--ll-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.ll-single-content a:hover { opacity: 0.6; }

.ll-single-content hr {
    border: none;
    border-top: 1px solid var(--ll-line);
    margin: 2.4em 0;
}

.ll-single-content code {
    font-size: 0.875em;
    padding: 2px 7px;
    background: var(--ll-card);
    border-radius: 5px;
}

.ll-single-content pre {
    background: var(--ll-dark);
    color: #e2e8f0;
    padding: 22px 28px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.65;
    margin: 1.8em 0;
}

.ll-single-content pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

.ll-single-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 15px;
}

.ll-single-content th {
    background: var(--ll-card);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--ll-line);
}

.ll-single-content td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--ll-line);
}

.ll-single-content tr:hover td {
    background: color-mix(in srgb, var(--ll-card) 60%, transparent);
}

/* mark 형광펜 강조 — 인라인 style과 별개로 기본값 보정 */
.ll-single-content mark {
    background: #fef9c3;
    color: inherit;
    border-radius: 3px;
    padding: 1px 5px;
}

/* ── 포스트 푸터 ── */
.ll-single-footer {
    padding: 32px 0;
    border-top: 1px solid var(--ll-line);
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ll-single-footer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ll-single-footer__share {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ll-single-footer__share-label {
    font-size: 13px;
    color: var(--ll-muted);
    flex-shrink: 0;
}

.ll-single-footer__share-btns {
    display: flex;
    gap: 8px;
}

/* 공유 아이콘 버튼 */
.ll-single-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ll-card);
    color: var(--ll-ink);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.ll-single-share-btn:hover {
    background: rgba(32, 37, 38, 0.1);
    transform: translateY(-2px);
}

.ll-single-share-btn--kakao {
    background: #FEE500;
    color: #3A1D1D;
}

.ll-single-share-btn--kakao:hover { background: #f5da00; }

/* 카테고리 태그 (푸터용 border-pill) */
.ll-single-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 12px;
    border: 1px solid var(--ll-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ll-muted);
    transition: border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.ll-single-tag:hover {
    border-color: var(--ll-ink);
    color: var(--ll-ink);
}

/* ── 저자 소개 카드 ── */
.ll-single-author {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: var(--ll-card);
    border-radius: 16px;
}

.ll-single-author__avatar { flex-shrink: 0; }

.ll-single-author__avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--ll-dark);
    padding: 8px;
}

.ll-single-author__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ll-ink);
    margin: 0 0 6px;
}

.ll-single-author__bio {
    font-size: 13px;
    color: var(--ll-muted);
    line-height: 1.6;
    margin: 0 0 10px;
}

.ll-single-author__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration: none;
}

.ll-single-author__link:hover { opacity: 0.65; }

/* ── 하단 CTA 래퍼 ── */
.ll-single-cta-wrap {
    padding-bottom: 80px;
}


/* ════════════════════════════════════════
   싱글 페이지 반응형
════════════════════════════════════════ */

/* 태블릿 (max-width: 1200px): TOC 숨기고 2열로 */
@media (max-width: 1200px) {
    .ll-single-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 0 40px;
    }

    /* TOC 숨김 (데스크톱 TOC) */
    .ll-single-toc {
        display: none;
    }
}

/* 태블릿 좁은 구간 (max-width: 1024px): 1열로 */
@media (max-width: 1024px) {
    .ll-single-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ll-single-related-sidebar {
        display: none; /* 우측 사이드바도 숨김 — 모바일에서 하단 관련 글로 대체 */
    }

    .ll-single-title {
        font-size: 36px;
        line-height: 1.3;
    }
}

/* 모바일 (max-width: 768px) */
@media (max-width: 768px) {

    .ll-single-page {
        padding-top: 0;
    }

    .ll-single-layout {
        padding: 24px 0 48px;
    }

    /* 모바일 TOC 버튼 활성화 */
    .ll-single-toc__toggle {
        display: flex;
    }

    .ll-single-title {
        font-size: 26px;
        line-height: 1.35;
    }

    .ll-single-desc {
        font-size: 15px;
    }

    .ll-single-byline {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ll-single-hero {
        border-radius: 10px;
        margin-bottom: 24px;
    }

    .ll-single-content {
        font-size: 16px;
    }

    .ll-single-content h2 {
        font-size: 21px;
    }

    .ll-single-content h3 {
        font-size: 17px;
    }

    .ll-single-author {
        flex-direction: column;
        gap: 16px;
    }

    .ll-single-cta-wrap {
        padding-bottom: 60px;
    }
}


/* ════════════════════════════════════════════════════════════
   사이드바 뉴스레터 위젯 (blog-sidebar-newsletter.php)
   · 블로그 목록 좌측 사이드바 하단
   · 글상세 우측 관련 아티클 하단
   · 오프화이트 배경 — 블랙 다크 배너와 구분되는 밝은 톤
════════════════════════════════════════════════════════════ */
.ll-sidebar-nl {
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 14px;
    padding: 16px 16px 14px;
    margin-top: 20px;
}

/* 구독 완료 — 제출 후에만 JS로 display:flex 적용 (초기 hidden) */
.ll-sidebar-nl__success {
    display: none;    /* JS가 성공 시 style.display='flex' 로 전환 */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 10px 4px;
}

.ll-sidebar-nl__success-msg {
    font-size: 13px;
    color: #52525C;
    line-height: 1.6;
    margin: 0;
}

.ll-sidebar-nl__success-msg span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #71717B;
}

/* 상단 라벨 */
.ll-sidebar-nl__eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #9F9FA9;
    margin-bottom: 7px;
}

/* 타이틀 — 콤팩트 */
.ll-sidebar-nl__title {
    font-size: 15px;
    font-weight: 700;
    color: #09090B;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 0 0 7px;
}

/* 설명 */
.ll-sidebar-nl__desc {
    font-size: 12px;
    color: #71717B;
    line-height: 1.6;
    margin: 0 0 12px;
}

/* 입력 필드 */
.ll-sidebar-nl__field {
    margin-bottom: 7px;
}

.ll-sidebar-nl__input {
    width: 100%;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    color: #09090B;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ll-sidebar-nl__input::placeholder {
    color: #9F9FA9;
}

.ll-sidebar-nl__input:focus {
    border-color: #09090B;
}

/* 동의 체크박스 */
.ll-sidebar-nl__check-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin: 8px 0 8px;
}

/* 네이티브 체크박스 숨김 — 커스텀으로 교체 */
.ll-sidebar-nl__checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ll-sidebar-nl__check-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1.5px solid #D4D4D8;
    border-radius: 4px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.ll-sidebar-nl__checkbox:checked + .ll-sidebar-nl__check-custom {
    border-color: #09090B;
    background: #09090B;
}

.ll-sidebar-nl__checkbox:checked + .ll-sidebar-nl__check-custom::after {
    content: '';
    display: block;
    width: 8px;
    height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.ll-sidebar-nl__check-text {
    font-size: 11px;
    color: #71717B;
    line-height: 1.5;
}

.ll-sidebar-nl__check-text a {
    color: #52525C;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 에러 메시지 */
.ll-sidebar-nl__error {
    font-size: 11.5px;
    color: #DF1C41;
    min-height: 13px;
    margin-bottom: 6px;
}

/* 구독 버튼 */
.ll-sidebar-nl__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    background: #09090B;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 2px;
}

.ll-sidebar-nl__submit:hover:not(:disabled) {
    opacity: 0.8;
}

.ll-sidebar-nl__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 회사소개서 다운로드 — 구분선 아래 아웃라인 버튼 */
.ll-sidebar-nl__download {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #E4E4E7;
}

.ll-sidebar-nl__download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    color: #71717B;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

.ll-sidebar-nl__download-btn:hover {
    border-color: #09090B;
    color: #09090B;
}


/* ════════════════════════════════════════════════════════════
   블로그 v3 — 타이틀 히어로 배너
════════════════════════════════════════════════════════════ */
.ll-blog-hero {
    background: var(--ll-card, #F4F4F5);
    border-bottom: 1px solid var(--ll-line, #E8E8E8);
    padding: 52px 0 44px;
    margin-bottom: 0;
}

.ll-blog-hero__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.ll-blog-hero__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ll-muted, #71717B);
    margin-bottom: 10px;
}

.ll-blog-hero__title {
    font-size: 42px;
    font-weight: 700;
    color: var(--ll-ink, #202527);
    letter-spacing: -0.035em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.ll-blog-hero__desc {
    font-size: 15px;
    color: var(--ll-muted, #71717B);
    line-height: 1.65;
    margin: 0 0 24px;
}

/* 검색 폼 */
.ll-blog-search-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;  /* 가운데 정렬 */
}

.ll-blog-search-form__wrap {
    flex: 1;
    position: relative;
}

.ll-blog-search-form__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ll-muted, #9F9FA9);
    pointer-events: none;
}

.ll-blog-search-form__input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    background: #fff;
    border: 1.5px solid var(--ll-line, #E8E8E8);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ll-ink, #202527);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ll-blog-search-form__input:focus {
    border-color: var(--ll-ink, #202527);
}

.ll-blog-search-form__input::placeholder {
    color: #9F9FA9;
}

.ll-blog-search-form__btn {
    padding: 11px 18px;
    background: #09090B;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.ll-blog-search-form__btn:hover {
    opacity: 0.82;
}

/* 검색 결과 상태 바 */
.ll-blog-search-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ll-ink, #202527);
}

.ll-blog-search-clear {
    font-size: 12px;
    color: var(--ll-muted, #71717B);
    background: none;
    border: 1px solid var(--ll-line, #E8E8E8);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ll-blog-search-clear:hover {
    color: var(--ll-ink, #202527);
    border-color: var(--ll-ink, #202527);
}


/* ════════════════════════════════════════════════════════════
   블로그 v3 — 카테고리 필터 탭
════════════════════════════════════════════════════════════ */
.ll-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.ll-blog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #71717B;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.ll-blog-filter-btn:hover {
    background: #E4E4E7;
    color: #09090B;
}

/* 카테고리 필터 라벨 — 호버 시 한글에서 영문 라벨로 전환합니다. */
.ll-blog-filter-label {
    position: relative;
    display: inline-grid;
    align-items: center;
    min-width: max-content;
    overflow: hidden;
}

.ll-blog-filter-label__kr,
.ll-blog-filter-label__en {
    grid-area: 1 / 1;
    white-space: nowrap;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    will-change: transform, opacity;
}

.ll-blog-filter-label__en {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
}

.ll-blog-filter-btn:hover .ll-blog-filter-label__kr {
    opacity: 0;
    transform: translateY(-6px);
}

.ll-blog-filter-btn:hover .ll-blog-filter-label__en {
    opacity: 1;
    transform: translateY(0);
}

.ll-blog-filter-btn.is-active {
    background: #09090B;
    border-color: #09090B;
    color: #fff;
}

.ll-blog-filter-count {
    font-size: 11px;
    opacity: 0.65;
}


/* ════════════════════════════════════════════════════════════
   블로그 v3 — 갤러리 그리드
════════════════════════════════════════════════════════════ */
.ll-blog-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 8px;
}

/* 갤러리 카드 */
.ll-blog-gcard {
    background: #fff;
    border: 1px solid var(--ll-line, #E8E8E8);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.22s, box-shadow 0.22s;
}

.ll-blog-gcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(32,37,39,0.09);
}

.ll-blog-gcard__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 이미지 영역 */
.ll-blog-gcard__img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F4F4F5;
}

.ll-blog-gcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.4s ease;
    display: block;
}

.ll-blog-gcard:hover .ll-blog-gcard__img {
    scale: 1.05;
}

.ll-blog-gcard__no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4D4D8;
}

/* 카드 본문 */
.ll-blog-gcard__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ll-blog-gcard__cat {
    font-size: 11px;
    font-weight: 600;
    color: #9F9FA9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ll-blog-gcard__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ll-ink, #202527);
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-blog-gcard__excerpt {
    font-size: 13px;
    color: var(--ll-muted, #71717B);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ll-blog-gcard__date {
    font-size: 11.5px;
    color: #9F9FA9;
    margin-top: auto;
    padding-top: 4px;
}


/* ════════════════════════════════════════════════════════════
   블로그 v3 — 무한스크롤 로딩 / 끝 / 빈 상태
════════════════════════════════════════════════════════════ */
/* hidden 속성이 붙으면 display:flex보다 우선 적용 */
.ll-blog-loading[hidden] { display: none !important; }

.ll-blog-loading {
    display: flex;
    justify-content: center;
    padding: 28px 0;
}

.ll-blog-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid #E4E4E7;
    border-top-color: #09090B;
    border-radius: 50%;
    animation: ll-blog-spin 0.75s linear infinite;
}

@keyframes ll-blog-spin {
    to { transform: rotate(360deg); }
}

.ll-blog-end {
    text-align: center;
    font-size: 13px;
    color: #9F9FA9;
    padding: 20px 0 40px;
    margin: 0;
}

.ll-blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: #9F9FA9;
    text-align: center;
}

.ll-blog-empty p {
    font-size: 15px;
    margin: 0;
    color: #71717B;
}

.ll-blog-empty-reset {
    padding: 9px 20px;
    background: #09090B;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ll-blog-empty-reset:hover {
    opacity: 0.8;
}


/* ════════════════════════════════════════════════════════════
   블로그 v3 — 반응형
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ll-blog-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ll-blog-hero {
        padding: 36px 0 28px;
    }

    .ll-blog-hero__title {
        font-size: 30px;
    }

    .ll-blog-hero__desc {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .ll-blog-search-form {
        flex-direction: column;
        gap: 8px;
    }

    .ll-blog-search-form__btn {
        width: 100%;
    }

    .ll-blog-gallery {
        grid-template-columns: 1fr;
    }

    .ll-blog-filters {
        margin-bottom: 16px;
    }
}