:root{--color-primary: #3d6bff;--color-primary-hover: #2c54d9;--color-secondary: #ffb020;--color-accent: #2fbf71;--color-accent-warn: #ff6b6b;--color-bg: #ffffff;--color-bg-soft: #f5f7fb;--color-bg-footer: #edeff5;--color-text-heading: #1f2430;--color-text-body: #4a4f5c;--color-text-muted: #8a8f9c;--color-border: #e2e5ed;--font-family-base: Pretendard, "Noto Sans KR", sans-serif;--font-display: Pretendard, "Noto Sans KR", sans-serif;--font-code: D2Coding, "JetBrains Mono", monospace;--text-h1: 2.25rem;--text-h2: 1.75rem;--text-h3: 1.25rem;--text-body: 1rem;--text-caption: .875rem;--text-code: .9rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--color-text-body);background:var(--color-bg);font-family:var(--font-family-base);font-size:var(--text-body);line-height:1.7}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--color-secondary);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--color-text-heading);font-family:var(--font-display);line-height:1.3}h1{margin-bottom:1.25rem;font-size:clamp(2rem,5vw,var(--text-h1))}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}.container{width:min(1120px,calc(100% - 2rem));margin-inline:auto}.narrow-container{max-width:880px}.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100;padding:.65rem 1rem;color:#fff;background:var(--color-primary);border-radius:.5rem;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{position:sticky;top:0;z-index:20;background:#fffffff5;border-bottom:1px solid var(--color-border)}.header-inner{display:flex;min-height:4.5rem;align-items:center;justify-content:space-between;gap:1.5rem}.brand{display:inline-flex;min-height:44px;align-items:center;gap:.55rem;color:var(--color-text-heading);font-weight:700}.primary-navigation,.primary-navigation ul{display:flex;align-items:center}.primary-navigation{gap:1rem}.primary-navigation ul{margin:0;padding:0;gap:.15rem;list-style:none}.nav-link{display:inline-flex;min-height:44px;align-items:center;padding:.5rem .7rem;border-radius:.5rem;font-size:.94rem;font-weight:600}.nav-link:hover,.nav-link.active{color:var(--color-primary);background:var(--color-bg-soft)}.menu-toggle{display:none;width:44px;height:44px;padding:.65rem;background:transparent;border:1px solid var(--color-border);border-radius:.5rem}.menu-toggle span{display:block;height:2px;margin:4px 0;background:var(--color-text-heading)}.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:.7rem 1.15rem;gap:.35rem;border:2px solid transparent;border-radius:.75rem;font:inherit;font-weight:700;line-height:1.2;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.button-primary{color:#fff;background:var(--color-primary)}.button-primary:hover{background:var(--color-primary-hover)}.button-secondary{color:var(--color-primary);background:#fff;border-color:var(--color-primary)}.button-secondary:hover{color:#fff;background:var(--color-primary)}.hero{padding:7rem 0;text-align:center;background:var(--color-bg-soft)}.hero-content{max-width:850px}.hero h1{font-size:clamp(2.15rem,5.5vw,3.4rem)}.hero p:not(.eyebrow){margin-bottom:2rem;font-size:1.1rem}.eyebrow{margin-bottom:.6rem;color:var(--color-primary);font-size:var(--text-caption);font-weight:800;letter-spacing:.04em}.button-group{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}.section,.page-section{padding:5rem 0}.page-section{min-height:60vh}.soft-section{background:var(--color-bg-soft)}.section-heading{margin-bottom:2rem}.section-heading h2{margin-bottom:0}.heading-with-link{display:flex;align-items:end;justify-content:space-between;gap:1rem}.card-grid{display:grid;gap:1.25rem}.three-columns{grid-template-columns:repeat(3,1fr)}.four-columns{grid-template-columns:repeat(4,1fr)}.track-grid{grid-template-columns:repeat(2,1fr)}.card{padding:1.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:1rem;box-shadow:0 8px 24px #1f24300d}.card h2,.card h3{margin-bottom:.65rem}.card p{margin-bottom:1rem}.card-icon{display:block;margin-bottom:1rem;font-size:2rem}.track-card .button{margin-top:.5rem}.badge{display:inline-flex;min-height:1.8rem;align-items:center;margin-bottom:1rem;padding:.15rem .65rem;color:#11653b;background:#dbf6e7;border-radius:999px;font-size:var(--text-caption);font-weight:700}.badge-secondary{color:#704600;background:#fff0c9}.badge-warn{color:#8a2323;background:#ffe1e1}.progress-list{display:grid;margin:0;padding:0;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none}.progress-list li{display:flex;align-items:center;gap:.75rem;color:var(--color-text-heading);font-weight:700}.progress-list span,.step-number{display:inline-flex;width:2.25rem;height:2.25rem;flex:0 0 auto;align-items:center;justify-content:center;color:#fff;background:var(--color-primary);border-radius:50%;font-weight:800}.thumbnail-placeholder{display:grid;min-height:9rem;margin:-.5rem -.5rem 1.25rem;place-items:center;color:var(--color-text-body);background:var(--color-bg-soft);border:1px dashed var(--color-border);border-radius:.75rem;font-size:var(--text-caption)}.resource-card .button{width:100%}.text-link{display:inline-flex;min-height:44px;align-items:center;color:var(--color-primary);font-weight:700}.text-link:hover{text-decoration:underline;text-underline-offset:.2em}.faq-list{border-top:1px solid var(--color-border)}.faq-list details{border-bottom:1px solid var(--color-border)}.faq-list summary{min-height:44px;padding:1.1rem 0;color:var(--color-text-heading);cursor:pointer;font-weight:700}.faq-list details p{padding-bottom:1rem}.page-description{max-width:720px;margin-bottom:2.5rem;font-size:1.1rem}.page-link-grid{grid-template-columns:repeat(3,1fr)}.page-link-grid.is-four-up,.page-link-grid.is-five-up,.page-link-grid.is-six-up{grid-template-columns:repeat(2,1fr)}.page-link-grid.is-five-up .card:last-child{grid-column:1 / -1}.page-link-grid .step-number{margin-bottom:1rem}.card-example{padding:.8rem .9rem;color:var(--color-text-heading);background:var(--color-bg-soft);border-radius:.75rem;font-size:var(--text-caption)}.card-example strong{display:block;margin-bottom:.2rem;color:var(--color-primary)}.concept-demo{margin:2.75rem 0;padding:1.5rem;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:1rem}.concept-demo-heading h2{margin-bottom:.35rem}.concept-demo-heading p{margin-bottom:1.25rem}.concept-demo-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.65rem;margin-bottom:1rem}.concept-demo-tab{display:flex;min-height:48px;align-items:center;justify-content:center;gap:.45rem;padding:.65rem;color:var(--color-text-body);background:var(--color-bg);border:1px solid var(--color-border);border-radius:.75rem;font:inherit;font-weight:700;cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease,transform .1s ease}.concept-demo-tab span{display:inline-grid;width:1.6rem;height:1.6rem;place-items:center;color:var(--color-primary);background:#edf1ff;border-radius:50%;font-size:.8rem}.concept-demo-tab:hover,.concept-demo-tab.is-active{color:var(--color-primary);border-color:var(--color-primary)}.concept-demo-tab.is-active{background:#edf1ff}.concept-demo-tab:active{transform:translateY(1px)}.concept-demo-panel{min-height:15rem;padding:1.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:.85rem}.concept-demo-status{margin-bottom:.45rem;color:var(--color-primary);font-size:var(--text-caption);font-weight:800}.concept-demo-panel h3{margin-bottom:.45rem}.concept-demo-result{margin-top:1.25rem;padding:1rem;color:var(--color-text-heading);background:var(--color-bg-soft);border-left:4px solid var(--color-primary);border-radius:0 .65rem .65rem 0}.concept-demo-result strong{display:block;margin-bottom:.3rem;font-size:var(--text-caption)}.learning-flow-figure{margin:2.75rem 0}.learning-flow-figure img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border:1px solid var(--color-border);border-radius:1rem}.learning-flow-figure figcaption{margin-top:.75rem;color:var(--color-text-body);font-size:var(--text-caption);text-align:center}.beginner-tool-list{margin:0 0 2.75rem}.beginner-tool-list div{display:grid;grid-template-columns:minmax(9rem,.75fr) 2fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--color-border)}.beginner-tool-list dt{color:var(--color-text-heading);font-weight:800}.beginner-tool-list dd{margin:0}.screenshot-figure{margin:1.5rem 0 2.75rem}.screenshot-figure img{display:block;width:100%;border:1px solid var(--color-border);border-radius:1rem}.screenshot-figure figcaption{margin-top:.75rem;color:var(--color-text-muted);font-size:var(--text-caption);text-align:center}.learning-photo-block{display:grid;grid-template-columns:1.15fr .85fr;gap:1.5rem;margin:2.75rem 0;align-items:center}.learning-photo-block img{display:block;width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:1rem}.learning-photo-block h2{margin-bottom:.75rem}.site-example-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.5rem;margin-bottom:2.75rem}.site-example-list details{padding:1.25rem 0;border-top:1px solid var(--color-border)}.site-example-list summary{color:var(--color-text-heading);font-weight:800;cursor:pointer}.site-example-list p{margin:.6rem 0 0}.example-prompt{padding:.8rem .9rem;background:var(--color-bg-soft);border-radius:.75rem}.example-prompt strong{display:block;margin-bottom:.2rem;color:var(--color-primary);font-size:var(--text-caption)}.lotto-lab{margin:2.75rem 0;padding:1.5rem;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:1rem}.lotto-lab-heading h2{margin-bottom:.35rem}.lotto-lab-heading p{margin-bottom:1.25rem}.lotto-balls{display:flex;min-height:4rem;align-items:center;flex-wrap:wrap;gap:.65rem}.lotto-ball{display:inline-grid;width:3rem;height:3rem;place-items:center;color:#fff;background:var(--color-primary);border-radius:50%;font-weight:800}.lotto-empty{margin-bottom:0;color:var(--color-text-muted)}.deploy-check:active{transform:translateY(1px)}.lotto-static-preview{padding:1.5rem;text-align:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:.85rem}.lotto-preview-label{margin-bottom:.4rem;color:var(--color-primary);font-size:var(--text-caption);font-weight:800}.lotto-static-preview h3{margin-bottom:.35rem}.lotto-static-preview .lotto-balls{margin:1.25rem 0;justify-content:center}.lotto-preview-button{display:inline-flex;min-height:44px;padding:.7rem 1.15rem;align-items:center;justify-content:center;color:#fff;background:var(--color-primary);border-radius:.75rem;font-weight:700}.lotto-preview-note{margin:.75rem 0 0;color:var(--color-text-muted);font-size:var(--text-caption)}.lotto-actions{display:flex;margin-top:1rem;flex-wrap:wrap;gap:.75rem}.lotto-request,.lotto-response{padding:.85rem 1rem;color:var(--color-text-heading);background:var(--color-bg);border:1px solid var(--color-border);border-radius:.75rem;font-family:var(--font-code);font-size:var(--text-caption)}.lotto-request{margin-bottom:1rem}.lotto-request strong{margin-right:.75rem;color:var(--color-primary);font-family:var(--font-family-base)}.lotto-response{margin:1rem 0 0;overflow-wrap:anywhere}.lotto-saved{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border)}.lotto-saved h3{margin-bottom:.75rem}.lotto-saved ul{margin:0;padding:0;list-style:none}.lotto-saved li{display:grid;padding:.9rem 0;align-items:center;grid-template-columns:5rem 1fr auto;gap:1rem;border-bottom:1px solid var(--color-border)}.lotto-saved li>span{color:var(--color-text-heading);font-weight:700}.lotto-saved li .lotto-ball{width:2.25rem;height:2.25rem;font-size:var(--text-caption)}.lotto-saved li button{min-height:44px;padding:.5rem .8rem;color:#8a2323;background:#fff1f1;border:1px solid #efb8b8;border-radius:.65rem;font:inherit;font-weight:700;cursor:pointer}.deploy-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.deploy-check{display:flex;min-height:72px;padding:.8rem;align-items:center;gap:.65rem;color:var(--color-text-heading);background:var(--color-bg);border:1px solid var(--color-border);border-radius:.75rem;font:inherit;font-weight:700;cursor:pointer}.deploy-check span{color:var(--color-primary);font-size:var(--text-caption)}.deploy-check.is-complete{color:var(--color-primary);background:#edf1ff;border-color:var(--color-primary)}.deploy-result{margin-top:1rem;padding:1rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:.75rem}.deploy-result.is-ready{border-color:var(--color-primary)}.deploy-result strong{color:var(--color-text-heading)}.deploy-result p{margin:.3rem 0 0;overflow-wrap:anywhere}.checklist{margin:0 0 2rem;padding:0;list-style:none}.checklist li{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;font-weight:600;color:var(--color-text-heading)}.benefit-list{display:grid;margin-bottom:2.5rem;grid-template-columns:repeat(2,1fr);gap:1rem}.benefit-item{padding:1.25rem;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:1rem}.benefit-item:nth-child(2),.benefit-item:nth-child(4){background:var(--color-bg)}.benefit-item:last-child{grid-column:1 / -1}.benefit-item h3{margin-bottom:.4rem}.benefit-item p{margin-bottom:0}.step-guide{margin:0 0 2.5rem;padding:0;list-style:none}.step-guide-item{display:flex;gap:1.25rem;padding-bottom:1.75rem;margin-left:1.125rem;padding-left:1.5rem;border-left:2px solid var(--color-border)}.step-guide-item:last-child{padding-bottom:0;border-left-color:transparent}.step-guide-item .step-number{flex:0 0 auto;margin-left:-2.375rem}.step-guide-item h3{margin-bottom:.4rem}.step-guide-item p{margin-bottom:0}.code-block{margin-bottom:1.5rem;overflow:hidden;background:#1f2430;border-radius:.75rem}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;color:#c7cbd6;font-size:var(--text-caption);font-weight:700;background:#ffffff0f}.code-copy-button{min-height:32px;padding:.2rem .75rem;color:#fff;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:.4rem;font:inherit;font-size:var(--text-caption);font-weight:700}.code-copy-button:hover{background:#ffffff38}.code-block pre{margin:0;padding:1rem;overflow-x:auto;color:#eef0f6;font-family:var(--font-code);font-size:var(--text-code);line-height:1.6}.stacked-code-blocks .code-block:last-child{margin-bottom:0}.callout{display:flex;gap:.85rem;padding:1.1rem 1.25rem;margin-bottom:2rem;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:.85rem}.callout-warning{background:#fff5f0;border-color:#ffd9c2}.callout-icon{font-size:1.35rem}.callout-title{margin-bottom:.3rem;color:var(--color-text-heading);font-weight:800}.callout p:last-child{margin-bottom:0}.form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.4rem;color:var(--color-text-heading);font-weight:700}.form-input{width:100%;min-height:44px;padding:.7rem 1rem;color:var(--color-text-body);font:inherit;background:#fff;border:1px solid var(--color-border);border-radius:.65rem}.form-error{margin-bottom:1rem;color:var(--color-accent-warn);font-weight:700}.tool-inline-form{display:flex;gap:.75rem;margin-top:1rem}.tool-inline-form .form-input{max-width:16rem}.tool-grader-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.tool-grader-row .form-input:first-child{max-width:10rem}.tool-grader-score{flex:0 0 auto;min-width:4rem;color:var(--color-text-heading);font-weight:800;text-align:center}.tool-number-input{max-width:6rem}.tool-remove-button{flex:0 0 auto;width:40px;min-height:40px;color:#8a2323;background:#fff1f1;border:1px solid #efb8b8;border-radius:.5rem;font:inherit;font-weight:700;cursor:pointer}.tool-group-grid{margin-top:1.25rem}.tool-recipe{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--color-border)}.tool-recipe summary{min-height:44px;color:var(--color-primary);font-weight:700;cursor:pointer}.tool-recipe .code-block{margin:.75rem 0}.tool-recipe .code-block:last-child{margin-bottom:0}.tool-recipe .example-prompt{margin-top:.75rem}.tool-table-wrap{margin-top:1.25rem;overflow-x:auto}.tool-table{width:100%;background:var(--color-bg);border-collapse:collapse}.tool-table th,.tool-table td{min-width:4.5rem;padding:.6rem .5rem;border:1px solid var(--color-border);text-align:center}.tool-table th{color:var(--color-text-heading);background:var(--color-bg-soft)}.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2.5rem}.compare-card p:first-of-type{color:var(--color-text-heading);font-size:1.05rem;font-weight:600}.compare-note{margin-bottom:0;color:var(--color-text-muted);font-size:var(--text-caption)}.page-pagination{display:flex;justify-content:space-between;gap:1rem;padding-top:2rem;margin-top:1rem;border-top:1px solid var(--color-border)}.recipe-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.recipe-card summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;cursor:pointer;list-style:none}.recipe-card summary::-webkit-details-marker{display:none}.recipe-summary-text h3{margin-bottom:.3rem}.recipe-summary-text p{margin-bottom:0;color:var(--color-text-muted)}.recipe-meta{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:.4rem}.recipe-meta .badge{margin-bottom:0}.recipe-time{color:var(--color-text-muted);font-size:var(--text-caption);font-weight:700}.recipe-detail{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--color-border)}.worksheet-list{padding:0;margin:0;list-style:none;border-top:1px solid var(--color-border)}.worksheet-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--color-border)}.worksheet-list h3{margin-bottom:.4rem}.worksheet-list .badge{margin-right:.6rem;margin-bottom:0}.faq-search{width:100%;min-height:44px;padding:.7rem 1rem;margin-bottom:1rem;color:var(--color-text-body);font:inherit;background:#fff;border:1px solid var(--color-border);border-radius:.65rem}.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.filter-chip{min-height:40px;padding:.4rem .9rem;color:var(--color-text-body);font:inherit;font-size:var(--text-caption);font-weight:700;background:#fff;border:1px solid var(--color-border);border-radius:999px}.filter-chip.active{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}.faq-empty{color:var(--color-text-muted)}.empty-state{flex-direction:column;min-height:12rem;gap:.35rem}.empty-state p{margin:0}.site-footer{padding-top:3.5rem;background:var(--color-bg-footer)}.footer-grid{display:grid;padding-bottom:2.5rem;grid-template-columns:2fr 1fr 1fr;gap:3rem}.footer-brand{margin-bottom:.75rem}.site-footer h2{margin-bottom:.75rem;font-size:1rem}.site-footer ul{margin:0;padding:0;list-style:none}.site-footer li+li{margin-top:.35rem}.site-footer a:not(.brand):hover{color:var(--color-primary);text-decoration:underline}.footer-note{padding:1.25rem 0;border-top:1px solid #d8dbe4;font-size:var(--text-caption)}@media(max-width:1024px){.header-inner{gap:.75rem}.nav-link{padding-inline:.45rem;font-size:.86rem}.header-cta{display:none}.three-columns,.four-columns,.page-link-grid,.progress-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.header-inner{min-height:4rem}.brand{font-size:.95rem}.menu-toggle{display:block}.primary-navigation{position:fixed;inset:4rem 0 0;display:none;padding:1.25rem 1rem 2rem;align-items:stretch;flex-direction:column;background:var(--color-bg);overflow-y:auto}.primary-navigation.is-open,.primary-navigation ul{display:flex}.primary-navigation ul{align-items:stretch;flex-direction:column}.nav-link{width:100%;min-height:52px;padding-inline:1rem;font-size:1rem}.header-cta{display:inline-flex;margin-top:.5rem}.hero{padding:5rem 0}.hero h1 br{display:none}.section,.page-section{padding:3.75rem 0}.three-columns,.four-columns,.track-grid,.page-link-grid,.progress-list,.footer-grid,.compare-grid{grid-template-columns:1fr}.page-link-grid.is-five-up .card:last-child{grid-column:auto}.concept-demo-tabs,.site-example-list,.beginner-tool-list div,.learning-photo-block,.benefit-list{grid-template-columns:1fr}.benefit-item:last-child{grid-column:auto}.lotto-saved li{align-items:flex-start;grid-template-columns:1fr}.deploy-checks{grid-template-columns:1fr}.concept-demo-panel{min-height:0}.heading-with-link{align-items:start;flex-direction:column}.button-group,.button-group .button{width:100%}.footer-grid{gap:1.75rem}.page-pagination{flex-direction:column}.page-pagination .button{width:100%}.recipe-card summary{flex-direction:column;align-items:flex-start}.recipe-meta{align-items:flex-start;flex-direction:row}.worksheet-list li{flex-direction:column;align-items:flex-start}}