@charset "utf-8";

/* ============================================
   태그 클라우드 위젯 - Clean Portal (vue-widget)
   @version 20260301-001
   ============================================ */

/* 위젯 기본 */
.tg-widget {
    margin-bottom: var(--gb-space-5);
}

/* 클라우드 컨테이너 */
.tg-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    line-height: 1;
}

/* 태그 공통 */
.tg-tag {
    display: inline-block;
    padding: 0.25em 0.625em;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid var(--gb-border-default);
    color: var(--gb-text-secondary);
    background-color: transparent;
}

.tg-tag:hover {
    transform: translateY(-2px);
    border-color: var(--gb-primary);
    color: var(--gb-primary);
    background-color: var(--gb-primary-light);
    box-shadow: var(--gb-shadow-sm);
}

.tg-tag:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--gb-focus-ring);
}

/* 가중치별 사이즈 (1~5) */
.tg-w1 {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.7;
}

.tg-w2 {
    font-size: 0.8125rem;
    font-weight: 400;
}

.tg-w3 {
    font-size: 0.9375rem;
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-primary);
}

.tg-w4 {
    font-size: 1.0625rem;
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-primary);
    border-color: var(--gb-border-strong);
}

.tg-w5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gb-primary);
    border-color: var(--gb-primary);
    background-color: var(--gb-primary-light);
}

.tg-w5:hover {
    color: var(--gb-text-on-primary);
    background-color: var(--gb-primary);
}