/* Lucian UX/UI Prompt #050 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#050 */
.u050{--mx:50%;--my:30%;--rx:0deg;--ry:0deg;position:relative;width:100%;height:450px;perspective:1100px}
.u050-card{position:relative;display:block;width:100%;height:100%;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 50px -34px var(--ux-shadow-strong);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ux-ease),box-shadow .5s;overflow:hidden;isolation:isolate}
.u050.is-live .u050-card{transition:transform .12s linear,box-shadow .5s}
.u050-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(220px circle at var(--mx) var(--my),var(--ux-accent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;pointer-events:none;z-index:3}
.u050-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.u050.is-live .u050-card::after,.u050.is-live .u050-glare{opacity:1}
.u050-img{position:relative;height:210px;overflow:hidden;background:var(--ux-surface-3)}
.u050-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,43,39,.42))}
.u050-img img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ux-ease)}
.u050:hover .u050-img img{transform:scale(1.04)}
.u050-img b{position:absolute;z-index:1;left:16px;top:16px;height:28px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(3,43,39,.72);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em}
.u050-body{padding:18px 20px 0}
.u050-src{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ux-ink-2)}
.news-source-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:var(--ux-accent);color:var(--ux-accent-ink)}
.news-source-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u050-dot{width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--ux-accent);box-shadow:0 0 0 4px var(--ux-accent-soft)}
.u050-h{margin:10px 0 0;font-size:20px;line-height:1.28;font-weight:800;letter-spacing:-.035em}
.u050-p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--ux-ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u050-foot{position:absolute;left:20px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:600;color:var(--ux-ink-3)}
.u050-btn{height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--ux-ink);color:var(--ux-page);font-size:12px;font-weight:800;white-space:nowrap;transition:transform .3s var(--ux-spring),background .3s}
.u050-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.u050-card:hover .u050-btn svg{transform:translateX(3px)}
.u050-card:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
@media(max-width:560px){.u050{height:445px}.u050-img{height:205px}}