@charset "utf-8";
.xylophone .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.xylophone .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.xylophone#section { }
.xylophone .xylophone_wrap { position: absolute; top: 220px; left: 50%; transform: translateX(-50%); width: 1650px; max-width: 90%; height: 650px; background: transparent; padding: 40px 20px; position: relative; overflow: visible; }
.xylophone .xylophone_wrap::before { display: none; }
.xylophone .xylophone_wrap::after { display: none; }
.xylophone_wrap .bg_img { display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.xylophone_wrap .bg { display: none; }
.xylophone .xy_key { width: 78px; cursor: pointer; position: absolute; top: 0px; z-index: 5; transition: all 0.1s ease; overflow: visible; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background: transparent; }
/* 건반 하이라이트 스타일 (피아노 방식) */
.xylophone .key_highlight {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom, #fff200 0%, #ffd700 20%, #ffcc00 80%, #ffb300 100%);
    opacity: 1;
    transition: opacity 0.1s ease;
}

/* active 상태 - 진한 하이라이트 */
.xylophone .xy_key.active .key_highlight {
    display: block;
    opacity: 1;
    background: linear-gradient(to bottom, #fff200 0%, #ffd700 20%, #ffcc00 80%, #ffb300 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(255, 165, 0, 0.3);
}

/* 위쪽 건반 (검은 건반 역할) - top, height + 둥근 사각형 clip-path */
#xy_key1 .key_highlight { top: 95px; height: 76%; clip-path: path('M6,0 Q0,-22 -1,-22 L1,302 Q0,284 10,303 L14,297 Q63,303 77,296 L78,6 Q78,0 72,0 Z'); }
#xy_key2 .key_highlight { top: 98px; height: 75%; clip-path: path('M14,0 Q5,-5 -2,10 L-10,294 Q0,291 6,291 L72,291 Q78,291 78,285 L78,6 Q78,0 72,0 Z'); }
#xy_key3 .key_highlight { top: 100px; height: 73%; clip-path: path('M6,0 Q0,0 0,6 L0,241 Q-4,253 8,265 L68,264 Q68,266 78,259 L78,6 Q78,0 72,0 Z'); }
#xy_key4 .key_highlight { top: 103px; height: 72%; clip-path: path('M6,0 Q0,0 0,6 L0,228 Q-3,257 6,257 L51,260 Q72,257 78,251 L78,6 Q78,0 72,0 Z'); }
#xy_key5 .key_highlight { top: 104px; height: 71%; clip-path: path('M6,0 Q0,0 0,6 L0,244 Q0,250 6,250 L72,250 Q78,250 78,244 L78,6 Q78,0 72,0 Z'); }
#xy_key6 .key_highlight { top: 106px; height: 69%; clip-path: path('M6,0 Q0,0 0,6 L0,224 Q0,230 6,230 L72,230 Q78,230 78,224 L78,6 Q78,0 72,0 Z'); }
#xy_key7 .key_highlight { top: 108px; height: 68%; clip-path: path('M6,0 Q0,0 0,6 L0,220 Q0,226 6,226 L72,226 Q78,226 78,220 L78,6 Q78,0 72,0 Z'); }
#xy_key8 .key_highlight { top: 110px; height: 65%; clip-path: path('M6,0 Q0,0 0,6 L0,199 Q0,205 6,205 L72,205 Q78,205 78,199 L78,6 Q78,0 72,0 Z'); }
#xy_key9 .key_highlight { top: 92px; height: 78%; clip-path: path('M6,0 Q0,0 0,6 L0,324 Q0,330 6,330 L72,330 Q78,330 78,324 L78,6 Q78,0 72,0 Z'); }
#xy_key22 .key_highlight { top: 92px; height: 78%; clip-path: path('M6,0 Q0,0 0,6 L0,319 Q0,325 6,325 L72,325 Q78,325 78,319 L78,6 Q78,0 72,0 Z'); }

/* 아래쪽 건반 (흰 건반 역할) - top, height + L자 모양 등 clip-path */
/* key10: L자 (왼쪽 위 잘림: 0 0, 58% 0, 58% 23%, 100% 23%) */
#xy_key10 .key_highlight { top: 0; height: 72%; clip-path: path('M6,0 Q0,0 0,6 L0,301 Q0,307 6,307 L72,307 Q78,307 78,301 L78,40 Q98,32 72,32 L61,32 Q48,32 48,26 L48,6 Q48 0 39,0 Z'); }
/* key11: 가운데 잘림 (42%~58%) */
#xy_key11 .key_highlight { top: 6px; height: 69%; clip-path: path('M30,0 Q30,0 30,6 L30,25 Q30,3 29,31 L6,31 Q0,31 0,30 L0,284 Q0,290 6,290 L72,290 Q78,290 78,284 L78,39 Q78,33 72,225 L81,33 Q45,33 47,27 L47,6 Q47,0 47,0 Z'); }
/* key12: 오른쪽 위만 있음 (0 20%, 30% 20%, 30% 0, 100% 0) */
#xy_key12 .key_highlight { top: 0; height: 70%; clip-path: path('M30,0 Q30,0 30,6 L30,25 Q30,31 18,31 L6,31 Q0,31 0,37 L0,304 Q0,310 6,310 L72,310 Q78,310 78,304 L78,6 Q78,0 72,0'); }
/* key13: 왼쪽 위 있고 오른쪽 잘림 */
#xy_key13 .key_highlight { top: 0; height: 68.5%; clip-path: path('M6,0 Q0,0 0,6 L0,265 Q0,271 6,271 L72,271 Q78,271 78,265 L78,28 Q78,18 72,20 L51,20 Q45,10 45,1 L46,6 Q50,0 40,0 Z'); }
/* key14: 왼쪽 위 잘림 */
#xy_key14 .key_highlight { top: 0; height: 67%; clip-path: path('M30,0 Q30,0 30,6 L30,13 Q30,16 18,16 L6,16 Q0,16 0,22 L0,284 Q0,290 6,290 L72,290 Q78,290 78,284 L78,25 Q78,19 72,225 L78,26 Q98,18 72,18 L61,18 Q48,18 48,12 L48,6 Q48 0 39,0 Z'); }
/* key15: 왼쪽 위 있고 오른쪽 잘림 */
#xy_key15 .key_highlight { top: 0; height: 66%; clip-path: path('M30,0 Q30,0 30,6 L30,13 Q30,16 18,16 L6,16 Q0,16 0,22 L0,284 Q0,290 6,290 L72,290 Q78,290 78,284 L78,25 Q78,19 72,225 L78,26 Q98,18 72,18 L61,18 Q48,18 48,12 L48,6 Q48 0 39,0 Z'); }
/* key16: 오른쪽 위만 있음 */
#xy_key16 .key_highlight { top: 0; height: 65%; clip-path: path('M30,0 Q30,0 30,6 L30,10 Q30,16 18,16 L6,16 Q0,16 0,22 L0,277 Q0,283 6,283 L72,283 Q78,283 78,277 L78,6 Q78,0 72,0'); }
/* key17: 왼쪽 위 있고 오른쪽 잘림 */
#xy_key17 .key_highlight { top: 0; height: 63%; clip-path: path('M6,0 Q0,0 0,6 L0,301 Q0,307 6,307 L72,307 Q78,307 78,301 L78,20 Q98,12 72,12 L61,12 Q48,12 48,6 L48,6 Q48 0 39,0 Z'); }
/* key18: 왼쪽 위 잘림 */
#xy_key18 .key_highlight { top: 0; height: 61%; clip-path: path('M30,0 Q30,0 30,6 L30,7 Q30,10 18,10 L6,10 Q0,10 0,16 L0,284 Q0,290 6,290 L72,290 Q78,290 78,284 L78,25 Q78,19 72,225 L78,20 Q98,12 72,12 L61,12 Q48,12 48,6 L48,6 Q48 0 39,0 Z'); }
/* key19: 왼쪽 위 있고 오른쪽 잘림 (30% 위치) */
#xy_key19 .key_highlight { top: 0; height: 60%; clip-path: path('M30,0 Q30,0 30,6 L30,5 Q30,11 18,11 L6,11 Q0,11 0,17 L0,277 Q0,283 6,283 L72,283 Q78,283 78,277 L78,6 Q78,0 72,0'); }
/* key20: 왼쪽 위 있고 오른쪽 잘림 */
#xy_key20 .key_highlight { top: 0; height: 58%; clip-path: path('M6,0 Q0,0 0,6 L0,265 Q0,271 6,271 L72,271 Q78,271 78,265 L78,18 Q78,12 72,12 L51,12 Q45,12 45,6 L45,6 Q45,0 39,0 Z'); }
/* key21: 특수 형태 (비스듬히 잘림) */
#xy_key21 .key_highlight { top: 0; height: 57%; clip-path: path('M30,0 Q30,0 30,6 L30,5 Q30,11 18,11 L6,11 Q0,11 0,17 L0,277 Q0,283 6,283 L72,283 Q78,283 78,277 L78,6 Q78,0 72,0'); }
/* key23: L자 */
#xy_key23 .key_highlight { top: 0; height: 74.5%; clip-path: path('M6,0 Q0,0 0,6 L0,318 Q0,334 6,334 L72,334 Q81,324 78,335 L78,84 Q84,33 200,41 L37,48 Q45,57 50,68 L45,-13 Q45,0 39,0 Z'); }
/* key24: 가운데 잘림 */
#xy_key24 .key_highlight { top: 0; height: 73.5%; clip-path: path('M39,0 Q28,0 43,6 L28,-30 Q33,16 29,44 L6,45 Q0,45 0,45 L0,300 Q0,314 6,324 L72,324 Q78,324 78,318 L78,52 Q78,46 72,46 L71,46 Q49,46 48,40 L47,6 Q48,0 39,0 Z'); }
/* key25: 오른쪽 위만 있음 */
#xy_key25 .key_highlight { top: 0; height: 72.5%; clip-path: path('M30,0 Q30,0 30,6 L30,38 Q30,44 18,44 L6,44 Q0,44 0,50 L0,304 Q0,310 6,310 L72,310 Q78,310 78,304 L78,6 Q78,0 72,0'); }
.xylophone .xy_key::before { display: none; }
.xylophone .key_img { display: none; }
.xylophone .xy_key.bottom { top: 345px; z-index: 1; }
.xylophone .xy_key.bottom::before { display: none; }
.xylophone .xy_key.active { background: transparent; }
.xylophone .xy_key.active .note_top, .xylophone .xy_key.active .note_bottom { font-size: 26px; }
.xylophone .xy_key.active .kb { width: 45px; height: 45px; font-size: 25px; }
.xylophone .act2 { display: none !important; }
.xylophone .act1 { display: none !important; }
#xy_key1 { height: 392px; left: 422px; top: -10px; }
#xy_key2 { height: 388px; left: 514px; top: -4px; }
#xy_key3 { height: 363px; left: 697px; top: 11px; }
#xy_key4 { height: 357px; left: 788px; top: 18px; }
#xy_key5 { height: 352px; left: 880px; top: 25px; }
#xy_key6 { height: 334px; left: 1063px; top: 39px; }
#xy_key7 { height: 327px; left: 1155px; top: 47px; }
#xy_key8 { height: 315px; left: 1338px; top: 62px; }
#xy_key9 { height: 423px; left: 147px; top: -32px; }
#xy_key10 { left: 376px; height: 419px; top: 349.5px;}
#xy_key11 { left: 468px; height: 420px; }
#xy_key12 { left: 560px; height: 404px; top: 352px; }
#xy_key13 { left: 651px; height: 395px; top: 354px; }
#xy_key14 { left: 743px; height: 385px; top: 356px; }
#xy_key15 { left: 835px; height: 376px; top: 358px; }
#xy_key16 { left: 926px; height: 368px; top: 359px; }
#xy_key17 { left: 1018px; height: 360px; top:360px; }
#xy_key18 { left: 1109px; height: 351px; top: 363px; }
#xy_key19 { left: 1201px; height: 344px; top: 362px; }
#xy_key20 { left: 1293px; height: 334px; top:365px; }
#xy_key21 { left: 1384px; height: 324px; top: 367px; }
#xy_key22 { left: 238px; height: 416px; top: -24px}
#xy_key23 { left: 101px; height: 448px; top: 344px; }
#xy_key24 { left: 193px; height: 441px; }
#xy_key25 { left: 284px; height: 430px; top: 348.5px; }
.xylophone .note { font-family: "KoPubWorld Dotum Bold"; display: none; background-color: #ffffff; border: 2px solid #333333; border-radius: 8px; padding: 8px 12px; line-height: 1; }
.xylophone .note.on { display: block; }
.xylophone .note_top span { display: flex; align-items: center; white-space: nowrap; }
.xylophone .note_top { text-align: center; font-size: 30px; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); width: 45px; }
.xylophone .note_top.on { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.xylophone .note_bottom { position: absolute; font-size: 30px; top: 38%; left: 50%; transform: translate(-50%, -50%); }
.xylophone .kb { color: #3f52ff; font-family: "KoPubWorld Dotum Bold"; 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; }
.xylophone .kb.on { display: flex; }
.xylophone .kb_top { font-size: 28px; position: absolute; top: 0%; left: 50%; transform: translateX(-50%); }
.xylophone .kb_bottom { position: absolute; font-size: 32px; bottom: 5%; left: 50%; transform: translateX(-50%); }