@charset "utf-8";
.piano .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 1080px; }
.piano .piano_wrap { position: absolute; top: 275px; 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 .key_img { display: none; }
.piano .white_key.active { background: linear-gradient(to bottom, #f0f0f0 0%, #e8e8e8 20%, #e0e0e0 80%, #d8d8d8 100%); transform: translateY(3px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.1); }
.piano .black_key.active { background: linear-gradient(to bottom, #303030 0%, #1a1a1a 20%, #0a0a0a 80%, #000000 100%); transform: translateY(2px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.3); }
.piano .key { position: absolute; }
.piano .note { font-family: "NanumSquareNeo-dEb"; 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: block; }
.piano .note_top { text-align: center; font-size: 17px; position: absolute; top: 127px; left: 50%; transform: translateX(-50%); width: 40px; }
.piano .note_bottom { position: absolute; font-size: 24px; top: 453px; left: 50%; transform: translateX(-50%); }
.piano .kb { color: #3f52ff; font-family: "NanumSquareNeo-dEb"; display: none; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; align-items: center; justify-content: center; line-height: 1; }
.piano .kb.on { display: flex; }
.piano .kb_top { font-size: 28px; position: absolute; top: 221px; left: 50%; transform: translateX(-50%); }
.piano .kb_bottom { position: absolute; font-size: 32px; top: 528px; left: 50%; transform: translateX(-50%); }
#white_key1 { left: 0px; }
#white_key2 { left: 132px; }
#white_key3 { left: 264px; }
#white_key4 { left: 396px; }
#white_key5 { left: 528px; }
#white_key6 { left: 660px; }
#white_key7 { left: 792px; }
#white_key8 { left: 924px; }
#white_key9 { left: 1056px; }
#white_key10 { left: 1188px; }
#white_key11 { left: 1320px; }
#white_key12 { left: 1452px; }
#white_key13 { left: 1584px; }
#white_key14 { left: 1716px; }
#black_key1 { left: 80px; }
#black_key2 { left: 343px; }
#black_key3 { left: 476px; }
#black_key4 { left: 739px; }
#black_key5 { left: 872px; }
#black_key6 { left: 1003px; }
#black_key7 { left: 1266px; }
#black_key8 { left: 1398px; }
#black_key9 { left: 1663px; }
.piano .footer { bottom: initial; top: 175px; }