:root{
  --bg:#fafafa;--glow:#e8eaff;--text:#0f172a;--sub:#334155;--muted:#64748b;--faint:#94a3b8;--line:#e2e8f0;
  --accent:#4f46e5;--accent-soft:rgba(79,70,229,.08);--on-accent:#fff;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#090b12;--glow:#171b38;--text:#f1f5f9;--sub:#cbd5e1;--muted:#94a3b8;--faint:#64748b;--line:#1e2536;
  --accent:#a5b4fc;--accent-soft:rgba(165,180,252,.10);--on-accent:#090b12;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:48px 16px;text-align:center;color:var(--text);
  background:radial-gradient(56rem 32rem at 50% -8%,var(--glow),transparent 70%) no-repeat,var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{width:100%;max-width:640px;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}}

h1{margin:0;font-size:clamp(40px,11vw,80px);line-height:1.05;font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
/* 도메인 제목: 글자 수(--len, HTML 의 style 속성)에 맞춰 한 줄에 들어가도록 크기를 줄입니다. (본문 폭 = min(화면, 672px) - 좌우 여백) */
h1.domain{font-size:clamp(24px,min(11vw,calc((min(100vw,672px) - 40px) / (var(--len,12) * .6))),80px)}

.aliases{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;margin:20px 0 0}
.aliases .label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.aliases .names{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(14px,3.4vw,16px);color:var(--muted);overflow-wrap:anywhere;
}

.description{
  margin:36px auto 0;max-width:30em;color:var(--sub);
  font-size:clamp(16px,3.8vw,18px);line-height:1.7;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;
}

.mail{
  display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding:11px 20px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:600;text-decoration:none;
  overflow-wrap:anywhere;transition:background .2s,color .2s;
}
/* 메일 아이콘: mail.svg 를 마스크로 써서 글자색(currentColor)을 따라가게 합니다. */
.mail .icon{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url(mail.2d193a339d.svg) center/contain no-repeat;mask:url(mail.2d193a339d.svg) center/contain no-repeat;
}
.mail:hover,.mail:focus-visible{background:var(--accent);color:var(--on-accent);outline:none}

.sub{margin:16px 0 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;padding:0;list-style:none}
.list a{
  display:block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--sub);text-decoration:none;
}
.list a:hover{border-color:var(--accent);color:var(--accent)}