@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

*,*::before,*::after{box-sizing:border-box}

:root{
  --violet:#6514ff;
  --magenta:#bf00ff;
  --ink:#1c1726;
  --bg:#f6f1ff;
  --card:#ffffff;
  --acid:#d9ff45;
  --line:#e2d8ff;
  --muted:#5b5273;
  --r:28px;
  --shadow:0 22px 48px -26px rgba(28,23,38,.5);
  --sans:"Noto Sans KR","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 28%,rgba(101,20,255,.16),transparent 42%),
    radial-gradient(circle at 78% 12%,rgba(191,0,255,.14),transparent 38%),
    radial-gradient(circle at 62% 88%,rgba(217,255,69,.5),transparent 40%);
  animation:drift 26s ease-in-out infinite alternate;
}

@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.12)}
}

a{color:var(--violet)}

a:focus-visible,button:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* 顶部条 */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:12px 22px;
  background:rgba(246,241,255,.84);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}

.brand{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:6px 20px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.03em;
  box-shadow:0 12px 26px -16px rgba(28,23,38,.95);
  transition:background .25s,transform .25s;
}

.brand:hover{background:var(--violet);transform:translateY(-2px)}

.brand .mark{width:24px;height:24px;border-radius:8px;object-fit:cover;display:block}

.brand-name{font-size:17px;white-space:nowrap}

.pills ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

.pills-a ul{justify-content:flex-end}

.pills-b ul{justify-content:flex-start}

.pills a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:16px;
  text-decoration:none;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
}

.pills a:hover,.pills a:focus-visible,.pills a.on{
  background:var(--violet);
  border-color:var(--violet);
  color:#fff;
  transform:translateY(-2px);
}

.pills a.cta{
  background:var(--magenta);
  border-color:var(--magenta);
  color:#fff;
  font-weight:700;
  box-shadow:0 12px 26px -14px rgba(191,0,255,.95);
}

.pills a.cta:hover{background:var(--violet);border-color:var(--violet)}

/* 框架 */
.frame{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:48px;
  max-width:1280px;
  margin:0 auto;
  padding:36px 22px 0;
}

/* 左侧索引 */
.rail{
  position:sticky;
  top:96px;
  align-self:start;
  padding-bottom:24px;
}

.rail-h{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.4;
  letter-spacing:.01em;
}

.rail .subtitle{
  margin:0 0 22px;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
}

.index ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:idx}

.index li{counter-increment:idx}

.index a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 12px;
  border-radius:999px;
  color:var(--ink);
  font-size:16px;
  text-decoration:none;
  transition:background .22s,color .22s,transform .22s;
}

.index a::before{
  content:counter(idx,decimal-leading-zero);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--violet);
}

.index a:hover,.index a.on{background:var(--ink);color:#fff;transform:translateX(3px)}

.index a:hover::before,.index a.on::before{color:var(--acid)}

/* 正文区 */
.paper{
  position:relative;
  z-index:1;
  padding:24px 0 48px;
  min-width:0;
}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100svh;
  display:grid;
  align-content:start;
  gap:22px;
  padding:clamp(40px,11vh,118px) clamp(20px,4vw,46px) 64px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fdfbff;
  box-shadow:var(--shadow);
}

.hero-inner{position:relative;z-index:2;display:grid;gap:26px;justify-items:start;max-width:760px}

.hero h1{
  margin:0;
  font-size:clamp(34px,6vw,68px);
  line-height:1.14;
  letter-spacing:-.035em;
  font-weight:700;
  max-width:17ch;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 26px;
  border-radius:999px;
  background:var(--violet);
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 16px 32px -18px rgba(101,20,255,.95);
  transition:background .22s,transform .22s;
}

.hero-btn:hover{background:var(--magenta);transform:translateY(-3px)}

.ghost{
  position:absolute;
  left:-2%;
  bottom:7%;
  z-index:1;
  font-weight:700;
  font-size:clamp(76px,17vw,210px);
  line-height:.82;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:2px rgba(101,20,255,.22);
  white-space:nowrap;
  pointer-events:none;
  animation:slide 20s ease-in-out infinite alternate;
}

@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-9%)}}

.hero .shape{position:absolute;pointer-events:none;z-index:1}

.s1{
  width:min(44vw,300px);
  aspect-ratio:1;
  right:-46px;
  top:13%;
  border-radius:38px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  opacity:.92;
  animation:float 13s ease-in-out infinite alternate;
}

