:root{--blue:#2563eb;--blue-dark:#1d4ed8;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--bg:#f8fafc;--card:#ffffff}*{box-sizing:border-box}body,html{margin:0;padding:0}body{font-family:Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}.container{width:100%;max-width:760px;margin:0 auto;padding:0 20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{background:var(--card);border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:10}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}.brand{display:inline-flex;align-items:center;gap:8px;font-size:1.15rem;font-weight:900;color:var(--ink);text-decoration:none}.brand-lock{width:24px;height:24px;display:block;flex-shrink:0}.nav{display:flex;flex-wrap:wrap;gap:8px 18px}.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap}.nav a:hover{color:var(--blue)}.generator-wrap{margin:32px 0 48px}.lead{color:var(--muted);font-size:1rem;margin:0 0 24px}.generator{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 4px 24px rgba(15,23,42,.05)}.outputs{flex-direction:column;margin-bottom:24px}.output,.outputs{display:flex;gap:10px}.output{align-items:stretch}.password{flex:1 1;display:flex;align-items:center;min-height:56px;padding:0 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1.15rem;font-weight:600;letter-spacing:.02em;word-break:break-all;color:var(--ink);transition:border-color .2s,box-shadow .2s}.password.is-animating{color:var(--blue);border-color:var(--blue);animation:jitter .18s linear infinite}.password.is-settled{animation:settle-pop .45s cubic-bezier(.22,1,.36,1)}@keyframes jitter{0%,to{transform:translateX(0)}25%{transform:translateX(-.6px)}75%{transform:translateX(.6px)}}@keyframes settle-pop{0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(37,99,235,.45);border-color:var(--blue)}40%{transform:scale(1.012)}to{transform:scale(1);box-shadow:0 0 0 8px rgba(37,99,235,0);border-color:var(--line)}}@media (prefers-reduced-motion:reduce){.password.is-animating,.password.is-settled{animation:none}}.copy-btn{flex-shrink:0;padding:0 20px;background:var(--ink);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .15s}.copy-btn:hover:not(:disabled){background:#111827}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.options{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;border:none;padding:0;margin:0 0 24px}.checkbox{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none}.checkbox input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}.length-control{margin-bottom:24px}.length-control label{display:block;margin-bottom:10px;font-weight:500}.length-control strong{color:var(--blue)}.length-control input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer}.length-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-top:4px}.generate-btn{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}.generate-btn:hover:not(:disabled){background:var(--blue-dark)}.generate-btn:active:not(:disabled){transform:scale(.98)}.generate-btn:disabled{background:var(--muted);cursor:not-allowed}.guide{padding-bottom:48px}.guide h1{font-size:1.7rem;line-height:1.4;margin:0 0 28px}.guide h2{font-size:1.25rem;margin:40px 0 12px;padding-top:8px}.guide h3{font-size:1.02rem;margin:24px 0 8px;color:var(--ink)}.guide p{margin:0 0 16px;color:#374151}.guide ul{padding-left:20px;margin:0 0 16px}.guide li{margin-bottom:12px;color:#374151}.guide strong{color:var(--ink)}.page{padding:36px 0 56px}.page h1{font-size:1.7rem;line-height:1.4;margin:0 0 12px}.page h2{font-size:1.25rem;margin:36px 0 12px}.page p{margin:0 0 16px;color:#374151}.page ul{padding-left:20px;margin:0 0 16px}.page li{margin-bottom:10px;color:#374151}.page strong{color:var(--ink)}.page a{color:var(--blue)}.page-meta{color:var(--muted);font-size:.9rem;margin-bottom:24px}.contact-mail{font-size:1.15rem;font-weight:700}.site-footer{border-top:1px solid var(--line);background:var(--card);padding:28px 0}.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:14px}.footer-nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500}.footer-nav a:hover{color:var(--blue)}.footer-copy{margin:0;color:var(--muted);font-size:.85rem;text-align:center}@media (max-width:520px){.options{grid-template-columns:1fr}.guide h1{font-size:1.4rem}}