:root{--bg:#0b1020;--card:#161d33;--line:#2a3558;--fg:#eef2ff;--mut:#8f9bc0;--acc:#7c5cff;--acc2:#38bdf8;--ok:#34d399;--ng:#fb7185}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(900px 500px at 50% -120px,#2a2070 0%,transparent 70%),radial-gradient(600px 400px at 100% 100%,#0b3a5a55 0%,transparent 70%),var(--bg);color:var(--fg);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;min-height:100vh;overscroll-behavior:none;padding-bottom:env(safe-area-inset-bottom);-webkit-tap-highlight-color:transparent}
main{max-width:640px;margin:0 auto;padding:18px 16px 40px}

/* 브랜드 */
.brand{text-align:center;padding:14px 0 10px}
.notes{letter-spacing:10px;color:var(--acc2);opacity:.8;font-size:18px}
h1{margin:6px 0 4px;font-size:clamp(40px,13vw,68px);line-height:1.05;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,#fff 0%,#c4b5fd 45%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px #7c5cff66)}
h1 span{display:block;font-size:.42em;letter-spacing:2px;font-weight:700;margin-bottom:4px}
.sub{margin:0;color:var(--mut);font-size:13px;letter-spacing:3px}

h2{font-size:14px;color:var(--mut);margin:22px 0 10px;letter-spacing:1px}

button{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:transform .08s,border-color .15s,background .15s}
button:active{transform:scale(.97)}
button:hover{border-color:var(--acc)}
.row{display:flex;gap:8px}
.row button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;font-weight:600;padding:12px 4px}
.row button i{font-style:normal;font-size:26px}
button.on{background:linear-gradient(135deg,var(--acc),#4f46e5);border-color:transparent;color:#fff;box-shadow:0 6px 20px #7c5cff55}

.levels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.levels button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 14px;border-left:5px solid var(--c,var(--acc));background:linear-gradient(135deg,#1a2342,#131a30)}
.levels b{font-size:18px;letter-spacing:1px}
.levels span{font-size:12px;color:var(--mut)}
.lv1{--c:#34d399}.lv2{--c:#38bdf8}.lv3{--c:#facc15}.lv4{--c:#fb923c}.lv5{--c:#fb7185}.lv6{--c:#c084fc}
.hint{color:var(--mut);font-size:13px;text-align:center;margin-top:20px;line-height:1.6}

/* 게임 */
.top{margin-bottom:10px}
.homebtn{width:100%;font-size:16px;font-weight:700;padding:14px;background:linear-gradient(135deg,#1e2a52,#18213f);border:1px solid #4a5aa0;color:#dbe4ff}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--mut);margin:12px 2px}
.badge{background:#ffffff14;border:1px solid var(--line);padding:3px 12px;border-radius:999px;color:var(--fg);font-size:13px;font-weight:700;letter-spacing:1px}
.big{width:100%;padding:16px;font-size:17px;margin:6px 0}
.primary{background:linear-gradient(135deg,var(--acc),#4f46e5);border-color:transparent;color:#fff;font-weight:700}
.primary:disabled{opacity:.4}
#guide{text-align:center;color:var(--mut);margin:10px 0 0}
#piano{position:relative;height:clamp(240px,46vh,380px);margin:14px -16px;user-select:none;-webkit-user-select:none;touch-action:none;filter:drop-shadow(0 12px 24px #0008)}
.key{position:absolute;top:0;border:1px solid #000;border-radius:0 0 12px 12px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;font-size:clamp(14px,4.2vw,20px);font-weight:700}
.key.w{background:linear-gradient(#fff,#e7ebf6);color:#222;height:100%;z-index:1}
.key.b{background:linear-gradient(#3a3a46,#000);color:#eee;height:62%;z-index:2;font-size:clamp(11px,3.2vw,15px);padding-bottom:10px}
.key.sel{outline:4px solid var(--acc);outline-offset:-4px;background:#d9d0ff!important;color:#000}
.key.b.sel{background:#5b3fe0!important;color:#fff}
.key.ok{background:var(--ok)!important;color:#000}
.key.ng{background:var(--ng)!important;color:#fff}
#picked{text-align:center;min-height:24px;font-size:18px}
#feedback{text-align:center;min-height:28px;font-size:18px;font-weight:bold}

/* 결과 */
#result h2{text-align:center}
#score{text-align:center;font-size:48px;font-weight:900;margin:8px 0 16px;background:linear-gradient(135deg,#fff,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
#detail{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14px;background:var(--card);border-radius:12px;overflow:hidden}
#detail td,#detail th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
.col{display:flex;flex-direction:column;gap:8px}
.o{color:var(--ok)}.x{color:var(--ng)}

@media(orientation:landscape) and (max-height:500px){#piano{height:56vh}h1{font-size:34px}}

/* ===== 레벨/옵션 (설정 화면) ===== */
.levels{grid-template-columns:1fr}
.levels button{flex-direction:row;align-items:center;justify-content:space-between}
h2 small{font-weight:400;opacity:.7}
.opts{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 12px}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.optrow+.optrow{border-top:1px solid var(--line)}
.seg{display:flex;gap:6px}
.seg button{padding:8px 14px;border-radius:10px;font-size:14px}

/* ===== 게임 화면 (가로 전체) ===== */
#game{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:radial-gradient(900px 400px at 50% -100px,#2a2070 0%,transparent 70%),var(--bg);overflow:hidden}
#game[hidden]{display:none}
.gtop{display:flex;align-items:center;gap:10px;min-height:46px}
.gtop .homebtn{width:auto;padding:8px 14px;font-size:15px}
#qno{color:var(--mut);font-weight:700}
#status{flex:1;text-align:center;font-weight:700;font-size:clamp(13px,2.2vw,18px)}
#status.o{color:var(--ok)}#status.x{color:var(--ng)}
.replay{background:#ffffff14;font-weight:700;padding:10px 14px}
#submit{padding:10px 18px;font-weight:800;border-radius:12px}
.minirow{display:flex;align-items:center;gap:8px}
.arrow{width:44px;height:44px;padding:0;border-radius:12px;font-size:18px;background:#1c6b63;border-color:#3dd6c3;flex:none}
#mini{position:relative;flex:1;height:clamp(34px,9vh,52px);touch-action:none;cursor:ew-resize;border-radius:6px;overflow:hidden;background:#222;border:2px solid #333}
#miniKeys{position:absolute;inset:0}
#miniKeys .key{border-radius:0;padding:0;border-width:0 1px 0 0;font-size:9px;align-items:flex-end}
#miniKeys .key.w{background:#d9dce6}
#miniKeys .key.b{background:#111;height:60%}
#miniKeys em{font-style:normal;color:#456;font-size:9px;font-weight:700}
#win{position:absolute;top:0;bottom:0;border:3px solid #e8ff4d;background:#e8ff4d33;border-radius:4px;pointer-events:none;box-shadow:0 0 0 999px #00000066}
#game #piano{flex:1;height:auto;min-height:0;margin:0 -10px;filter:none}
#game .key{border-radius:0 0 10px 10px;flex-direction:column;justify-content:flex-end;gap:0;padding-bottom:10px}
#game .key span{font-size:clamp(13px,2.4vw,22px);line-height:1.1}
#game .key em{font-style:normal;font-size:clamp(11px,1.8vw,16px);opacity:.75}
#game .key.b{height:60%}
#game .key.b span{font-size:clamp(10px,1.7vw,15px)}
.key.off{opacity:.25;pointer-events:none}

/* 세로일 때 안내 */
#rotate{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;text-align:center;background:var(--bg);font-size:20px;font-weight:700}
#rotate .rot{font-size:56px}
#rotate .homebtn{margin-top:14px;width:auto}
@media(orientation:portrait){body.ingame #rotate{display:flex}}

#game .key.b{flex-direction:column;align-items:center;padding-bottom:8px}#game .key span{white-space:nowrap}#game .key.b span{font-size:clamp(9px,1.5vw,13px);letter-spacing:-1px}


/* ===== 처음부터 가로 화면 ===== */
@media(orientation:portrait) and (max-width:900px){#rotate{display:flex}}
#rotHome{display:none}
body.ingame #rotHome{display:inline-block}
@media(orientation:landscape) and (max-height:560px){
  main{max-width:none;display:grid;grid-template-columns:minmax(220px,36%) 1fr;gap:8px 22px;align-items:center;padding:10px 18px;min-height:100vh}
  .brand{padding:0}
  h1{font-size:clamp(34px,9vh,56px)}
  .sub{font-size:11px}
  #setup,#result{grid-column:2}
  #setup h2{margin:8px 0 6px}
  #setup .row button{flex-direction:row;justify-content:center;padding:8px 4px;gap:6px}
  #setup .row button i{font-size:20px}
  .levels{grid-template-columns:repeat(3,1fr);gap:8px}
  .levels button{flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 12px}
  .levels b{font-size:16px}
  .hint{margin-top:8px;font-size:12px}
  .optrow{padding:5px 0}
  #result{max-height:100vh;overflow:auto}
  #score{font-size:34px;margin:4px 0 8px}
  .col{flex-direction:row}
}

/* ===== 세로 화면 → 90도 회전하여 가로로 표시 ===== */
#rotate{display:none!important}
body.rot{overflow:hidden;position:fixed;inset:0;width:100%;height:100%}
body.rot #app{position:fixed;top:0;left:100vw;width:100vh;height:100vw;transform-origin:0 0;transform:rotate(90deg);overflow:auto}
body.rot #main{min-height:100%}
body.ls main{max-width:none;display:grid;grid-template-columns:minmax(200px,36%) 1fr;gap:8px 22px;align-items:center;padding:10px 18px;min-height:100%}
body.ls .brand{padding:0}
body.ls h1{font-size:clamp(34px,9vh,56px)}
body.rot h1{font-size:clamp(34px,9vw,56px)}
body.ls .sub{font-size:11px}
body.ls #setup,body.ls #result{grid-column:2}
body.ls #setup h2{margin:8px 0 6px}
body.ls #setup .row button{flex-direction:row;justify-content:center;padding:8px 4px;gap:6px;font-size:13px}
body.ls #setup .row button i{font-size:20px}
body.ls .levels{grid-template-columns:repeat(3,1fr);gap:8px}
body.ls .levels button{flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 12px}
body.ls .levels b{font-size:16px}
body.ls .hint{margin-top:8px;font-size:12px}
body.ls .optrow{padding:5px 0}
body.ls #result{max-height:100%;overflow:auto}
body.ls #score{font-size:34px;margin:4px 0 8px}
body.ls .col{flex-direction:row}
#timbre{flex-wrap:wrap}

/* ===== 연습 모드 ===== */
.hide{display:none!important}
.freeonly,.scaleonly{display:none}
body.free .quizonly{display:none!important}
body.free:not(.scale) .freeonly{display:flex}
body.scale .scaleonly{display:flex;align-items:center;gap:6px}
#scaleInfo{color:var(--mut);font-size:13px;white-space:nowrap}
#freeCtl{margin-left:auto}
#scaleCtl select{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 6px;max-width:150px}
#scalePlay{padding:9px 12px;font-weight:700}
.practice{grid-template-columns:1fr 1fr!important}
body.ls .practice{grid-template-columns:1fr 1fr!important}
.key.down{background:#b9a7ff!important;color:#000}
.key.b.down{background:#5b3fe0!important;color:#fff}
.key.inscale.w{background:linear-gradient(#fff,#d7fbe8);box-shadow:inset 0 -10px 0 #34d399}
.key.inscale.b{background:linear-gradient(#1f6b4d,#06281b)}
.key.root.w{box-shadow:inset 0 -14px 0 #f59e0b}
.key.root.b{background:linear-gradient(#b45309,#451a03)}
.key.hl{background:#fde68a!important;color:#000}
.key.b.hl{background:#f59e0b!important}