:root{--color-bg:#fafafa;--color-surface:#fff;--color-text-primary:#1a1a1a;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-border:#e5e7eb;--color-border-focus:#a3a3a3;--color-primary:#1a1a1a;--color-primary-hover:#333;--color-error:#dc2626;--color-error-bg:#fef2f2;--color-error-border:#fecaca;--color-success:#16a34a;--color-success-bg:#f0fdf4;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001a;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans KR",sans-serif;--transition-fast:.15s ease;--transition-normal:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-stack);background-color:var(--color-bg);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}.container{max-width:600px;margin:0 auto;padding:48px 20px 80px}.header{text-align:center;margin-bottom:40px}.header h1{letter-spacing:-.5px;color:var(--color-text-primary);margin-bottom:8px;font-size:28px;font-weight:700}.subtitle{color:var(--color-text-secondary);font-size:16px;font-weight:400}.generator{flex-direction:column;gap:20px;display:flex}.input-group{flex-direction:column;gap:12px;display:flex}.input-group input[type=text]{width:100%;font-size:15px;font-family:var(--font-stack);color:var(--color-text-primary);background-color:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;padding:14px 16px}.input-group input[type=text]::placeholder{color:var(--color-text-muted)}.input-group input[type=text]:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #0000000f}.input-group input[type=text]:disabled{opacity:.6;cursor:not-allowed}.button-group{gap:10px;display:flex}.btn-generate,.btn-random{font-size:15px;font-weight:600;font-family:var(--font-stack);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-normal);border:1.5px solid #0000;flex:1;padding:12px 20px}.btn-generate{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-generate:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-generate:active:not(:disabled){transform:translateY(0)}.btn-generate:disabled{opacity:.5;cursor:not-allowed}.btn-random{color:var(--color-text-primary);border-color:var(--color-border);background-color:#0000}.btn-random:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-border-focus);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn-random:active:not(:disabled){transform:translateY(0)}.btn-random:disabled{opacity:.5;cursor:not-allowed}.error-message{color:var(--color-error);background-color:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.loading{flex-direction:column;align-items:center;gap:16px;padding:32px 0;display:flex}.loading p{color:var(--color-text-secondary);font-size:14px}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result-card{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:box-shadow var(--transition-normal);padding:24px;animation:.35s slideUp}.result-card:hover{box-shadow:var(--shadow-lg)}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.result-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.result-topic{color:var(--color-text-primary);background-color:var(--color-bg);border-radius:20px;padding:4px 10px;font-size:14px;font-weight:600}.result-length{color:var(--color-text-muted);font-size:13px}.result-content{color:var(--color-text-primary);white-space:pre-wrap;word-break:keep-all;margin-bottom:16px;font-size:15px;line-height:1.75}.result-actions{gap:8px;display:flex}.copy-button,.threads-button{font-size:13px;font-weight:500;font-family:var(--font-stack);color:var(--color-text-secondary);background-color:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast);border-radius:6px;align-items:center;padding:8px 16px;text-decoration:none;display:inline-flex}.copy-button:hover,.threads-button:hover{background-color:var(--color-surface);border-color:var(--color-border-focus);color:var(--color-text-primary)}.threads-button{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.threads-button:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}@media (max-width:480px){.container{padding:32px 16px 60px}.header h1{font-size:24px}.subtitle{font-size:14px}.button-group{flex-direction:column}.result-card{padding:20px}}