@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--bg-primary:#0a0a1a;--bg-secondary:#111128;--bg-card:#19193c99;--bg-card-hover:#232350b3;--bg-glass:#ffffff0a;--border-glass:#ffffff14;--border-active:#8264ff80;--text-primary:#e8e6f0;--text-secondary:#9d99b0;--text-muted:#6b6580;--accent-primary:#8b6cff;--accent-secondary:#6c4fff;--accent-glow:#8b6cff4d;--accent-gradient:linear-gradient(135deg,#8b6cff 0%,#5e3fff 50%,#7c5cff 100%);--success:#4cdb8a;--warning:#ffb84d;--error:#ff5c5c;--font-body:"Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;--font-ui:"Inter","Noto Sans KR",sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 20px #0006;--shadow-lg:0 8px 40px #00000080;--shadow-glow:0 0 30px var(--accent-glow)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(80% 50% at 50% -20%,#643cc826,#0000),radial-gradient(60% 40% at 80% 100%,#3c28b41a,#0000);min-height:100vh}.app-container{max-width:900px;margin:0 auto;padding:40px 24px 80px}.app-header{text-align:center;margin-bottom:48px}.app-title{font-family:var(--font-body);background:linear-gradient(135deg,#c4b5ff 0%,#8b6cff 40%,#a78bff 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2.2rem;font-weight:900}.app-subtitle{color:var(--text-secondary);font-size:.95rem;font-weight:300}.tab-container{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);gap:4px;margin-bottom:32px;padding:4px;display:flex}.tab-button{color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;border-radius:var(--radius-md);background:0 0;border:none;flex:1;padding:14px 20px;font-size:.95rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.tab-button:hover{color:var(--text-primary)}.tab-button.active{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-glow);font-weight:600}.pattern-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;display:grid}.pattern-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-md);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;padding:20px 16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.pattern-card:before{content:"";background:var(--accent-gradient);opacity:0;height:2px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.pattern-card:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-md);border-color:#8b6cff33;transform:translateY(-2px)}.pattern-card:hover:before{opacity:1}.pattern-card.selected{border-color:var(--accent-primary);background:#8b6cff1a;box-shadow:0 0 20px #8b6cff26}.pattern-card.selected:before{opacity:1}.pattern-icon{margin-bottom:10px;font-size:2rem;display:block}.pattern-name{color:var(--text-primary);margin-bottom:4px;font-size:.95rem;font-weight:600}.pattern-name-en{font-family:var(--font-ui);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem}.pattern-preview{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:24px;padding:20px;animation:.3s fadeIn}.preview-label{color:var(--accent-primary);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:600;font-family:var(--font-ui);margin-bottom:8px}.preview-text{color:var(--text-secondary);font-size:.88rem;font-style:italic;line-height:1.7}.preview-description{color:var(--text-secondary);border-bottom:1px solid var(--border-glass);margin-bottom:16px;padding-bottom:16px;font-size:.85rem;line-height:1.6}.input-section{flex-direction:column;gap:20px;margin-bottom:32px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-label{color:var(--text-secondary);font-size:.85rem;font-weight:500}.input-field{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;font-family:var(--font-body);outline:none;padding:14px 18px;transition:all .3s}.input-field:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.input-field::placeholder{color:var(--text-muted)}.slider-container{flex-direction:column;gap:10px;display:flex}.slider-header{justify-content:space-between;align-items:center;display:flex}.slider-value{font-family:var(--font-ui);color:var(--accent-primary);font-size:1.1rem;font-weight:700}.slider-unit{color:var(--text-muted);font-size:.75rem;font-weight:400}.slider-track{appearance:none;cursor:pointer;background:#ffffff14;border-radius:3px;outline:none;width:100%;height:6px}.slider-track::-webkit-slider-thumb{appearance:none;background:var(--accent-gradient);cursor:pointer;width:22px;height:22px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;transition:transform .2s}.slider-track::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-track::-moz-range-thumb{background:var(--accent-gradient);cursor:pointer;width:22px;height:22px;box-shadow:0 0 10px var(--accent-glow);border:none;border-radius:50%}.slider-labels{color:var(--text-muted);font-size:.7rem;font-family:var(--font-ui);justify-content:space-between;display:flex}.generate-button{border-radius:var(--radius-md);background:var(--accent-gradient);color:#fff;width:100%;font-family:var(--font-body);cursor:pointer;box-shadow:var(--shadow-glow);letter-spacing:.5px;border:none;padding:16px;font-size:1.05rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.generate-button:hover:not(:disabled){box-shadow:0 0 40px var(--accent-glow),var(--shadow-md);transform:translateY(-2px)}.generate-button:active:not(:disabled){transform:translateY(0)}.generate-button:disabled{opacity:.5;cursor:not-allowed}.output-section{margin-top:32px}.output-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.output-title{color:var(--text-primary);font-size:1rem;font-weight:600}.output-meta{align-items:center;gap:16px;display:flex}.output-char-count{font-family:var(--font-ui);color:var(--text-secondary);font-size:.8rem}.output-pattern-badge{color:var(--accent-primary);background:#8b6cff26;border:1px solid #8b6cff4d;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:.78rem;font-weight:500;display:inline-flex}.output-content{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:200px;max-height:600px;color:var(--text-primary);white-space:pre-wrap;word-break:keep-all;padding:28px;font-size:.95rem;line-height:1.9;overflow-y:auto}.output-content::-webkit-scrollbar{width:6px}.output-content::-webkit-scrollbar-track{background:0 0}.output-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.output-cursor{background:var(--accent-primary);vertical-align:text-bottom;width:2px;height:1.1em;margin-left:2px;animation:.8s infinite blink;display:inline-block}.copy-button{border:1px solid var(--border-glass);border-radius:var(--radius-sm);background:var(--bg-glass);color:var(--text-secondary);font-family:var(--font-ui);cursor:pointer;padding:8px 16px;font-size:.78rem;transition:all .2s}.copy-button:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.copy-button.copied{border-color:var(--success);color:var(--success)}.loading-indicator{color:var(--text-secondary);justify-content:center;align-items:center;gap:12px;padding:40px;font-size:.9rem;display:flex}.loading-dots{gap:4px;display:flex}.loading-dot{background:var(--accent-primary);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite both loadPulse}.loading-dot:first-child{animation-delay:-.32s}.loading-dot:nth-child(2){animation-delay:-.16s}.loading-dot:nth-child(3){animation-delay:0s}.auto-match-info{border-radius:var(--radius-md);background:#8b6cff14;border:1px solid #8b6cff33;align-items:center;gap:12px;margin-bottom:20px;padding:16px 20px;animation:.4s fadeIn;display:flex}.auto-match-icon{font-size:1.5rem}.auto-match-text{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.auto-match-text strong{color:var(--accent-primary)}.api-key-section{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-bottom:24px;padding:16px 20px}.api-key-input{border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-family:var(--font-ui);background:#0000004d;outline:none;width:100%;padding:10px 14px;transition:all .3s}.api-key-input:focus{border-color:var(--accent-primary)}.api-key-note{color:var(--text-muted);margin-top:6px;font-size:.72rem}.error-message{border-radius:var(--radius-md);color:var(--error);background:#ff5c5c1a;border:1px solid #ff5c5c4d;margin-bottom:20px;padding:14px 18px;font-size:.88rem;animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes loadPulse{0%,80%,to{opacity:.4;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@media (max-width:640px){.app-container{padding:24px 16px 60px}.app-title{font-size:1.6rem}.pattern-grid{grid-template-columns:repeat(2,1fr);gap:8px}.pattern-card{padding:16px 12px}.pattern-icon{font-size:1.5rem}.tab-button{padding:12px 14px;font-size:.85rem}.output-content{padding:20px;font-size:.9rem}}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);width:100%;max-width:550px;max-height:80vh;box-shadow:var(--shadow-lg);background:#1a1a2e;border:1px solid #ffffff1a;flex-direction:column;animation:.3s fadeIn;display:flex;overflow:hidden}.modal-header{background:#14142880;border-bottom:1px solid #ffffff1a;align-items:center;gap:12px;padding:20px 24px;display:flex}.modal-title{color:#fff;font-size:1.1rem;font-weight:700}.modal-body{color:var(--text-secondary);flex:1;padding:24px;font-size:.9rem;line-height:1.6;overflow-y:auto}.modal-body p{margin-bottom:16px}.modal-body strong{color:#fff}.modal-warning{border-radius:var(--radius-sm);background:#ff5c5c1a;border:1px solid #ff5c5c33;margin-bottom:20px;padding:16px}.modal-warning-title{color:var(--error);margin-bottom:8px;font-weight:700;display:block}.modal-footer{background:#14142880;border-top:1px solid #ffffff1a;justify-content:flex-end;padding:20px 24px;display:flex}.modal-agree-btn{border-radius:var(--radius-md);cursor:pointer;font-weight:700;font-family:var(--font-body);border:none;outline:none;align-items:center;gap:8px;padding:12px 24px;font-size:.95rem;transition:all .3s;display:flex}.modal-agree-btn.active{background:var(--accent-gradient);color:#fff;box-shadow:var(--shadow-glow)}.modal-agree-btn.active:hover{box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px)}.modal-agree-btn.disabled{color:#ffffff4d;cursor:not-allowed;background:#ffffff1a}.modal-highlight{color:#fff;text-underline-offset:4px;font-weight:700;-webkit-text-decoration:underline #ffb84d80;text-decoration:underline #ffb84d80}