/* 블로그형 테마 공용 사이드바 위젯 — 많이 본 글·태그 클라우드.
   색은 tokens.css/테마 변수만 쓴다(테마별 복붙 없음). 마크업: themes/default/components/blog_sidebar.php */

.side-popular,
.side-tags { margin-top: 2rem; }

/* ───── 많이 본 글 ───── */
.side-popular__periods {
    background: var(--surface-body);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    display: flex;
    gap: .125rem;
    margin: .75rem 0 .25rem;
    padding: .1875rem;
}
.side-popular__periods a {
    border-radius: 999px;
    color: var(--text-muted);
    flex: 1;
    font-size: var(--fs-nav-label);
    padding: .25rem .5rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.side-popular__periods a:hover { color: var(--text-strong); }
.side-popular__periods a[aria-current="true"] {
    background: var(--surface-raised, #fff);
    box-shadow: 0 1px 2px rgb(0 0 0 / .12);
    color: var(--text-strong);
    font-weight: 700;
}

.side-popular__list {
    counter-reset: rank;
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-popular__list li { counter-increment: rank; }
.side-popular__list a {
    align-items: baseline;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-body);
    display: flex;
    font-size: var(--fs-nav-sub);
    gap: .75rem;
    line-height: 1.45;
    padding: .7rem 0;
    text-decoration: none;
}
.side-popular__list a::before {
    color: var(--text-muted);
    content: counter(rank);
    flex: 0 0 1.1rem;
    font-feature-settings: "tnum";
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}
.side-popular__list li:nth-child(-n+3) a::before { color: var(--primary); }
.side-popular__list span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.side-popular__list a:hover span { color: var(--primary); }

/* ───── 태그 클라우드: 글 수가 많을수록 크게 ───── */
.side-tags__cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .35rem;
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
}
.side-tags__cloud a {
    align-items: baseline;
    background: var(--surface-raised, #fff);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-body);
    display: inline-flex;
    gap: .3rem;
    line-height: 1.3;
    padding: .25rem .7rem;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.side-tags__cloud a:hover,
.side-tags__cloud a:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--surface-raised, #fff);
}
.side-tags__cloud small { color: var(--text-muted); font-size: .72em; }
.side-tags__cloud a:hover small,
.side-tags__cloud a:focus-visible small { color: inherit; }

.side-tags__cloud [data-level="1"] { font-size: var(--fs-nav-label); }
.side-tags__cloud [data-level="2"] { font-size: var(--fs-nav-sub); }
.side-tags__cloud [data-level="3"] { font-size: 1.0625rem; font-weight: 700; }
.side-tags__cloud [data-level="4"] {
    border-color: var(--text-strong);
    color: var(--text-strong);
    font-size: 1.1875rem;
    font-weight: 800;
}

.side-tags__all {
    color: var(--text-muted);
    display: inline-block;
    font-size: var(--fs-nav-label);
    margin-top: .75rem;
}
.side-tags__all:hover { color: var(--primary); }