.gradient-generator-wrapper{--bg-primary:#f5f5f0;--bg-secondary:#fff;--bg-section:#fff;--border-color:#333;--text-primary:#222;--text-secondary:#555;--text-light:#666;--color-accent:#3498db;--color-success:#27ae60;--color-warning:#f39c12;--color-danger:#e74c3c;--color-purple:#9b59b6;--color-code:#e74c3c;--color-colors:#9b59b6;--color-options:#27ae60;--color-history:#f39c12;--shadow-sm:2px 2px 0 rgba(0,0,0,0.1);--shadow-md:4px 4px 0 rgba(0,0,0,0.15);--shadow-lg:8px 8px 0 rgba(0,0,0,0.15)}.gradient-generator-wrapper,.gradient-generator-wrapper *,.gradient-generator-wrapper *::before,.gradient-generator-wrapper *::after{box-sizing:border-box}.gradient-generator-container{max-width:1180px;width:100%;margin:20px auto;padding:20px;background:var(--bg-primary);border:2px solid var(--border-color);font-family:'Noto Sans KR','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary);box-shadow:var(--shadow-lg);line-height:1.5}.generator-header{text-align:center;margin-bottom:18px;padding-bottom:12px;border-bottom:3px double var(--border-color)}.generator-header h2{margin:0 0 6px 0;font-size:28px;font-weight:700;color:#2c3e50;text-shadow:2px 2px 0 rgba(255,255,255,.5);line-height:1.2}.subtitle{margin:0;font-size:14px;color:var(--text-light);line-height:1.4}.quick-actions{display:flex;gap:10px;margin-bottom:15px;justify-content:center;flex-wrap:wrap}.btn-generate,.btn-sample{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;border:1px solid var(--border-color);font-size:15px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all 0.2s;box-shadow:3px 3px 0 rgba(0,0,0,.2);font-family:inherit}.btn-generate:hover,.btn-sample:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.2)}.btn-generate:active,.btn-sample:active{transform:translate(3px,3px);box-shadow:none}.btn-generate:focus-visible,.btn-sample:focus-visible{outline:3px solid var(--color-warning);outline-offset:2px}.btn-generate{background:var(--color-accent);color:#fff;border-color:var(--border-color)}.btn-sample{background:var(--color-success);color:#fff;border-color:var(--border-color)}.ad-section{display:block;width:100%;min-height:100px;padding:15px;text-align:center;background:#fff;border:1px solid #ddd;overflow:visible;margin-bottom:15px}.ad-label{display:block;font-size:12px;color:#999;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.ad-section .adsbygoogle{display:block;width:100%;max-width:100%;min-height:90px;text-align:center}.preview-section{background:var(--bg-secondary);border:1px solid var(--border-color);padding:15px;box-shadow:var(--shadow-md);margin-bottom:15px}.gradient-preview-box{position:relative;width:100%;height:280px;border:2px solid var(--border-color);margin-top:10px;margin-bottom:10px;transition:background 0.3s ease;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.preview-info{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.info-badge{padding:6px 12px;font-size:13px;font-weight:600;background:rgba(255,255,255,.9);border:1px solid var(--border-color);color:var(--text-primary);display:inline-block}.section-title{display:flex;align-items:center;gap:6px;margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid var(--border-color);font-size:17px;font-weight:700;color:#2c3e50;line-height:1.2}.preview-section .section-title{color:var(--color-success)}.code-title{color:var(--color-code)}.colors-title{color:var(--color-colors)}.options-title{color:var(--color-options)}.history-title{color:var(--color-history)}.info-section .section-title{color:var(--color-accent)}.generator-main{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:15px}.code-section,.colors-section{background:var(--bg-secondary);border:1px solid var(--border-color);padding:15px;box-shadow:var(--shadow-md)}.code-group{margin-bottom:0}.code-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--text-secondary)}.code-box{padding:12px;background:#f9f9f9;border:1px solid var(--border-color);margin-bottom:10px;overflow-x:auto}.code-value{display:block;font-size:14px;font-weight:600;color:var(--color-code);font-family:'Courier New',monospace;word-break:break-all;white-space:pre-wrap}.btn-copy-large{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--color-code);color:#fff;border:1px solid var(--border-color);font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:3px 3px 0 rgba(0,0,0,.2);font-family:inherit;width:100%;justify-content:center}.btn-copy-large:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.2)}.btn-copy-large:active{transform:translate(3px,3px);box-shadow:none}.btn-copy-large:focus-visible{outline:3px solid var(--color-warning);outline-offset:2px}.colors-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.color-card{text-align:center}.color-swatch{width:100%;height:80px;border:2px solid var(--border-color);margin-bottom:6px;cursor:pointer;transition:transform 0.2s}.color-swatch:hover{transform:scale(1.05)}.color-hex{font-size:13px;font-weight:600;color:var(--text-primary);font-family:'Courier New',monospace}.color-stop{font-size:12px;color:var(--text-light);margin-top:2px}.options-section{background:var(--bg-secondary);border:1px solid var(--border-color);padding:15px;box-shadow:var(--shadow-md);margin-bottom:15px}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option-group{margin-bottom:0}.option-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--text-secondary)}.select-input{width:100%;max-width:100%;padding:8px 10px;border:1px solid var(--border-color);background:#fff;font-size:15px;font-weight:600;color:var(--text-primary);font-family:inherit;cursor:pointer}.select-input:focus{outline:none;background:#fffacd;border-color:var(--color-warning)}.slider-input-group{display:grid;grid-template-columns:1fr 80px;gap:8px;align-items:center}.angle-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,hsl(0,70%,60%),hsl(60,70%,60%),hsl(120,70%,60%),hsl(180,70%,60%),hsl(240,70%,60%),hsl(300,70%,60%),hsl(360,70%,60%));border:1px solid var(--border-color);outline:none;cursor:pointer}.angle-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border:2px solid var(--border-color);cursor:pointer;box-shadow:var(--shadow-sm)}.angle-slider::-moz-range-thumb{width:20px;height:20px;background:#fff;border:2px solid var(--border-color);cursor:pointer;box-shadow:var(--shadow-sm)}.angle-slider:focus{outline:2px solid var(--color-warning);outline-offset:2px}.number-input{width:100%;max-width:100%;padding:6px 8px;border:1px solid var(--border-color);background:#fff;font-size:15px;font-weight:600;color:var(--text-primary);font-family:'Courier New',monospace;text-align:center}.number-input:focus{outline:none;background:#fffacd;border-color:var(--color-warning)}.history-section{background:var(--bg-secondary);border:1px solid var(--border-color);padding:15px;box-shadow:var(--shadow-md);margin-bottom:15px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.history-header .section-title{margin:0;padding:0;border:none}.btn-clear-history{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:var(--color-danger);color:#fff;border:1px solid var(--border-color);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:2px 2px 0 rgba(0,0,0,.2);font-family:inherit}.btn-clear-history:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.2)}.btn-clear-history:active{transform:translate(2px,2px);box-shadow:none}.btn-clear-history:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.history-item{position:relative;height:100px;border:2px solid var(--border-color);cursor:pointer;transition:transform 0.2s;overflow:hidden}.history-item:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.history-item-info{position:absolute;bottom:0;left:0;right:0;padding:4px 6px;background:rgba(255,255,255,.95);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary);text-align:center}.history-empty{padding:30px;text-align:center;color:var(--text-light);font-size:14px;border:1px dashed var(--border-color)}.info-section{background:var(--bg-secondary);border:1px solid var(--border-color);padding:15px;box-shadow:var(--shadow-md)}.info-content{font-size:15px;color:var(--text-secondary);line-height:1.6}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}.info-card{padding:12px;background:#f9f9f9;border:1px solid #ddd;text-align:center}.info-icon{font-size:24px;margin-bottom:6px}.info-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.info-desc{font-size:13px;color:var(--text-secondary);line-height:1.4}.feature-list{margin-bottom:15px}.feature-list p{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--text-primary)}.feature-list ul{margin:0;padding-left:20px;list-style-type:disc}.feature-list li{font-size:14px;color:var(--text-secondary);margin-bottom:4px;line-height:1.5}.feature-list li:last-child{margin-bottom:0}.warning-box{padding:12px;background:#fff8e6;border:1px solid var(--color-warning);border-left:4px solid var(--color-warning);font-size:14px;color:var(--text-secondary);line-height:1.5}.warning-box strong{color:var(--color-warning)}@media (max-width:1024px){.generator-main{grid-template-columns:1fr}.options-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.gradient-generator-container{margin:10px 5px;padding:10px;width:calc(100% - 10px);max-width:100%;box-sizing:border-box}.generator-header h2{font-size:24px}.subtitle{font-size:13px}.quick-actions{flex-direction:column}.btn-generate,.btn-sample{width:100%;justify-content:center}.gradient-preview-box{height:200px}.options-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.history-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.history-item{height:80px}.colors-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.color-swatch{height:60px}}@media (max-width:480px){.gradient-generator-container{margin:10px 5px;padding:10px;width:calc(100% - 10px);max-width:100%;box-sizing:border-box;border-width:1px}.generator-header h2{font-size:22px}.gradient-preview-box{height:150px}.slider-input-group{grid-template-columns:1fr 70px}.history-list{grid-template-columns:repeat(2,1fr)}.colors-list{grid-template-columns:repeat(3,1fr)}}