/* ═══════════════════════════════════════════
   UI Fade Clamp — 콘텐츠 N줄 제한 + 점진적 fade + blur
   사용: 부모에 .ui-fade-clamp, 자식에 .ui-fade-clamp__content
   ═══════════════════════════════════════════ */

.ui-fade-clamp {
    position: relative;
    overflow: hidden;
}

/* 기본 3줄 높이 (--fade-clamp-rows로 조정 가능) */
.ui-fade-clamp.clamped {
    max-height: var(--fade-clamp-height, 320px);
}

/* 점진적 fade + blur 오버레이 */
.ui-fade-clamp.clamped::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--s-12);
    background: linear-gradient(to top, var(--bg-raised, #161618) 0%, transparent 100%);
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* 더보기 버튼 */
.ui-fade-clamp__more {
    display: block;
    margin: calc(-1 * var(--s-6)) auto 0;
    position: relative;
    z-index: 2;
    padding: var(--s-1) 16px;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: var(--bg-raised, #161618);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-smooth), color var(--duration-fast) var(--easing-smooth), border-color var(--duration-fast) var(--easing-smooth);
    pointer-events: auto;
}
.ui-fade-clamp__more:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--accent);
}

/* 펼침 상태 */
.ui-fade-clamp.expanded {
    max-height: 2000px;
}
.ui-fade-clamp.expanded::after {
    display: none;
}
.ui-fade-clamp.expanded .ui-fade-clamp__more {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    display: block;
    margin: var(--s-2) auto 0;
}