/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;800&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  font-family:'Pretendard', sans-serif;

  background:
    radial-gradient(circle at top left,#7c4dff,transparent 35%),
    radial-gradient(circle at bottom right,#00d4ff,transparent 30%),
    linear-gradient(135deg,#050816,#0f172a);

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:30px;

  color:white;
}

.app{

  width:100%;
  max-width:1400px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  border-radius:32px;

  padding:35px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.35);
}

/* 헤더 */

header{

  display:flex;
  align-items:center;
  gap:25px;

  margin-bottom:30px;
}

.logo{

  width:90px;
  height:90px;

  border-radius:24px;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:3rem;

  background:
    linear-gradient(
      135deg,
      #7c4dff,
      #00d4ff
    );
}

header h1{

  font-size:4rem;
  font-weight:800;

  background:
    linear-gradient(
      135deg,
      #00d4ff,
      #ff66ff
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

header p{

  margin-top:10px;

  font-size:1.2rem;

  opacity:0.8;
}

/* BPM */

.top-section{

  display:grid;

  grid-template-columns:
    2fr 1fr;

  gap:20px;

  margin-bottom:30px;
}

.bpm-box,
.beat-status{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:24px;

  padding:24px;
}

.bpm-box label{
  font-weight:700;
}

.bpm-number{

  font-size:3rem;
  font-weight:800;

  color:#00e5ff;

  margin:10px 0;
}

#tempo{
  width:100%;
}

.beat-status{

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.beat-status h2{

  font-size:3rem;
  color:#00e5ff;

  margin-top:10px;
}

/* 음표 버튼 */

.toolbar{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(160px,1fr));

  gap:16px;

  margin-bottom:35px;
}

.note-btn{

  border:none;

  border-radius:24px;

  padding:28px 15px;

  color:white;

  cursor:pointer;

  transition:0.2s;

  font-size:3rem;
  font-weight:700;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:10px;
}

.note-btn span{
  font-size:1rem;
}

.note-btn:hover{

  transform:
    translateY(-6px)
    scale(1.03);
}

.purple{
  background:#6d28d9;
}

.blue{
  background:#2563eb;
}

.cyan{
  background:#0891b2;
}

.green{
  background:#059669;
}

.yellow{
  background:#ca8a04;
}

.pink{
  background:#db2777;
}

/* 타임라인 */

.timeline-wrap{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:28px;

  padding:25px;

  margin-bottom:35px;
}

.timeline-top{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-bottom:20px;

  text-align:center;

  font-weight:700;
}

.timeline{

  display:flex;
  gap:20px;
}

.time-signature{

  width:100px;
  min-width:100px;

  height:220px;

  border-radius:24px;

  background:#020817;

  border:
    2px solid rgba(255,255,255,0.08);

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:4rem;
  font-weight:800;

  line-height:1.1;
}

.measure{

  flex:1;

  min-height:220px;

  background:#020817;

  border:
    2px solid rgba(255,255,255,0.08);

  border-radius:24px;

  position:relative;

  display:flex;
  align-items:center;

  padding:25px;

  gap:4px;

  overflow:hidden;
}

/* 재생선 */

#playhead{

  position:absolute;

  top:0;
  bottom:0;

  width:4px;

  background:#ff4d6d;

  left:0;

  box-shadow:
    0 0 20px rgba(255,77,109,0.8);

  opacity:0;
}

/* 음표 */

.note-block{

  height:130px;

  border-radius:20px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  color:white;

  font-weight:700;

  transition:0.15s;

  flex-shrink:0;

  position:relative;
}

.note-symbol{
  font-size:3rem;
}

.note-name{
  margin-top:10px;
  font-size:0.9rem;
}

/* 길이에 따른 크기 */

.w1{
  width:25%;
}

.w05{
  width:12.5%;
}

.w025{
  width:6.25%;
}

/* 음표별 색 */

.quarter{
  background:#7c3aed;
}

.quarterRest{
  background:#2563eb;
}

.eighthRest{
  background:#0891b2;
}

.eighthSingle{
  background:#059669;
}

.eighthPair{
  background:#ca8a04;
}

.sixteenthPair{
  background:#db2777;
}

/* 현재 재생 */

.playing{

  transform:
    translateY(-10px)
    scale(1.03);

  box-shadow:
    0 0 35px rgba(255,255,255,0.5);
}

/* 버튼 */

.controls{

  display:flex;
  gap:18px;

  flex-wrap:wrap;
}

.main-btn{

  flex:1;

  min-width:220px;

  border:none;

  border-radius:24px;

  padding:24px;

  color:white;

  font-size:1.2rem;
  font-weight:800;

  cursor:pointer;

  transition:0.2s;
}

.main-btn:hover{
  transform:translateY(-4px);
}

.play{
  background:#16a34a;
}

.undo{
  background:#ea580c;
}

.clear{
  background:#e11d48;
}

@media(max-width:900px){

  header{
    flex-direction:column;
    text-align:center;
  }

  header h1{
    font-size:2.5rem;
  }

  .top-section{
    grid-template-columns:1fr;
  }

  .timeline{
    flex-direction:column;
  }

  .time-signature{
    width:100%;
    height:100px;
  }

}