/* 흥얼→멜로디 — 몽환 퍼플/네온 뮤직 */
:root{
  --bg:#12101f; --panel:#1c1830; --line:#322c4a; --ink:#efe9ff; --sub:#b0a6cf; --faint:#786e9c;
  --pink:#ff6ac2; --purple:#a171ff; --cyan:#4fd9e8; --lime:#b6ff5a; --gold:#ffd23f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); min-height:100vh; padding-bottom:40px;
  background:radial-gradient(circle at 20% 0%, rgba(161,113,255,.22), transparent 45%),
             radial-gradient(circle at 85% 30%, rgba(255,106,194,.16), transparent 45%), var(--bg);}
.wrap{max-width:540px; margin:0 auto; padding:0 16px;}

.top{text-align:center; padding:44px 0 4px;}
.top h1{font-size:34px; font-weight:900; margin:0; letter-spacing:-1px;
  background:linear-gradient(90deg,#ff6ac2,#a171ff,#4fd9e8); -webkit-background-clip:text; background-clip:text; color:transparent;}
.top .tg{color:var(--sub); font-size:14.5px; margin-top:10px; line-height:1.85;}
.top .tg b{color:var(--ink)}

/* 녹음 */
.stage{text-align:center; margin-top:30px;}
.mic{width:120px; height:120px; border-radius:50%; border:0; cursor:pointer; font-size:46px; color:#fff;
  background:radial-gradient(circle at 40% 35%, #b98bff, #7a3ff0); box-shadow:0 10px 40px rgba(122,63,240,.45); transition:transform .1s;}
.mic:active{transform:scale(.95)}
.mic.rec{background:radial-gradient(circle at 40% 35%,#ff7d8a,#e0303f); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,48,63,.5)}50%{box-shadow:0 0 0 22px rgba(224,48,63,0)}}
.miccap{color:var(--sub); font-size:15px; margin-top:16px; min-height:22px;}
.count{font-size:64px; font-weight:900; color:var(--pink);}
.level{height:6px; background:var(--line); border-radius:4px; margin:16px auto 0; max-width:240px; overflow:hidden;}
.levelfill{height:100%; width:0; background:linear-gradient(90deg,#4fd9e8,#b6ff5a); transition:width .08s;}
.hint2{color:var(--faint); font-size:12.5px; margin-top:14px; line-height:1.7;}

/* 결과 */
.song{margin-top:20px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; animation:rise .5s;}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.song .title{font-size:22px; font-weight:900; text-align:center;}
.song .meta{text-align:center; color:var(--sub); font-size:13px; margin-top:6px;}
.song .meta b{color:var(--cyan)}
.song .chords{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:14px 0;}
.chord{font-size:14px; font-weight:800; background:#2a2440; border:1px solid var(--line); border-radius:9px; padding:7px 13px; color:var(--purple);}
.chord.on{background:var(--purple); color:#fff; transform:scale(1.08);}
.roll{height:120px; background:#15121f; border:1px solid var(--line); border-radius:12px; margin:12px 0; position:relative; overflow:hidden;}
.note{position:absolute; border-radius:4px; background:linear-gradient(90deg,#ff6ac2,#a171ff); opacity:.55; transition:opacity .1s;}
.note.on{opacity:1; box-shadow:0 0 12px var(--pink);}
.comment{color:var(--sub); font-size:13px; line-height:1.8; text-align:center; margin-top:6px; font-style:italic;}

.playbtn{width:100%; margin-top:12px; font-size:17px; font-weight:900; color:#160e22;
  background:linear-gradient(90deg,#b6ff5a,#4fd9e8); border:0; border-radius:14px; padding:15px; cursor:pointer;}
.playbtn:active{opacity:.85}
.actions{display:flex; gap:9px; margin-top:10px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14px; font-weight:800; padding:13px; border-radius:12px; border:1px solid var(--line); color:var(--ink); background:var(--panel); cursor:pointer;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.err{text-align:center; color:#ff9d9d; font-size:14px; padding:20px; line-height:1.8;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
.foot{margin-top:32px; text-align:center; color:var(--faint); font-size:11.5px; line-height:1.8;}
.hidden{display:none}
a{color:var(--cyan)}