@charset "utf-8";
.melodion .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.melodion .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.melodion .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 1080px; }
.melodion .melodion_wrap { position: absolute; top: -450px; left: 49%; transform: translateX(-50%); width: 100%; }
.melodion .melodion_wrap > img { width: 100%; height: 100%; display: block; }

/* 건반 공통 스타일 */
.melodion .key { position: absolute; cursor: pointer; transition: all 0.1s ease; }

/* 터치 디바이스에서 파란색 하이라이트 제거 */
.melodion .key,
.melodion .key img,
.melodion .key_highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 흰 건반 래퍼 */
.melodion .white_key_wrap { position: absolute; top: 710px; left: -110px; z-index: 1; }

/* 검은 건반 래퍼 */
.melodion .black_key_wrap { position: absolute; top: 636px; left: -86px; z-index: 5; }

/* 흰 건반 스타일 - 투명하게 (배경 이미지가 보이도록) */
.melodion .white_key {
    display: inline-block;
    width: 110px;
    height: 465px;
    background: transparent;
    border: none;
    border-radius: 20px;
}

/* 흰 건반 active 상태 - 노란색 (SVG로 대체) */
/*
.melodion .white_key.active {
    background: linear-gradient(to bottom, rgba(255, 242, 0, 0.7) 0%, rgba(255, 215, 0, 0.7) 20%, rgba(255, 204, 0, 0.7) 80%, rgba(255, 179, 0, 0.7) 100%);
    transform: translateY(3px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(255, 165, 0, 0.3);
}
*/

/* 검은 건반 스타일 - 투명하게 */
.melodion .black_key {
    display: inline-block;
    width: 79px;
    height: 295px;
    background: transparent;
    border: none;
    border-radius: 10px;
}

/* 검은 건반 active 상태 - 노란색 (SVG로 대체) */
/*
.melodion .black_key.active {
    background: linear-gradient(to bottom, rgba(255, 242, 0, 0.8) 0%, rgba(255, 215, 0, 0.8) 20%, rgba(255, 204, 0, 0.8) 80%, rgba(255, 179, 0, 0.8) 100%);
    transform: translateY(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(255, 215, 0, 0.3);
}
*/

/* 계이름 표시 */
.melodion .note {
    font-family: "KoPubWorld Dotum Bold";
    display: none;
    background-color: #ffffff;
    border: 2px solid #333333;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1;
}
.melodion .note.on { display: block; }
.melodion .note_top {
    text-align: center;
    font-size: 30px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
}
.melodion .note_top span { display: flex; align-items: center; white-space: nowrap; }
.melodion .note_top.on { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.melodion .note_bottom {
    position: absolute;
    font-size: 30px;
    top: 314px;
    left: 50%;
    transform: translateX(-50%);
}

/* 키보드 표시 */
.melodion .kb {
    color: #3f52ff;
    font-family: "KoPubWorld Dotum Bold";
    display: none;
    background-color: #ffffff;
    border: 2px solid #3f52ff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    justify-content: center;
    line-height: 56px;
}
.melodion .kb.on { display: flex; }
.melodion .kb_top {
    font-size: 28px;
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
}
.melodion .kb_bottom {
    position: absolute;
    font-size: 32px;
    top: 374px;
    left: 50%;
    transform: translateX(-50%);
}

/* 흰 건반 위치 - SVG 이미지 사용으로 clip-path 제거 */
#white_key1 { left: 423px; top: -5px; }
#white_key2 { left: 530.5px; top: -5px; }
#white_key3 { left: 638px; top: -4px; }
#white_key4 { left: 744px; top: -4px; }
#white_key5 { left: 850px; top: -3px; }
#white_key6 { left: 958px; top: -2px; }
#white_key7 { left: 1064px; top: -2px; }
#white_key8 { left: 1168px; top: -2px; }
#white_key9 { left: 1277px; top: -1px; }
#white_key10 { left: 1384px; top: -1px; }
#white_key11 { left: 1490px; }
#white_key12 { left: 1593px; }
#white_key13 { left: 1699px; }
#white_key14 { left: 1808px; top: 1px; }
/* 검은 건반 위치 - 이전 라벨 위치 기반 */
#black_key1 { left: 466px; top: 63.4px;}
#black_key2 { left: 577px; top: 64.4px; }
#black_key3 { left: 681px;top: 65.4px; }
#black_key4 { left: 892px; top: 64.4px; }
#black_key5 { left: 1004px; top: 64.4px; }                               
#black_key6 { left: 1212px; top: 66.4px; }
#black_key7 { left: 1323px; top: 66.4px; }
#black_key8 { left: 1429px; top: 66.8px; }
#black_key9 { left: 1635px; top: 65.4px; }
#black_key10 { left: 1746px; top: 64.4px; }

/* Shift 키 스타일 - 피아노 Enter와 동일 */
#white_key11 .kb_bottom { font-size: 27px; border-radius: 25px; width: 70px; }

/* 건반 하이라이트 스타일 - SVG 이미지 사용 */
.melodion .key_highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    pointer-events: none;
    display: none;
}

/* active 상태일 때만 하이라이트 표시 */
.melodion .key.active .key_highlight {
    display: block;
}

#section.melodion { }
.melodion .titleArea { box-shadow: none; }