:root { color-scheme:dark; --page-start:#202020; --page-end:#505050; --gradient-angle:180deg; --text:#fff; --muted:#c7c7c7 }
* { box-sizing:border-box }
html { min-height:100%; background:var(--page-start) }
body { min-height:100vh; margin:0; color:var(--text); font-family:Arial,"Noto Sans KR",sans-serif; background:
  radial-gradient(circle at 15% 10%,rgba(255,255,255,.12),transparent 34rem),
  radial-gradient(circle at 85% 85%,rgba(0,0,0,.12),transparent 30rem),
  linear-gradient(var(--gradient-angle),var(--page-start),var(--page-end)); background-attachment:fixed }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E") }
.link-shell { position:relative; width:min(100% - 28px,680px); min-height:100vh; margin:auto; padding:72px 0 40px }
.share-button { position:absolute; top:18px; right:0; width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; background:rgba(0,0,0,.28); font-size:21px; cursor:pointer }
.link-profile { text-align:center }
.link-avatar { width:104px; height:104px; margin:auto; overflow:hidden; border:3px solid #fff; border-radius:50%; display:grid; place-items:center; background:#111; font-size:42px; font-weight:800 }
.link-avatar img { width:100%; height:100%; object-fit:cover }
.link-profile h1 { margin:14px 0 6px; font-size:30px; letter-spacing:-.04em }
.link-profile p { margin:0; color:var(--muted); font-size:16px; font-weight:600 }
.link-socials { display:flex; justify-content:center; gap:15px; min-height:42px; margin:17px 0 32px }
.link-socials a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:#fff; text-decoration:none; transition:transform .18s ease,background .18s ease }
.link-socials a:hover { transform:translateY(-3px); background:rgba(255,255,255,.12) }
.link-socials img { width:23px; height:23px; filter:brightness(0) invert(1) }
.link-socials span { font-weight:800; font-size:15px }
.link-list { display:grid; gap:14px }
.link-card { min-height:72px; display:grid; grid-template-columns:54px 1fr 28px; align-items:center; gap:14px; padding:9px 16px 9px 9px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:#050505; color:#fff; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform .18s ease,border-color .18s ease }
.link-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.5) }
.link-card.no-image { grid-template-columns:1fr 28px; padding-left:22px }
.link-card img { width:54px; height:54px; border-radius:9px; object-fit:cover; background:#222 }
.link-card strong { text-align:center; font-size:16px }
.link-card i { font-style:normal; text-align:right; color:#aaa; font-size:20px }
.link-shell footer { margin-top:72px; text-align:center }
.link-shell footer a { display:inline-block; padding:13px 20px; border-radius:999px; background:#fff; color:#111; font-weight:700; text-decoration:none }
@media (max-width:520px) {
  .link-shell { padding-top:68px }
  .link-avatar { width:92px; height:92px }
  .link-card { min-height:66px }
}