:root{--primary:#ff914d;--primary-glow:#ff914d40;--primary-soft:#ff914d1f;--bg-light:#fff;--bg-dark:#0a0a0a;--text-light:#333;--text-dark:#f0f0f0;--border-light:#e0e0e0;--border-dark:#ff914d4d;--radius:14px;--radius-sm:8px;--transition-slow:1.3s ease-in-out;--transition-med:.4s ease;--transition-fast:.2s ease;--font-display:"Playfair Display", serif;--font-body:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--max-width:440px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-body);background-color:var(--bg-dark);min-height:100dvh;color:var(--text-dark);-webkit-font-smoothing:antialiased;transition:background-color 1.6s ease-in-out,color .8s ease-in-out;overflow-x:hidden}body.light-mode{background-color:var(--bg-light);color:var(--text-light)}.app-header{text-align:center;border-bottom:1px solid var(--border-dark);-webkit-backdrop-filter:blur(20px);z-index:100;background:#0a0a0ad9;padding:1rem;transition:background-color 1.6s,border-color 1.6s;position:sticky;top:0}body.light-mode .app-header{border-bottom-color:var(--border-light);background:#ffffffd9}.logo{object-fit:contain;cursor:pointer;height:36px;transition:transform var(--transition-fast)}.logo:hover{transform:scale(1.05)}.app-main{max-width:var(--max-width);flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;margin:0 auto;padding:1.5rem 1rem;display:flex;position:relative}.intro-video{border-radius:var(--radius);width:100%;max-width:380px;-webkit-mask-image:radial-gradient(circle,#000 60%,#0000 100%);mask-image:radial-gradient(circle,#000 60%,#0000 100%)}.intro-text{text-align:center;color:#d4d4d4;width:70%;font-family:var(--font-display);opacity:0;z-index:10;letter-spacing:.02em;font-size:.65rem;line-height:1.5;transition:opacity 1.6s ease-in-out;position:absolute;top:30%}.intro-text.show{opacity:1}.audio-player{opacity:0;width:100%;max-width:300px;transition:opacity var(--transition-slow);border-radius:30px;margin-bottom:1rem}.audio-player.visible{opacity:1}.track-button{width:100%;max-width:340px;color:var(--primary);border:1px solid var(--primary);background:var(--primary-soft);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);opacity:0;align-items:center;gap:.75rem;margin:.3rem auto;padding:.55rem 1rem;font-size:.78rem;font-weight:500;animation:none;display:flex;transform:translateY(8px)}.track-button.visible{opacity:1;animation:.6s forwards fadeSlideIn;transform:translateY(0)}.track-button:hover{background:var(--primary);color:#000;box-shadow:0 4px 20px var(--primary-glow);transform:translateY(-1px)}.track-button:active{transform:translateY(0)}.track-button .track-icon{object-fit:cover;border-radius:50%;width:28px;height:28px}.track-button .track-label{text-align:left;flex:1}.track-button.playing{background:var(--primary);color:#000;box-shadow:0 0 25px var(--primary-glow)}.sample-button{width:100%;max-width:340px;color:var(--primary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #ff914d66;align-items:center;gap:.65rem;margin:.25rem auto;padding:.5rem 1rem;font-size:.75rem;font-weight:500;display:flex}.sample-button:hover{background:var(--primary);color:#000}.sample-button .cheese-icon{object-fit:cover;border-radius:50%;width:26px;height:26px}.lyrics-display{text-align:center;color:var(--primary);white-space:pre-line;opacity:0;max-width:340px;transition:opacity var(--transition-slow);margin-top:1rem;padding:0 .5rem;font-size:.8rem;line-height:1.6}.lyrics-display.visible{opacity:1}.action-buttons{opacity:0;transition:opacity var(--transition-slow);justify-content:center;align-items:center;gap:.75rem;margin-top:1rem;display:flex}.action-buttons.visible{opacity:1}.action-btn{color:var(--primary);border:1px solid var(--primary);cursor:pointer;width:38px;height:38px;transition:all var(--transition-fast);background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;text-decoration:none;display:flex}.action-btn:hover{background:var(--primary);color:#000;transform:scale(1.1)}.info-text{text-align:center;color:#ff914d99;opacity:0;transition:opacity var(--transition-slow);margin-top:.75rem;font-size:.58rem;font-weight:500}.info-text.visible{opacity:1}.notice-text{text-align:center;color:var(--primary);margin-bottom:1rem}.notice-text .notice-main{margin-bottom:.25rem;font-size:.72rem;font-weight:500}.notice-text .notice-sub{opacity:.7;font-size:.6rem}.mbti-trigger{color:var(--primary);border:1.5px solid var(--primary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:50px;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.65rem 1.5rem;font-size:.75rem;font-weight:600;display:flex}.mbti-trigger:hover{background:var(--primary);color:#000;box-shadow:0 4px 24px var(--primary-glow)}.mbti-overlay{-webkit-backdrop-filter:blur(10px);z-index:1000;background:#000000d9;justify-content:center;align-items:center;padding:1rem;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.mbti-modal{border:1px solid var(--border-dark);border-radius:var(--radius);background:#1a1a1a;width:100%;max-width:400px;max-height:85vh;padding:2rem 1.5rem;animation:.4s slideUp;position:relative;overflow-y:auto}.mbti-close{color:var(--primary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:1rem;right:1rem}.mbti-title{text-align:center;font-family:var(--font-display);color:var(--primary);margin-bottom:.5rem;font-size:1.1rem}.mbti-subtitle{text-align:center;color:#888;margin-bottom:1.5rem;font-size:.75rem}.mbti-progress{background:#333;border-radius:2px;width:100%;height:4px;margin-bottom:1.5rem;overflow:hidden}.mbti-progress-bar{background:var(--primary);height:100%;transition:width var(--transition-med);border-radius:2px}.mbti-question{text-align:center;color:var(--text-dark);min-height:3rem;margin-bottom:1.5rem;font-size:.9rem;line-height:1.5}.mbti-answer{width:100%;color:var(--primary);border:1px solid var(--primary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:all var(--transition-fast);background:0 0;margin-bottom:.6rem;padding:.85rem 1rem;font-size:.78rem;line-height:1.4}.mbti-answer:hover{background:var(--primary);color:#000}.mbti-result{text-align:center}.mbti-result-img{object-fit:cover;border:3px solid var(--primary);border-radius:50%;width:120px;height:120px;margin:1rem auto}.mbti-result-cheese{color:#aaa;font-size:.85rem}.mbti-result-genre{color:var(--primary);margin:.5rem 0;font-size:1.3rem;font-weight:700}.mbti-retry{color:#000;background:var(--primary);cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:50px;margin-top:1rem;padding:.65rem 2rem;font-size:.8rem}.mbti-retry:hover{box-shadow:0 4px 20px var(--primary-glow);transform:translateY(-1px)}.admin-container{width:100%;max-width:800px;margin:0 auto;padding:2rem 1rem}.admin-title{color:var(--primary);text-align:center;font-size:1.3rem;font-family:var(--font-display);margin-bottom:2rem}.admin-login{text-align:center;max-width:360px;margin:0 auto}.admin-input{border-radius:var(--radius-sm);width:100%;color:var(--text-dark);transition:border-color var(--transition-fast);background:#1a1a1a;border:1px solid #333;outline:none;margin-bottom:.75rem;padding:.75rem 1rem;font-size:.85rem}.admin-input:focus{border-color:var(--primary)}.admin-input::placeholder{color:#666}.admin-btn{color:#000;background:var(--primary);cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:50px;align-items:center;gap:.5rem;padding:.7rem 2rem;font-size:.85rem;font-weight:600;display:inline-flex}.admin-btn:hover{box-shadow:0 4px 20px var(--primary-glow);transform:translateY(-1px)}.admin-btn:disabled{opacity:.5;cursor:not-allowed}.admin-btn-outline{color:var(--primary);border:1px solid var(--primary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:50px;padding:.55rem 1.2rem;font-size:.78rem}.admin-btn-outline:hover{background:var(--primary);color:#000}.admin-table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.78rem}.admin-table th{color:var(--primary);text-align:left;background:#1a1a1a;border-bottom:1px solid #333;padding:.6rem .5rem;font-weight:600;position:sticky;top:0}.admin-table td{color:#ccc;vertical-align:top;border-bottom:1px solid #1a1a1a;padding:.5rem}.admin-table tr:hover td{background:#ff914d0d}.admin-status{border-radius:50px;padding:.15rem .5rem;font-size:.65rem;font-weight:600;display:inline-block}.admin-status.done{color:#22c55e;background:#22c55e26}.admin-status.pending{color:var(--primary);background:#ff914d26}.admin-upload-zone{border-radius:var(--radius);text-align:center;color:#666;transition:all var(--transition-fast);cursor:pointer;border:2px dashed #333;margin:1rem 0;padding:2rem}.admin-upload-zone:hover,.admin-upload-zone.dragover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.admin-search{gap:.5rem;margin-bottom:1rem;display:flex}.admin-textarea{border-radius:var(--radius-sm);width:100%;min-height:120px;color:var(--text-dark);resize:vertical;font-size:.8rem;font-family:var(--font-body);background:#1a1a1a;border:1px solid #333;outline:none;padding:.75rem}.admin-textarea:focus{border-color:var(--primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:0 0 20px 5px var(--primary-glow)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#333;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.toast{border:1px solid var(--primary);color:var(--primary);z-index:2000;white-space:nowrap;background:#1a1a1a;border-radius:50px;padding:.75rem 1.5rem;font-size:.78rem;transition:transform .4s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{transform:translate(-50%)translateY(0)}.radio-container{-webkit-backdrop-filter:blur(15px);text-align:center;background:#ffffff08;border:1px solid #ff914d33;border-radius:24px;width:100%;max-width:360px;padding:2rem 1.5rem;animation:.8s ease-out fadeSlideIn;position:relative;overflow:hidden}.radio-badge{background:var(--primary);color:#000;letter-spacing:.05em;text-transform:uppercase;border-radius:50px;margin-bottom:1.5rem;padding:.25rem .75rem;font-size:.65rem;font-weight:700;display:inline-block}.radio-visualizer{justify-content:center;align-items:center;gap:4px;height:60px;margin-bottom:1.5rem;display:flex}.visual-bar{background:var(--primary);border-radius:2px;width:4px;height:20%;transition:height .1s}.visual-bar.active{animation:1.2s ease-in-out infinite radioWave}.radio-script-box{min-height:80px}.radio-script-text{color:var(--text-dark);word-break:keep-all;font-size:.95rem;font-weight:400;line-height:1.6}.radio-skip-btn{color:#fff6;cursor:pointer;background:0 0;border:none;margin-top:1.5rem;font-size:.75rem;text-decoration:underline;transition:color .3s}.radio-skip-btn:hover{color:var(--primary)}@keyframes radioWave{0%,to{opacity:.5;height:20%}50%{opacity:1;height:100%}}