:root{--color-logo-blue:#0d6bfe;--color-primary:#3478f6;--color-primary-deep:#2563eb;--color-band:#2563eb;--color-band-text:#1e4fd8;--color-tint:#edf3ff;--color-ink:#111;--color-text-strong:#333;--color-text:#5f5f5f;--color-muted:#6b6b6b;--color-line:#e3e7ef;--color-surface:#f3f5f9;--color-white:#fff;--color-logo-ink:#111319;--color-text-nav:#4a4a4a;--color-text-sub:#6b6b6b;--color-line-card:#dce5f7;--color-line-btn:#d3def3;--color-line-input:#d5dbe7;--color-line-check:#b9c2d3;--color-placeholder:#6b6b6b;--color-dot-off:#8a8a8a;--color-primary-tint:#edf3ff;--color-hero-badge-text:#2563eb;--color-disabled-bg:#e3e7ef;--color-disabled-text:#6b6b6b;--color-error:#b42318;--color-error-bg:#fef3f2;--color-success:#067647;--color-text-body:var(--color-text-strong);--color-code-bg:#0d1117;--color-code-text:#c9d4e3;--gradient-page-hero:linear-gradient(180deg, #fff 0%, #f8faff 50%, #eef3ff 100%);--gradient-page-body:linear-gradient(180deg, #eef3ff 0px, #f8faff 260px, #fff 560px);--font-sans:"Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-hero:clamp(36px, 9.4vw, 72px);--text-page-title:clamp(34px, 8.6vw, 60px);--text-band-title:clamp(30px, 7.8vw, 52px);--text-section-title:clamp(29px, 7.4vw, 46px);--text-post-row-home:clamp(19px, 5vw, 24px);--text-post-title:clamp(30px, 7.8vw, 52px);--text-article-h2:clamp(23px, 6vw, 30px);--text-article-h3:clamp(19px, 5vw, 23px);--text-article:clamp(16.5px, 4.3vw, 18px);--text-post-row:clamp(20px, 5.4vw, 26px);--text-code:14.5px;--text-code-inline:15px;--text-lead:clamp(17px, 4.4vw, 20px);--text-section-lead:clamp(16px, 4.2vw, 18px);--text-label:13px;--text-small:14px;--text-body:17px;--container-max:1200px;--container-article:800px;--gutter:120px;--header-height:72px;--section-gap-xl:clamp(72px, 10vw, 144px);--section-gap-lg:clamp(60px, 8.33vw, 120px);--section-gap-md:56px;--hero-pad-top-home:clamp(64px, 8.89vw, 128px);--hero-pad-top-sub:clamp(56px, 7.78vw, 112px);--grid-gap:24px;--card-gap:24px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--touch-min:44px;--radius-button:8px;--radius-input:10px;--radius-card:24px;--radius-form:20px;--radius-media:20px;--radius-panel:16px;--radius-small:14px;--radius-check:6px;--radius-pill:999px;--shadow-card:0 18px 44px #3478f621, 0 2px 6px #3478f60f;--shadow-summary:0 10px 28px #3478f614;--shadow-form:0 18px 44px #3478f61a, 0 2px 6px #3478f60d;--shadow-float:0 12px 32px #1e4fd81f, 0 2px 6px #1e4fd80f;--shadow-menu:0 16px 40px #1e4fd824;--focus-ring:0 0 0 3px #3478f62e;--focus-ring-strong:0 0 0 3px #3478f640;--focus-outline:3px solid var(--color-primary-deep);--transition:.18s ease}@media (max-width:1100px){:root{--gutter:48px}}@media (max-width:640px){:root{--gutter:20px}}
@font-face{font-family:Pretendard;src:url(/fonts/Pretendard-Variable.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--space-4))}body{font-family:var(--font-sans);font-size:var(--text-body);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;color:var(--color-text-strong);background:var(--color-white);-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}ul{list-style:none}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button,input,textarea{font:inherit;letter-spacing:inherit;color:inherit}:focus-visible{outline:var(--focus-outline);outline-offset:2px}.container{width:min(100% - 2 * var(--gutter), var(--container-max));margin:0 auto}.srOnly{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skipLink{left:var(--space-4);z-index:100;padding:var(--space-3) var(--space-4);background:var(--color-ink);color:var(--color-white);border-radius:var(--radius-button);position:absolute;top:-100px}.skipLink:focus{top:var(--space-2)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}