/* 소개 페이지 — tokens.css·hub.css 위에 얹는다. 표면은 전부 유리(var(--glass)):
 * 배경 오로라가 카드 뒤로 비쳐야 다른 허브와 같은 인상이 된다(hub-background.test.js가 고정). */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:.32;mix-blend-mode:screen}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-220px;left:-140px;animation:intro1 21s ease-in-out infinite alternate}
.blob.b{width:460px;height:460px;background:radial-gradient(circle,var(--crim),transparent 60%);top:46%;right:-180px;animation:intro2 25s ease-in-out infinite alternate}
@keyframes intro1{to{transform:translate(70px,60px) scale(1.1)}}
@keyframes intro2{to{transform:translate(-60px,-40px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}

.intro-main{padding-bottom:96px}

/* 히어로 */
.intro-hero{padding:84px 0 8px;max-width:720px}
.intro-kicker{font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.12em;color:var(--ember)}
.intro-hero h1{margin:14px 0 0;font-size:clamp(32px,5.2vw,52px);line-height:1.18;letter-spacing:-.02em;font-weight:700}
.intro-hero h1 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;padding-right:.08em;
  background:linear-gradient(100deg,var(--amber),var(--ember) 55%,var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-lede{margin:26px 0 0;font-size:16.5px;line-height:1.85;color:var(--read)}

/* 본문 절 */
.intro-block{margin-top:72px;max-width:860px}
.intro-block h2{font-size:23px;letter-spacing:-.01em;margin-bottom:14px}
.intro-block>p{font-size:14.5px;line-height:1.85;color:var(--read)}
.intro-block>p b{color:var(--txt);font-weight:600}
.intro-block a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

/* 수록 현황 */
.intro-stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 0;padding:0}
.intro-stats li{padding:20px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);text-align:center}
.intro-stats b{display:block;font-family:"Space Grotesk",sans-serif;font-size:30px;font-weight:600;line-height:1.1;
  background:linear-gradient(180deg,var(--txt),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-stats span{display:block;margin-top:7px;font-size:11.5px;color:var(--txt-faint);letter-spacing:.02em}

/* 만든 사람 */
.intro-maker{margin-top:72px;max-width:860px;padding:26px 28px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px)}
.intro-maker h2{font-size:20px;margin-bottom:16px}
.intro-maker dl{display:grid;gap:10px;margin:0}
.intro-maker dl>div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:baseline}
.intro-maker dt{font-size:12px;color:var(--txt-faint);letter-spacing:.02em}
.intro-maker dd{margin:0;font-size:14.5px;line-height:1.7;color:var(--txt);overflow-wrap:anywhere}
.intro-mail{display:block;margin-top:2px;font-size:13.5px}
.intro-maker dd a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.intro-maker-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--glass-line);font-size:12.5px;line-height:1.75;color:var(--txt-faint)}

@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .path{padding:40px 26px;border-radius:22px}
  .path-heading{flex-direction:column;align-items:flex-start;gap:20px}
  .content-viz{display:none}
  .intro-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-hero{padding-top:52px}
  .intro-maker dl>div{grid-template-columns:1fr;gap:2px}
}

/* 주요 컨텐츠 안내 — 2026-09-16 홈(index.html)에서 이관 */
/* ===== 주요 콘텐츠 안내 ===== */
.path{
  margin-top:72px;border-radius:30px;padding:60px 50px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,90,46,.12),rgba(224,36,90,.06)),var(--bg-2);
  border:1px solid var(--glass-line);
}
.path h2{font-size:clamp(30px,4vw,44px);font-weight:700;font-family:"Space Grotesk";letter-spacing:-.02em}
.path h2 .it{font-family:"Instrument Serif";font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.16em}
.path-heading{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:44px}
.path .ps{color:var(--txt-dim);margin:14px 0 0;max-width:520px;font-size:15px}
.content-viz{width:250px;height:156px;flex:none;pointer-events:none}
.content-viz .cv-ring{stroke:rgba(255,179,56,.12);stroke-dasharray:2 6}
.content-viz .cv-wire{stroke:rgba(255,122,69,.25);stroke-width:1.2}
.content-viz .cv-signal{stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:12 88;animation:content-flow 6s linear infinite;filter:drop-shadow(0 0 4px rgba(255,179,56,.7))}
.content-viz .cv-signal:nth-child(2){animation-delay:-2s;stroke:var(--ember)}
.content-viz .cv-signal:nth-child(3){animation-delay:-4s;stroke:var(--crim)}
.content-viz .cv-node{fill:#201310;stroke:rgba(255,122,69,.55)}
.content-viz .cv-icon{stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.content-viz .cv-core{fill:#30180f;stroke:var(--ember);stroke-width:1.5}
.content-viz .cv-halo{fill:rgba(255,90,46,.04);stroke:rgba(255,122,69,.16);transform-origin:125px 82px;animation:content-halo 6s ease-in-out infinite}
@keyframes content-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes content-halo{50%{transform:scale(1.12);opacity:.4}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.path .step{position:relative;isolation:isolate;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:26px;backdrop-filter:blur(10px);transition:transform .3s,border-color .3s,box-shadow .3s,opacity .6s;transition-delay:0s}
.path .step::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 0,rgba(255,179,56,.18),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.path .step:hover,.path .step:focus-within{transform:translateY(-8px);border-color:rgba(255,179,56,.65);box-shadow:0 18px 36px -18px rgba(255,90,46,.45),inset 0 1px rgba(255,179,56,.2)}
.path .step:hover::before,.path .step:focus-within::before{opacity:1}
.path .step:hover .n,.path .step:focus-within .n{color:var(--amber);opacity:1;text-shadow:0 0 22px rgba(255,179,56,.4)}
.step .lv{font-family:"Space Grotesk";font-size:12px;color:var(--ember);letter-spacing:.08em;display:inline-flex;align-items:center;gap:7px}
.step .lv svg{width:14px;height:14px}
.step h4{font-size:19px;font-weight:600;margin:10px 0 9px;word-break:keep-all}
.step p{font-size:13.5px;color:var(--txt-dim)}
.step-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:13px;font-weight:600;color:var(--ember)}
.step-links a{padding:5px 0;text-underline-offset:4px}
.step-links a:hover{text-decoration:underline}
.step-links a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.step .n{font-family:"Instrument Serif";font-size:40px;color:var(--txt-faint);float:right;line-height:1;opacity:.6;transition:color .3s,opacity .3s,text-shadow .3s}
@media(max-width:760px){.content-viz{display:none}}
@media(prefers-reduced-motion:reduce){.content-viz *{animation:none!important}.path .step,.path .step::before,.step .n{transition:none}.path .step:hover,.path .step:focus-within{transform:none}}