:root{--bg-base: #1e1c25;--text: #e9e8ef;--text-strong: #f3f2f7;--text-soft: #b6b5c1;--text-muted: #9a98a8;--text-faint: #8a8894;--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .16);--panel: rgba(255, 255, 255, .045);--panel-line: rgba(255, 255, 255, .1);--blue: #4285f4;--blue-hover: #1a6bf0;--link-blue: #8ab4ff;--red: #ea4335;--yellow: #fbbc05;--green: #34a853;--live-green: #34d17a;--live-text: #7fdca0;--error: #ff8b7e;--font-body: "Noto Sans KR", system-ui, sans-serif;--font-display: "Poppins", "Noto Sans KR", sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;display:flex;flex-direction:column;background:radial-gradient(1100px 560px at 50% -16%,#37324e,#37324e00 58%),radial-gradient(760px 480px at 90% 2%,#462c39,#462c3900 54%),var(--bg-base)}body.home{background:radial-gradient(1000px 560px at 50% -14%,#3b3552,#3b355200 60%),radial-gradient(720px 480px at 86% 6%,#4c2f3d,#4c2f3d00 56%),radial-gradient(640px 460px at 8% 34%,#22384a,#22384a00 58%),#211f28}main{flex:1}img{max-width:100%;height:auto;display:block}a{color:var(--link-blue)}.wrap{max-width:900px;margin:0 auto;padding:0 24px}.wordmark{font-family:Poppins,sans-serif;font-weight:800;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}.wordmark .c1{color:var(--blue)}.wordmark .c2{color:var(--red)}.wordmark .c3{color:var(--yellow)}.wordmark .c4{color:var(--green)}.util{display:inline-flex;align-items:center;gap:7px;background:#ffffff17;border:1px solid rgba(255,255,255,.15);border-radius:9999px;padding:8px 14px;font-size:13px;font-weight:600;color:#d9d8e2;cursor:pointer;text-decoration:none;font-family:inherit;transition:background .14s ease;white-space:nowrap}.util:hover{background:#ffffff29}.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:#1e1c25e6;backdrop-filter:blur(10px)}.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px}.site-header .wordmark{font-size:19px}.site-header .tools{display:flex;align-items:center;gap:10px}.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--live-text)}.live .dot{width:7px;height:7px;border-radius:50%;background:var(--live-green);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:16px}.ghead{display:inline-flex;align-items:center;gap:8px;background:#2b2935;border:1px solid var(--panel-line);color:var(--text-strong);font-weight:800;font-size:13.5px;border-radius:9999px;padding:8px 15px}.ghead .n{color:var(--text-faint);font-weight:700;font-size:11.5px}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:14px 16px 14px 18px;transition:background .14s ease,border-color .14s ease}.row:hover{background:#ffffff14;border-color:#fff3}.row .name{font-size:15px;font-weight:700;color:var(--link-blue);min-width:0}.row .btns{display:flex;gap:8px;flex:none}.pbtn{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:9px 15px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent}.pbtn-open{background:var(--blue);color:#fff}.pbtn-open:hover{background:var(--blue-hover)}.pbtn-copy{background:#ffffff14;color:#d9d8e2;border-color:var(--line-strong)}.pbtn-copy:hover{background:#ffffff29}.chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar{display:none}.chip{border:1px solid var(--line-strong);background:#ffffff0d;color:#c7c6d2;border-radius:9999px;padding:9px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .14s ease;white-space:nowrap;text-decoration:none;flex:none}.chip:hover{background:#4285f42e;border-color:#5a9dff66;color:#fff}.chip[data-on="1"]{background:var(--blue);border-color:var(--blue);color:#fff}.subbar{position:sticky;top:60px;z-index:15;background:#1e1c25eb;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}.ptag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:9999px;padding:3px 10px;letter-spacing:.02em}.ptag-blue{background:#5a9dff29;color:var(--link-blue)}.ptag-teal{background:#00c4c429;color:#4fd6d6}.ptag-red{background:#ea433529;color:var(--error)}.ptag-green{background:#34d17a29;color:#5fdc98}.ptag-purple{background:#8e5cf729;color:#b79aff}.ptag-amber{background:#f5a62329;color:#f5b544}.ptag-gray{background:#ffffff17;color:#b9b8c4}.codegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.codecard{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:16px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.codecard:hover{transform:translateY(-2px);border-color:#ffffff38;box-shadow:0 12px 26px #0006}.codebox{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#00000047;border:1px dashed rgba(255,255,255,.22);border-radius:11px;padding:10px 8px 10px 14px}.codetxt{font-family:var(--font-mono);font-weight:800;font-size:16px;letter-spacing:.05em;color:var(--text-strong);word-break:break-all}.codetxt.is-name{font-family:var(--font-display);font-size:14px;letter-spacing:0}.copybtn{display:inline-flex;align-items:center;gap:5px;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;flex:none}.copybtn:hover{background:var(--blue-hover)}.codecond{font-size:12px;color:var(--text-muted)}.sec{scroll-margin-top:130px}.sec-h2{font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;color:var(--text-strong)}.sec-sub{font-size:13.5px;color:var(--text-muted);margin:0 0 20px}.acc{border-top:1px solid rgba(255,255,255,.09)}.acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 4px;font-size:15px;font-weight:700;color:var(--text-strong)}.acc summary::-webkit-details-marker{display:none}.acc summary .chev{transition:transform .2s ease;color:var(--text-faint);flex:none}.acc[open] summary .chev{transform:rotate(90deg)}.acc p{margin:0 4px 17px;font-size:13.5px;color:#a9a7b6;line-height:1.65;max-width:74ch}.acc img{margin:0 4px 17px;border-radius:10px}.steps{border-top:2px solid rgba(255,255,255,.14)}.step{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.stepn{font-family:Poppins,sans-serif;font-weight:800;font-size:18px;min-width:24px}.stepn.n1{color:var(--blue)}.stepn.n2{color:var(--red)}.stepn.n3{color:var(--yellow)}.stepn.n4{color:var(--green)}.stepn.n5{color:#b79aff}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%);background:#fff;color:#202124;font-weight:800;font-size:13px;padding:11px 20px;border-radius:9999px;box-shadow:0 12px 34px #00000080;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:70}.toast[data-show="1"]{opacity:1}.cta{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:9999px;padding:14px 26px;font-size:15px;font-weight:700;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .16s ease}.cta:hover{background:var(--blue-hover)}.site-footer{border-top:1px solid var(--line);width:100%;margin-top:48px}.site-footer .inner{max-width:1120px;margin:0 auto;padding:18px 24px;text-align:center;font-size:12px;color:var(--text-faint)}.site-footer a{color:#b6b5c1;text-decoration:none}.site-footer a:hover{color:#fff}.site-footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-bottom:8px}@media(max-width:640px){.wrap{padding:0 16px}.codegrid{grid-template-columns:1fr}.row{border-radius:13px;padding:13px 12px 13px 15px;gap:10px}.row .name{font-size:14px}.pbtn{padding:8px 12px;font-size:12px}.sec-h2{font-size:20px}}@media(min-width:641px)and (max-width:820px){.codegrid{grid-template-columns:repeat(2,1fr)}}