:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; color: #202124; background: #f3f4f6; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 240px; }
main { width: min(100%, 520px); margin: 0 auto; padding: 52px 20px 28px; }
.profile { text-align: center; margin-bottom: 30px; }
.avatar { display: block; border-radius: 50%; object-fit: cover; object-position: center 34%; margin: 0 auto 19px; border: 4px solid white; box-shadow: 0 2px 10px #2021240b; }
h1 { margin: 0; font-size: 24px; line-height: 1.4; letter-spacing: -.8px; font-weight: 750; }
.profile p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #5f6368; word-break: keep-all; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.link-card { display: flex; align-items: center; gap: 15px; min-height: 82px; padding: 17px 19px; border: 1px solid #dadce0; border-radius: 18px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 2px 0 #20212406; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; -webkit-tap-highlight-color: #2563eb12; }
.link-icon { display: grid; place-items: center; flex: 0 0 26px; color: #45494d; }
.link-icon svg { width: 25px; height: 25px; }
.link-copy { display: block; min-width: 0; flex: 1; }
.link-label { display: block; font-size: 16px; font-weight: 650; line-height: 1.5; letter-spacing: -.4px; overflow-wrap: anywhere; }
.link-detail { display: block; font-size: 12px; line-height: 1.5; margin-top: 3px; color: #5f6368; overflow-wrap: anywhere; }
.arrow { flex: 0 0 16px; width: 16px; height: 16px; color: #6b7075; }
.link-card:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.link-card:active { transform: scale(.985); }
footer { text-align: center; margin-top: 32px; color: #666b70; font-size: 12px; line-height: 1.7; }
footer span { display: block; margin-top: 5px; font-size: 11px; }
@media (hover: hover) { .link-card:hover { transform: translateY(-2px); border-color: #a8adb3; box-shadow: 0 5px 14px #20212409; } }
@media (max-width: 360px) { main { padding-top: 36px; } .link-card { gap: 12px; padding-inline: 14px; } .link-label { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } .link-card:hover, .link-card:active { transform: none; } }