/* 제목은 공통 site-reveal, 사례는 행 전체를 한 번에 표시한다. */
.portfolio-scroll-progress{position:fixed;inset:0 0 auto;height:4px;z-index:200;pointer-events:none;background:#1314170d}
.portfolio-scroll-progress span{display:block;width:0;height:100%;background:#ffc300;box-shadow:0 0 17px #ffc30038}
.site{overflow:clip}
.portfolio-grid:has(.portfolio-row){display:flex;flex-direction:column;gap:14px}
.portfolio-row{display:grid;grid-template-columns:repeat(var(--portfolio-columns,4),minmax(0,1fr));gap:14px;opacity:1;translate:0 0}
.portfolio-motion .portfolio-row{opacity:0;translate:0 18px;transition:opacity .65s ease,translate .75s cubic-bezier(.22,1,.36,1)}
.portfolio-motion .portfolio-row.visible{opacity:1;translate:0 0}
.portfolio-card{height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s!important}
.portfolio-card img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.portfolio-card:hover{transform:translateY(-4px);border-color:#b8b9b8}.portfolio-card:hover img{transform:scale(1.025)}}
@media(max-width:540px){.portfolio-grid:has(.portfolio-row),.portfolio-row{gap:12px}}
@media(prefers-reduced-motion:reduce){.portfolio-motion .portfolio-row{opacity:1;translate:none;transition:none}.portfolio-card,.portfolio-card img{transition:none!important}.portfolio-card:hover,.portfolio-card:hover img{transform:none}}