/* IMPlay Web — DOS IMPlay 3.1 오마주 테마 */
:root {
  --dos-blue: #0000aa;
  --dos-cyan: #55ffff;
  --dos-yellow: #ffff55;
  --dos-white: #ffffff;
  --dos-gray: #a8a8a8;
  --gold: #f0b90b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #000033;
  color: var(--dos-white);
  font-family: 'DungGeunMo', 'Galmuri11', Consolas, 'Courier New', monospace;
}
.view { display: none; min-height: 100vh; padding-bottom: 40px; }
.view.active { display: block; }
.dos-frame {
  max-width: 900px; margin: 0 auto; padding: 18px 20px 60px;
  border-left: 4px double var(--dos-gray); border-right: 4px double var(--dos-gray);
  min-height: 100vh;
}
.dos-top {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--dos-white); padding-bottom: 10px; margin-bottom: 14px;
}
.dos-title { font-size: 22px; font-weight: 700; color: var(--dos-yellow); }
.dos-sub { color: var(--dos-cyan); font-size: 13px; }
.hidden { display: none !important; }

.search-row { margin-bottom: 12px; }
#search-input {
  width: 100%; padding: 10px 14px; font-family: inherit; font-size: 15px;
  background: #000066; border: 2px solid var(--dos-cyan); color: var(--dos-white);
  outline: none;
}

.song-list { list-style: none; max-height: 70vh; overflow-y: auto; }
.song-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; cursor: pointer; font-size: 15px;
}
.song-item:hover, .song-item:focus-visible { background: var(--dos-cyan); color: #000; outline: none; }
.song-item .no { color: var(--dos-cyan); width: 34px; flex-shrink: 0; }
.song-item:hover .no { color: #000; }
.song-item .ti { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-item .ar { color: var(--dos-gray); font-size: 13px; width: 130px; overflow: hidden; text-overflow: ellipsis; }
.song-item:hover .ar { color: #000; }
.song-item .du { width: 52px; text-align: right; color: var(--dos-cyan); font-size: 13px; }
.song-item:hover .du { color: #000; }

.dos-btn {
  background: var(--dos-gray); color: #000; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 8px 14px; cursor: pointer;
}
.dos-btn:hover { background: var(--dos-white); }
.dos-btn.wide { padding: 8px 26px; }

.pl-title { font-size: 19px; font-weight: 700; color: var(--dos-yellow); }

.screen {
  background: #000; border: 3px inset var(--dos-gray);
  padding: 24px 18px 18px; min-height: 300px;
}
.kar-line { text-align: center; line-height: 1.9; letter-spacing: 1px; }
.kar-line.prev, .kar-line.next { color: #6688bb; font-size: 16px; }
.kar-line.cur { font-size: 30px; font-weight: 700; color: var(--dos-white); margin: 8px 0; }
.kar-line.cur span.lit { color: var(--dos-yellow); }
.kar-line.cur span.unlit { color: var(--dos-white); }

#roll-canvas {
  width: 100%; height: 150px; display: block;
  background: #001133; border: 2px solid #2255aa; margin-top: 14px;
}

.ctrl-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.time-label { color: var(--dos-cyan); font-size: 14px; }
.progress-wrap {
  height: 12px; border: 1px solid var(--dos-gray); margin-top: 10px;
}
#progress-fill { height: 100%; width: 0%; background: var(--dos-yellow); }

@media (max-width: 520px) {
  .kar-line.cur { font-size: 21px; }
  .song-item .ar { display: none; }
}