@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); @import url('tokens.css'); /* 팔레트 단일 출처 — 생성 안내서·코스 챕터 전부 여기서 색을 받는다 */ :root{ --r:18px } /* 가이드/코스 전용 레이아웃 토큰 */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--txt);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word} h1,h2,h3{text-wrap:balance} /* 한글 제목 줄 길이 균형 — 미지원 브라우저는 무시 */ .serif{font-family:"Instrument Serif",serif} a{color:inherit;text-decoration:none} .wrap{max-width:1200px;margin:0 auto;padding:0 30px} .aura{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.32;mix-blend-mode:screen} .blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-240px;right:-160px;animation:d1 22s ease-in-out infinite alternate} .blob.b{width:440px;height:440px;background:radial-gradient(circle,var(--crim),transparent 60%);top:60%;left:-180px;animation:d2 26s ease-in-out infinite alternate} @keyframes d1{to{transform:translate(-50px,60px) scale(1.1)}} @keyframes d2{to{transform:translate(60px,-40px) scale(1.1)}} .grain{position:fixed;inset:0;z-index:-1;opacity:.45;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} @media (prefers-reduced-motion:reduce){.blob{animation:none}} /* 상단 읽기 진행바 */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:linear-gradient(90deg,var(--amber),var(--ember),var(--crim));box-shadow:0 0 12px var(--ember);transition:width .1s} header{position:sticky;top:0;z-index:60;padding:16px 0} .nav{display:flex;align-items:center;justify-content:space-between;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(20px);border-radius:100px;padding:10px 14px 10px 20px} .brand{display:flex;align-items:center;gap:11px} .mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--ember),var(--crim));box-shadow:0 0 20px rgba(255,90,46,.5)} .brand b{font-family:"Space Grotesk";font-weight:600;font-size:16px} .back{font-family:"Space Grotesk";font-size:13.5px;color:var(--txt-dim);transition:color .2s} .back:hover{color:var(--ember)} /* ===== 아티클 헤더 ===== */ .ahead{padding:56px 0 30px;max-width:780px;margin:0 auto} .crumb{font-family:"Space Grotesk";font-size:12.5px;color:var(--txt-faint);margin-bottom:22px} .crumb a:hover{color:var(--ember)} .lvl{display:inline-block;font-family:"Space Grotesk";font-size:11px;letter-spacing:.08em;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,179,56,.4);color:var(--amber);margin-bottom:20px} .ahead h1{font-size:clamp(34px,5vw,54px);font-weight:700;font-family:"Space Grotesk";letter-spacing:-.03em;line-height:1.08} .ahead h1 .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} .meta{display:flex;gap:22px;align-items:center;margin-top:26px;font-size:13.5px;color:var(--txt-faint);flex-wrap:wrap;font-family:"Space Grotesk"} .meta .av{display:flex;align-items:center;gap:9px} .meta .dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--crim))} .atags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px} .tg{font-size:12px;color:var(--txt-dim);background:rgba(255,255,255,.04);padding:5px 12px;border-radius:7px} .hr{height:1px;background:var(--glass-line);max-width:780px;margin:36px auto} /* ===== 본문 레이아웃 ===== */ .layout{display:grid;grid-template-columns:1fr 240px;gap:50px;max-width:1080px;margin:0 auto;padding-bottom:90px;align-items:start} .article{max-width:720px;color:var(--read);font-size:17px} .article h2{font-family:"Space Grotesk";font-size:27px;font-weight:600;color:var(--txt);margin:48px 0 16px;letter-spacing:-.01em;scroll-margin-top:90px} .article h2::before{content:"";display:inline-block;width:7px;height:22px;border-radius:3px;background:linear-gradient(var(--ember),var(--crim));margin-right:13px;vertical-align:-3px} .article h3{font-size:20px;font-weight:600;color:var(--txt);margin:32px 0 12px} .article p{margin:16px 0} .article a.link{color:var(--amber);border-bottom:1px solid rgba(255,179,56,.35)} .article ul,.article ol{margin:16px 0 16px 4px;padding-left:22px} .article li{margin:9px 0} .article li::marker{color:var(--ember)} .article strong{color:var(--txt);font-weight:600} .article code{font-family:"JetBrains Mono",monospace;font-size:.86em;background:rgba(255,90,46,.12);color:var(--amber);padding:2px 7px;border-radius:6px} /* 코드 블록 */ .codeblock{background:#0c0a0b;border:1px solid var(--glass-line);border-radius:14px;margin:24px 0;overflow:hidden} .cb-head{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border-bottom:1px solid var(--glass-line);background:rgba(255,255,255,.02)} .cb-head .lang{font-family:"Space Grotesk";font-size:11.5px;color:var(--txt-faint);letter-spacing:.06em} .cb-head .copy{font-family:"Space Grotesk";font-size:11.5px;color:var(--txt-dim);cursor:pointer;display:flex;gap:6px;align-items:center;background:none;border:0;padding:0} /* 실제