:root{
  --bg:#f6f3ee; --card:#fffdf8; --ink:#0f172a; --muted:#6b7280; --line:#e7dfd3;
  --dark:#070707; --soft:#f3efe8; --accent:#8b5e34; --accent2:#f1d6b8;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fbf8f3 0%,#f5f1ea 100%);font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:var(--ink)}
.topbar{min-height:72px;background:rgba(255,253,248,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6vw;backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.brand{font-size:20px;font-weight:900;letter-spacing:-.4px}.sub{font-size:13px;color:var(--muted);margin-top:4px}.wrap{max-width:1180px;margin:0 auto;padding:34px 24px 54px}.hero{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:64px 36px;box-shadow:0 22px 60px rgba(139,94,52,.08)}
.badge{display:inline-block;background:#fff6eb;border:1px solid #ecd8bf;border-radius:999px;padding:9px 15px;color:#7c4a20;font-size:14px;font-weight:800}.hero h1{margin:28px 0 14px;font-size:38px;line-height:1.25;letter-spacing:-1.2px}.lead{max-width:760px;margin:0 auto;color:#4b5563;font-size:18px;line-height:1.7}.fileBox{margin:34px auto 0;max-width:860px;min-height:250px;border:2px dashed #d6c7b7;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;background:linear-gradient(135deg,#fffaf3,#fffdf8);transition:.2s}.fileBox:hover,.fileBox.drag{transform:translateY(-2px);border-color:#8b5e34;background:#fff7ed}.fileBox input{display:none}.fileBtn{background:#070707;color:#fff;border-radius:16px;padding:18px 32px;font-size:21px;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.15)}.fileBox small{color:#8a8177}.panel{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 18px 50px rgba(139,94,52,.07)}.hidden{display:none}.titleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.titleRow h2{margin:0 0 8px;font-size:30px;letter-spacing:-.8px}.titleRow p{margin:0;color:var(--muted)}button{border:0;cursor:pointer;font-family:inherit}.ghost{background:#f4eee6;border-radius:14px;padding:12px 16px;font-weight:900;color:#1f2937}.pill{background:#111;color:#fff;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:900;white-space:nowrap}.scoreGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.scoreCard{background:#f7f1e8;border:1px solid var(--line);border-radius:18px;padding:18px}.scoreCard span{display:block;color:#6b7280;font-weight:800;margin-bottom:8px}.scoreCard strong{display:block;font-size:28px;letter-spacing:-.5px}.scoreCard small{display:block;margin-top:8px;color:#8a8177;line-height:1.4}.scoreCard.dark{background:#060606;color:#fff;border-color:#060606}.scoreCard.dark span,.scoreCard.dark small{color:#d1d5db}.scoreCard.accent{background:#fff2df;border-color:#e9c8a2}#waveCanvas{width:100%;height:140px;border:1px solid var(--line);border-radius:18px;background:#fffaf3}.playerRow{display:flex;align-items:center;gap:12px;margin:18px 0;color:#4b5563}.round{border-radius:999px;background:#f2eadf;padding:13px 18px;font-weight:900}.round.dark{background:#050505;color:#fff}.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.setting{background:#fffaf3;border:1px solid var(--line);border-radius:18px;padding:18px}.setting label{display:block;font-weight:900;margin-bottom:12px}.setting b{float:right;color:#7c4a20}.setting p{margin:10px 0 0;color:#776c61;font-size:13px;line-height:1.5}input[type=range],select{width:100%}select{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:800}.advanced{margin-top:16px;background:#fbf7ef;border:1px solid var(--line);border-radius:16px;padding:16px}.advanced summary{font-weight:900;cursor:pointer}.checkRow{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}.checkRow label{font-weight:800;color:#374151}.actions{display:flex;gap:12px;margin-top:22px}.primary{flex:1;border-radius:16px;background:#050505;color:#fff;padding:18px 20px;font-size:17px;font-weight:950}.primary.outline{background:#8b5e34}.disabled{opacity:.45;cursor:not-allowed}.note{margin-top:18px;background:#fff9ef;border:1px solid #ead4ba;border-radius:14px;padding:15px;color:#664117;line-height:1.65}.footerNote{margin-top:28px;color:#756b60;font-size:14px;line-height:1.8;border-top:1px solid var(--line);padding-top:26px}.topReset{display:none}
@media(max-width:900px){.scoreGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings{grid-template-columns:1fr}.hero h1{font-size:30px}}
@media(max-width:620px){.topbar{padding:12px 18px}.sub{display:none}.wrap{padding:22px 14px 40px}.hero{padding:42px 18px}.hero h1{font-size:27px}.lead{font-size:16px}.scoreGrid{grid-template-columns:1fr}.actions{flex-direction:column}.titleRow{flex-direction:column}.topReset{display:inline-block}.pill{display:none}}
.waveWrap{position:relative;margin-top:8px}
.waveHint{margin-top:8px;color:#8a8177;font-size:13px;line-height:1.5}
.round.active{outline:3px solid rgba(139,94,52,.35);box-shadow:0 0 0 6px rgba(139,94,52,.08)}
.seekBox{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;margin:0 0 18px;color:#5f554c;font-weight:900}
.seekBox input[type=range]{accent-color:#111827}
#waveCanvas{cursor:pointer;display:block}
@media(max-width:620px){.seekBox{grid-template-columns:42px 1fr 42px;font-size:13px}.playerRow{flex-wrap:wrap}}