:root{--tiger-500:#f2a81d;--tiger-600:#d48a06;--tiger-700:#965a00;--tiger-100:#ffe9b8;--tiger-50:#fff6e2;--bear-900:#2b201e;--bear-600:#6b5b55;--muzzle-300:#d9b990;--cream-50:#fbf7f1;--info-600:#2f6fe4;--good-600:#16803c;--good-50:#e8f6ec;--bad-600:#c8343b;--bad-50:#fdeeee;--fg:var(--bear-900);--muted:var(--bear-600);--line:#ede6dc;--bg:#fff;--soft:var(--cream-50);--accent:var(--tiger-700);--accent-soft:var(--tiger-100);--radius:24px;--radius-md:16px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--control-h:56px;--ease:cubic-bezier(.2, .8, .2, 1);--shadow-float:0 8px 24px #2b201e1f;--font:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6}h1,h2,h3{letter-spacing:-.02em}a{color:var(--info-600)}.wrap{width:100%;max-width:1120px;padding:0 var(--space-5);margin:0 auto}.skip{position:absolute;left:-9999px}.skip:focus{background:var(--fg);color:#fff;z-index:10;border-radius:8px;padding:6px 10px;top:8px;left:16px}:focus-visible{outline:3px solid var(--info-600);outline-offset:2px}.site-header{z-index:5;border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.4)blur(10px);backdrop-filter:saturate(1.4)blur(10px);background:#ffffffeb;position:sticky;top:0}.header-row{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:56px;display:flex}.brand{align-items:center;gap:var(--space-2);min-height:44px;color:var(--fg);white-space:nowrap;font-size:1.06rem;font-weight:800;text-decoration:none;display:inline-flex}.brand img{width:32px;height:32px}.site-header nav{scrollbar-width:none;gap:2px;display:flex;overflow-x:auto}.site-header nav a{border-radius:var(--radius-pill);min-height:44px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 10px;font-size:.94rem;font-weight:600;text-decoration:none;display:inline-flex}.site-header nav a:hover{background:var(--cream-50);color:var(--fg)}main{padding-top:var(--space-5);padding-bottom:var(--space-10)}main.main-normal>*{max-width:880px;margin-left:auto;margin-right:auto}main.main-normal>.prose,main.main-wide>.prose{max-width:720px;margin-left:auto;margin-right:auto}.hero{justify-content:space-between;align-items:flex-end;gap:var(--space-3);margin:var(--space-2) 0 var(--space-4);display:flex}.hero-text{min-width:0}.hero-chip{border-radius:var(--radius-pill);background:var(--cream-50);min-height:30px;color:var(--muted);align-items:center;gap:6px;padding:0 12px;font-size:.82rem;font-weight:600;display:inline-flex}.hero h1{margin:var(--space-3) 0 var(--space-1);font-size:clamp(1.6rem,6.4vw,2rem);font-weight:800;line-height:1.25}.hero p{color:var(--muted);margin:0;font-size:1rem}.hero .mascot{flex:none;margin-bottom:-6px}.card{background:var(--cream-50);border-radius:var(--radius);padding:var(--space-5)}.result{background:var(--tiger-50);border-radius:var(--radius);padding:var(--space-2) var(--space-5) var(--space-5);text-align:center;animation:pop .32s var(--ease)}.result .mascot{margin:-4px auto 0}.big-number{letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 0;font-size:clamp(2.5rem,12vw,3rem);font-weight:800;line-height:1.1}.big-number small{margin-left:2px;font-size:.58em}.stat{background:var(--cream-50);border-radius:var(--radius-md);padding:14px 16px}.stat>span{color:var(--muted);font-size:.82rem;font-weight:600;display:block}.stat>strong,.stat>b{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:800}.chip{border-radius:var(--radius-pill);border:2px solid var(--line);background:var(--bg);min-height:44px;color:var(--fg);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:.94rem;font-weight:700;text-decoration:none;display:inline-flex}.chip[aria-pressed=true],.chip.is-on{background:var(--tiger-100);border-color:var(--tiger-500)}.notice{align-items:flex-end;gap:var(--space-3);margin-top:var(--space-3);display:flex}.notice .mascot{flex:none}.bubble{background:var(--bg);border:2px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:.95rem;font-weight:600}.notice.is-bad .bubble{color:var(--bad-600);border-color:#f3c9cb}.empty{text-align:center;padding:var(--space-8) var(--space-5);border:2px dashed var(--line);border-radius:var(--radius);color:var(--muted)}.empty .mascot{margin:0 auto var(--space-2)}.field{gap:6px;display:grid}.field>label,.field-label{color:var(--muted);padding-left:2px;font-size:.85rem;font-weight:700}.field-hint{color:var(--muted);margin:0;padding-left:2px;font-size:.88rem}.field-error{color:var(--bad-600);margin:0;padding-left:2px;font-size:.9rem;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{width:100%;min-height:var(--control-h);border-radius:var(--radius-md);border:2px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-variant-numeric:tabular-nums;padding:0 16px;font-size:1.06rem;font-weight:600;transition:border-color .15s,box-shadow .15s}textarea{padding:14px 16px;font-weight:500;line-height:1.6}input::placeholder,textarea::placeholder{color:#a99b92;font-weight:500}input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{border-color:var(--tiger-500);box-shadow:0 0 0 4px var(--tiger-100);outline:none}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad-600)}input[aria-invalid=true]:focus{box-shadow:0 0 0 4px var(--bad-50)}.btn{border-radius:var(--radius-md);min-height:48px;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-bottom-width:4px;justify-content:center;align-items:center;gap:6px;padding:0 20px;font-size:1rem;font-weight:800;text-decoration:none;transition:transform 80ms,border-bottom-width 80ms,background .15s;display:inline-flex}.btn:active:not(:disabled){border-bottom-width:2px;transform:translateY(2px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--tiger-500);border-color:var(--tiger-500);border-bottom-color:var(--tiger-600);color:var(--bear-900)}.btn-primary:hover:not(:disabled){background:#f5b334}.btn-ghost{background:var(--bg);border-color:var(--line);color:var(--fg)}.btn-ghost:hover:not(:disabled){background:var(--cream-50)}.btn-lg{min-height:var(--control-h);padding:0 28px;font-size:1.06rem}.btn-sm{min-height:44px;padding:0 14px;font-size:.92rem}.btn-block{width:100%;display:flex}.list{margin:0;padding:0;list-style:none}.list>li>a,.list>li>.list-row{justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);min-height:56px;color:var(--fg);padding:10px 2px;text-decoration:none;display:flex}.list>li>a:after{content:"›";color:var(--muzzle-300);flex:none;font-size:1.5rem;line-height:1}.list>li>a:hover{color:var(--tiger-700)}.mascot{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;height:auto;display:block}.m-pop{animation:pop .36s var(--ease) both}.m-wave{transform-origin:50% 90%;animation:.9s ease-out .2s both wave}.m-bob{animation:1.6s ease-in-out infinite bob}.m-bob-slow{animation:3s ease-in-out infinite bob}.m-shake{animation:.3s shake}.rise{animation:rise .24s var(--ease) both}@keyframes pop{0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}@keyframes wave{0%,to{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(6deg)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-4px)}50%{transform:translate(4px)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.prose{font-size:1.02rem;line-height:1.75}.prose h1{margin:var(--space-2) 0 var(--space-4);font-size:clamp(1.5rem,5.6vw,1.9rem);font-weight:800;line-height:1.3}.prose h2{margin:var(--space-8) 0 var(--space-2);font-size:1.25rem;font-weight:800}.prose h3{margin:var(--space-6) 0 6px;font-size:1.06rem}.prose ul,.prose ol{padding-left:1.3em}.prose .qa{background:var(--soft);border-radius:var(--radius-md);margin:12px 0;padding:12px 16px}.prose .qa p{margin:4px 0}.crumbs{color:var(--muted);font-size:.85rem}.crumbs a{color:var(--muted);text-decoration:none}.updated{color:var(--muted);margin-top:var(--space-8);font-size:.85rem}.steps{counter-reset:step;padding:0;list-style:none}.steps>li{counter-increment:step;background:var(--cream-50);border-radius:var(--radius-md);margin-bottom:10px;padding:14px 16px 14px 56px;position:relative}.steps>li:before{content:counter(step);background:var(--tiger-500);width:30px;height:30px;color:var(--bear-900);border-radius:50%;place-items:center;font-weight:800;display:grid;position:absolute;top:12px;left:14px}.faq dt{margin-top:var(--space-5);font-weight:800}.faq dd{color:var(--fg);margin:6px 0 0}code{background:var(--soft);border-radius:6px;padding:1px 6px;font-size:.9em}.content-index{margin-top:var(--space-10)}.content-index h2{margin:0 0 var(--space-2);font-size:1.2rem;font-weight:800}.content-index ul{margin:0;padding:0;list-style:none}.content-index li{border-bottom:1px solid var(--line)}.content-index li a{color:var(--fg);padding:14px 28px 2px 2px;font-weight:700;text-decoration:none;display:block;position:relative}.content-index li a:after{content:"›";color:var(--muzzle-300);font-size:1.5rem;line-height:1;position:absolute;top:10px;right:4px}.content-index li a:hover{color:var(--tiger-700)}.content-index li span{color:var(--muted);padding:0 28px 14px 2px;font-size:.9rem;line-height:1.5;display:block}.family{padding-top:var(--space-2);padding-bottom:var(--space-8)}.family h2{font-size:1.1rem;font-weight:800}.family-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:0;list-style:none;display:grid}.family-grid a{padding:var(--space-4);background:var(--cream-50);border-radius:var(--radius-md);color:var(--fg);height:100%;transition:border-color .15s ease, transform .15s var(--ease);border:2px solid #0000;flex-direction:column;gap:2px;text-decoration:none;display:flex}.family-grid a:hover{border-color:var(--tiger-500);transform:translateY(-2px)}.family-grid span{color:var(--muted);font-size:.9rem}.family-grid em{color:var(--tiger-700);font-size:.88rem;font-style:normal;font-weight:700}.family-icon{font-size:1.5rem}.site-footer{border-top:1px solid var(--line);background:var(--cream-50);padding:var(--space-6) 0 var(--space-8);color:var(--muted);font-size:.88rem}.site-footer a{color:var(--muted)}.footer-brand a{color:var(--fg);font-weight:800}.footer-sites{flex-wrap:wrap;gap:0 4px;margin:8px 0;display:flex}.footer-sites a{align-items:center;min-height:36px;padding:0 6px;display:inline-flex}.copyright{margin-top:8px}.preview-list li{margin:6px 0}.badge{background:var(--soft);border-radius:999px;padding:1px 8px;font-size:.75rem}.badge-live{background:var(--good-50);color:var(--good-600)}.badge-draft{background:var(--tiger-50);color:var(--tiger-700)}.muted{color:var(--muted)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tool-layout{gap:var(--space-4);display:grid}@media (min-width:860px){.tool-layout{gap:var(--space-6);grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.tool-layout>.tool-input{position:sticky;top:76px}.hero h1{font-size:2.4rem}.hero .mascot{width:140px}.content-index ul{column-gap:var(--space-8);grid-template-columns:1fr 1fr;display:grid}.family{max-width:1120px}}@media (max-width:480px){.wrap{padding:0 var(--space-4)}.card{padding:var(--space-4)}}.host{align-items:flex-end;gap:var(--space-2);min-height:84px;display:flex}.host.is-right{flex-direction:row-reverse}.host .mascot{flex:none}.host-bubble{border:2px solid var(--line);background:var(--bg);word-break:keep-all;animation:pop .22s var(--ease) both;border-radius:18px 18px 18px 4px;margin:0 0 14px;padding:10px 14px;font-weight:700;line-height:1.45;position:relative}.host.is-right .host-bubble{border-radius:18px 18px 4px}.host.is-good .host-bubble{border-color:var(--good-600);background:var(--good-50);color:var(--good-600)}.host.is-bad .host-bubble{border-color:var(--bad-600);background:var(--bad-50);color:var(--bad-600)}.host.is-hot .host-bubble{border-color:var(--tiger-500);background:var(--tiger-50)}.host.is-idle .mascot{transform-origin:50% 100%;animation:2.4s ease-in-out infinite host-breathe}.host.is-good .mascot,.host.is-hot .mascot{transform-origin:50% 100%;animation:host-hop .55s var(--ease) both}@keyframes host-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.025,.975)}}@keyframes host-hop{0%{transform:translateY(0)scale(1)}25%{transform:translateY(0)scale(1.08,.9)}55%{transform:translateY(-14px)scale(.96,1.05)}80%{transform:translateY(0)scale(1.04,.96)}to{transform:translateY(0)scale(1)}}.confetti{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.confetti span{opacity:0;border-radius:2px;width:9px;height:15px;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards;position:absolute;top:-16px}.confetti .c0{background:var(--tiger-500)}.confetti .c1{background:var(--good-600)}.confetti .c2{background:var(--info-600)}.confetti .c3{background:var(--muzzle-300)}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(420px)rotate(540deg)}}