.s2{
  width:min(28vw,164px);
  aspect-ratio:1;
  right:20%;
  bottom:10%;
  border-radius:50%;
  background:var(--acid);
  border:2px solid var(--ink);
  animation:float 10s .8s ease-in-out infinite alternate;
}

.s3{
  width:78px;
  height:78px;
  left:2%;
  top:9%;
  border-radius:22px;
  border:3px dashed rgba(191,0,255,.55);
  animation:float 16s .4s ease-in-out infinite alternate;
}

@keyframes float{
  from{transform:translateY(-10px) rotate(0deg)}
  to{transform:translateY(16px) rotate(9deg)}
}

/* 正文卡片 */
.paper > section:not(.hero){
  position:relative;
  margin-top:48px;
  padding:clamp(24px,4vw,48px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
  box-shadow:var(--shadow);
  scroll-margin-top:110px;
}

.paper > section:not(.hero).rev{opacity:0;transform:translateY(24px)}

.paper > section:not(.hero).in{
  opacity:1;
  transform:none;
  transition:opacity .45s ease,transform .45s ease;
}

.paper section{min-width:0}

.paper h2{
  margin:0 0 14px;
  font-size:clamp(24px,3vw,34px);
  line-height:1.28;
  letter-spacing:-.025em;
  font-weight:700;
}

.paper h2 + p{
  margin-top:-4px;
  color:var(--muted);
  font-size:16px;
}

.paper h3{
  margin:30px 0 10px;
  font-size:20px;
  line-height:1.4;
  letter-spacing:-.01em;
}

.paper p{margin:0 0 16px;max-width:70ch}

.paper ul,.paper ol{margin:0 0 18px;padding-left:1.25em}

.paper li{margin:0 0 6px}

.paper li::marker{color:var(--magenta)}

.paper blockquote{
  margin:22px 0;
  padding:14px 20px;
  border-left:5px solid var(--violet);
  border-radius:0 18px 18px 0;
  background:#f7f2ff;
  color:var(--ink);
}

.paper blockquote p:last-child{margin-bottom:0}

.paper img{max-width:100%;height:auto;border-radius:20px;display:block;margin:20px 0}

.paper section > :first-child{margin-top:0}

.paper section > :last-child{margin-bottom:0}

.paper strong{font-weight:700}

/* 页脚 */
.foot{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  max-width:1280px;
  margin:100px auto 0;
  padding:44px 22px 40px;
  border-top:3px solid var(--ink);
}

.foot p{margin:0;font-size:16px;line-height:1.6;min-width:0}

.f-brand{font-size:20px;font-weight:700;letter-spacing:.02em}

.f-brand a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}

.f-brand a:hover{color:var(--violet)}

.f-links{display:flex;flex-direction:column}

.f-links a{
  display:flex;
  align-items:center;
  min-height:40px;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s,transform .2s;
}

.f-links a:hover{color:var(--violet);transform:translateX(3px)}

.f-desc{color:var(--muted)}

.foot small{
  grid-column:1/-1;
  display:block;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:16px;
}

/* 断点 */
@media (max-width:1120px){
  .topbar{grid-template-columns:auto 1fr;padding:10px 16px}
  .pills{display:none}
  .brand{justify-self:start;padding:6px 16px}
  .frame{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .rail{
    position:sticky;
    top:64px;
    z-index:20;
    padding:10px 16px;
    background:rgba(246,241,255,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .rail-h,.rail .subtitle{display:none}
  .index ul{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
  .index ul::-webkit-scrollbar{display:none}
  .index a{
    min-height:40px;
    padding:0 14px;
    white-space:nowrap;
    background:#fff;
    border:1px solid var(--line);
  }
  .index a::before{display:none}
  .index a:hover,.index a.on{transform:translateY(-2px)}
  .paper{padding:16px 14px 40px}
  .hero{min-height:88svh;padding:clamp(36px,10vh,90px) 20px 56px}
  .paper > section:not(.hero){scroll-margin-top:120px}
}

@media (max-width:760px){
  body{font-size:17px}
  .hero h1{max-width:14ch}
  .s1{width:56vw;right:-60px;opacity:.85}
  .s2{width:34vw;right:8%}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:64px;padding:34px 16px 32px}
  .f-desc{grid-column:1/-1}
  .paper > section:not(.hero){margin-top:32px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

button[aria-expanded]{min-width:44px;min-height:44px}