/* 홈 전용 컴포넌트: 기존 뉴스/에디터 CSS에 영향이 없도록 네임스페이스 적용 */
.haru-home-composite { margin: 0px 0 6px; }
.haru-home-composite *, .haru-home-composite *::before, .haru-home-composite *::after { box-sizing: border-box; }
.haru-home-composite__top { display:grid; grid-template-columns:minmax(0, 2.3fr) minmax(245px, 1fr); gap:6px; align-items:stretch; }
.haru-home-composite__boards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px; }
.haru-home-feature, .haru-home-panel { min-width:0; background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.haru-home-feature__top, .haru-home-panel__header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
.haru-home-feature__top h2, .haru-home-panel__header h2 { margin:0; font-size:15px; font-weight:800; color:#111827; }
.haru-home-feature__top span, .haru-home-panel__header a, .haru-home-panel__header span { font-size:11px; color:#6b7280; text-decoration:none; }
.haru-home-feature__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; }
.haru-home-feature__card { position:relative; display:block; min-width:0; height:190px; overflow:hidden; border-radius:6px; background:#111827; text-decoration:none; }
.haru-home-feature__card img { width:100%; height:100%; object-fit:cover; display:block; }
.haru-home-feature__shade { position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.87)); }
.haru-home-feature__caption { position:absolute; bottom:0; left:0; right:0; padding:10px; color:#fff; }
.haru-home-feature__caption small { display:block; margin-bottom:4px; font-size:10px; opacity:.9; }
.haru-home-feature__caption strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.45; }
.haru-home-ranking__list,.haru-home-board-list { list-style:none; margin:0; padding:7px 12px; }
.haru-home-ranking__list li a,.haru-home-board-list li a { display:flex; align-items:center; gap:8px; min-height:28px; text-decoration:none; color:#374151; font-size:12px; }
.haru-home-ranking__number { min-width:15px; font-weight:800; color:#6b7280; text-align:center; font-size:11px; }
.haru-home-ranking__list li:first-child .haru-home-ranking__number { color:#dc2626; }
.haru-home-ranking__name,.haru-home-board-list__title { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.haru-home-ranking__views,.haru-home-board-list small { flex:0 0 auto; color:#9ca3af; font-size:10px; }
.haru-home-board-list li a { min-height:30px; border-bottom:1px solid #f3f4f6; }
.haru-home-board-list li:last-child a { border-bottom:0; }
.haru-home-empty { padding:20px 10px; font-size:12px; color:#9ca3af; text-align:center; }
@media (max-width: 900px) { .haru-home-composite__top { grid-template-columns:1fr; } .haru-home-composite__boards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .haru-home-feature__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .haru-home-feature__card { height:155px; } .haru-home-composite__boards { grid-template-columns:1fr; } }

/* 실시간 베스트: 좌우 카드 배열과 관리자 출력 설정 */
.haru-home-feature__top { flex-wrap:wrap; }
.haru-home-feature__tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; min-width:0; }
.haru-home-feature__form { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.haru-home-feature__form label { font-size:11px; color:#475569; white-space:nowrap; }
.haru-home-feature__form select,.haru-home-feature__form input { min-height:29px; border:1px solid #d1d5db; border-radius:5px; padding:3px 5px; font-size:11px; background:#fff; color:#111827; }
.haru-home-feature__form input { width:46px; }
.haru-home-feature__form button { border:0; border-radius:5px; background:#172554; color:#fff; font-size:11px; padding:7px 9px; cursor:pointer; }
.haru-home-feature__page { font-size:11px; color:#64748b; white-space:nowrap; }
.haru-home-feature__arrows { display:flex; gap:3px; }
.haru-home-feature__arrows button { width:27px; height:27px; background:#1e3a8a; border:0; border-radius:3px; color:white; cursor:pointer; font-size:22px; line-height:1; }
.haru-home-feature__arrows button:disabled { opacity:.35; cursor:default; }
.haru-home-feature__viewport { min-width:0; overflow:hidden; }
.haru-home-feature__grid { display:flex; flex-wrap:nowrap; gap:8px; padding:10px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }
.haru-home-feature__grid::-webkit-scrollbar { display:none; }
.haru-home-feature__card { flex:0 0 calc((100% - (var(--best-visible,4) - 1)*8px) / var(--best-visible,4)); width:calc((100% - (var(--best-visible,4) - 1)*8px) / var(--best-visible,4)); scroll-snap-align:start; }
@media(max-width:600px) { .haru-home-feature__form { width:100%; justify-content:flex-end; } .haru-home-feature__top { align-items:flex-start; } }
/* 전체 레이아웃 */
.haru-home-dam-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.9fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 6px;
}

/* 왼쪽 영역 */
.haru-home-dam-layout__left {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
    min-width: 0;
}

.haru-home-dam-layout__best {
    min-width: 0;
}

.haru-home-dam-layout__left-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

/* 오른쪽 영역 */
.haru-home-dam-layout__right {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 12px;
    min-width: 0;
}

.haru-home-dam-layout__right-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
}

/* 공통 패널 높이 정리 */
.haru-home-dam-layout__best > *,
.haru-home-dam-layout__rank > *,
.haru-home-dam-layout__panel > * {
    height: 100%;
}

/* 담친 차트가 길게 보이도록 */
.haru-home-dam-layout__rank {
    min-height: 420px;
}

/* 아래 패널 최소 높이 */
.haru-home-dam-layout__panel {
    min-height: 210px;
}

/* 내부 컴포넌트가 카드형이면 flex로 꽉 차게 */
.haru-home-dam-layout__best > *,
.haru-home-dam-layout__rank > *,
.haru-home-dam-layout__panel > * {
    display: flex;
    flex-direction: column;
}

/* 모바일 */
@media (max-width: 1024px) {
    .haru-home-dam-layout {
        grid-template-columns: 1fr;
    }

    .haru-home-dam-layout__left-bottom {
        grid-template-columns: 1fr;
    }

    .haru-home-dam-layout__right {
        grid-template-rows: auto auto;
    }

    .haru-home-dam-layout__rank {
        min-height: 300px;
    }
}
/* 실시간 베스트: 카드가 한 장이어도 동일한 크기의 정사각형 타일 유지 */
.haru-home-feature__grid .haru-home-feature__card {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    align-self: flex-start;
    flex-shrink: 0;
}
.haru-home-feature__grid .haru-home-feature__card img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
}
/* 메인 홈 레이아웃: 좌측 콘텐츠 + 우측 랭킹 */
.haru-home-dam-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.9fr);
    gap: 12px;
    align-items: stretch;
}

/* 왼쪽: 실시간 담 + 하단 게시판 */
.haru-home-dam-layout__left {
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
    min-width: 0;
}

/* 하단 게시판 3열 */
.haru-home-dam-layout__left-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.haru-home-dam-layout__panel {
    min-width: 0;
}

/* 오른쪽: 담친 차트 하나만 */
.haru-home-dam-layout__right {
    display: block;
    min-width: 0;
}

.haru-home-dam-layout__rank {
    height: 100%;
    min-height: 420px;
}

.haru-home-dam-layout__rank > * {
    height: 100%;
}

/* 태블릿 */
@media (max-width: 1024px) {
    .haru-home-dam-layout {
        grid-template-columns: 1fr;
    }

    .haru-home-dam-layout__left-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .haru-home-dam-layout__rank {
        min-height: 300px;
    }
}

/* 모바일 */
@media (max-width: 640px) {
    .haru-home-dam-layout__left-bottom {
        grid-template-columns: 1fr;
    }
}
/* 실시간 담 / 담친 차트와 고정 사진 게시글 사이 */
.haru-home-dam-layout + .haru-static-photos {
    margin-top: 0;
}

/* 고정 사진 게시글과 아래 채널 영역 사이 */
.haru-static-photos {
    margin-bottom: 6px;
}