@charset "utf-8";
.piano .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 1080px; }
.piano .piano_wrap { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); width: 1854px; height: 710px; }
.piano .white_key_wrap { position: absolute; top: 0; }
.piano .black_key_wrap { position: absolute; top: -10px; z-index: 5; }
.piano .white_key { display: inline-block; width: 132px; height: 738px; cursor: pointer; background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 20%, #f0f0f0 80%, #e8e8e8 100%); border: 2px solid #d0d0d0; border-radius: 0 0 12px 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: all 0.1s ease; }
.piano .black_key { display: inline-block; width: 105px; height: 438px; cursor: pointer; background: linear-gradient(to bottom, #404040 0%, #2a2a2a 20%, #1a1a1a 80%, #000000 100%); border: 2px solid #333333; border-radius: 0 0 8px 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.1s ease; }
.piano .white_key.active { background: linear-gradient(to bottom, #fff200 0%, #ffd700 20%, #ffcc00 80%, #ffb300 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); }
.piano .black_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%), linear-gradient(to bottom, #404040 0%, #2a2a2a 20%, #1a1a1a 80%, #000000 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); }
.piano .key { position: absolute; }
.piano .note { font-family: "KoPubWorld Dotum Bold"; display: none; background-color: #ffffff; border: 2px solid #333333; border-radius: 8px; padding: 8px 12px; line-height: 1; }
.piano .note.on { display: block; }
.piano .note_top span { display: flex; align-items: center; white-space: nowrap; }
.piano .note_top { text-align: center; font-size: 30px; position: absolute; top: 127px; left: 50%; transform: translateX(-50%); width: 45px; }
.piano .note_top.on { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.piano .note_bottom { position: absolute; font-size: 30px; top: 458px; left: 50%; transform: translateX(-50%); }
.piano .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; }
#white_key14 .kb { border-radius: 25px; width: 110px; }
.piano .kb.on { display: flex; }
.piano .kb_top { font-size: 28px; position: absolute; top: 221px; left: 50%; transform: translateX(-50%) translateY(2px); }
.piano .kb_bottom { position: absolute; font-size: 32px; top: 528px; left: 50%; transform: translateX(-50%); }
#white_key1 { left: -32px; }
#white_key2 { left: 105px; }
#white_key3 { left: 242px; }
#white_key4 { left: 379px; }
#white_key5 { left: 516px; }
#white_key6 { left: 653px; }
#white_key7 { left: 790px; }
#white_key8 { left: 927px; }
#white_key9 { left: 1064px; }
#white_key10 { left: 1201px; }
#white_key11 { left: 1338px; }
#white_key12 { left: 1475px; }
#white_key13 { left: 1612px; }
#white_key14 { left: 1749px; }
#black_key1 { left: 54px; }
#black_key2 { left: 326px; }
#black_key3 { left: 464px; }
#black_key4 { left: 736px; }
#black_key5 { left: 872px; }
#black_key6 { left: 1007px; }
#black_key7 { left: 1281px; }
#black_key8 { left: 1419px; }
#black_key9 { left: 1693px; }
.piano .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.piano .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.record_red_circle { width: 35px; height: 35px; background-color: #dc3545; border-radius: 50%; transition: all 0.3s ease; }
.record_red_circle:hover { background-color: #c82333; transform: scale(1.1); }
/* 이미지 대신 글자 사용으로 아래 스타일 불필요 */
/* .sharp_img, .flat_img { position: relative; top: -6px; height: 30px; width: auto; margin-left: 2px; vertical-align: middle; } */
.piano .btn, .piano .btnKb, .piano .btnNote, #section.piano .btn, #section.piano .btnKb, #section.piano .btnNote { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; touch-action: manipulation !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; min-height: 44px !important; min-width: 44px !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
@media (max-width: 768px) { .piano .btn, .piano .btnKb, .piano .btnNote, #section.piano .btn, #section.piano .btnKb, #section.piano .btnNote { min-height: 48px !important; padding: 10px 15px !important; font-size: 18px !important; } }
@media (max-width: 480px) { .piano .btn, .piano .btnKb, .piano .btnNote, #section.piano .btn, #section.piano .btnKb, #section.piano .btnNote { min-height: 44px !important; padding: 8px 12px !important; font-size: 16px !important; } }
.piano .btnKb, #section.piano .btnKb { display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 1000 !important; }
@supports (-webkit-touch-callout: none) { .piano .btn, .piano .btnKb, .piano .btnNote, #section.piano .btn, #section.piano .btnKb, #section.piano .btnNote { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; } }