@charset "utf-8";
.jang_gu .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.jang_gu .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
#section.jang_gu { }
.jang_gu .jang_gu_wrap { position: absolute; top: 390px; left: 50%; transform: translateX(-50%); width: 1219px; }
.jang_gu_wrap .bg_img { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 845px; }

/* 장구 타격 빛 효과 (북편만) - 반달 모양 */
.hit_effect { position: absolute; opacity: 0; pointer-events: none; z-index: 5; }
.hit_left {
    width: 84px;
    height: 350px;
    top: 65px;
    left: 185px;
    background: radial-gradient(ellipse 120% 50% at 100% 50%, rgba(255, 100, 100, 0.7) 0%, rgba(255, 50, 50, 0.4) 50%, rgba(255, 0, 0, 0) 100%);
    border-radius: 300px 0 0 300px;
}
.hit_effect.active { animation: hitGlow 0.35s ease-out; }
@keyframes hitGlow { 0% { opacity: 0; transform: scaleX(0.8); } 20% { opacity: 1; transform: scaleX(1.1); } 100% { opacity: 0; transform: scaleX(1); } }
#stick1 { position: absolute; width: 52px; top: -64px; left: 234px; transform: rotate(18deg); transform-origin: top; }
#stick2 { position: absolute; width: 125px; top: 226px; left: 975px; transform: rotate(-10deg); transform-origin: bottom; }
.stick_wrap.jang_gu_key1 #stick1 { animation: stick1 linear 0.35s; }
.stick_wrap.jang_gu_key2 #stick1 { animation: stick1 linear 0.35s; }
.stick_wrap.jang_gu_key2 #stick2 { animation: stick2 linear 0.30s; }
.stick_wrap.jang_gu_key3 #stick2 { animation: stick2 linear 0.30s; }
.stick_wrap.jang_gu_key4 #stick2 { animation: stick3 linear 0.20s; }
.stick_wrap.jang_gu_key5 #stick2 { animation: stick4 linear 0.8s; }
@keyframes stick1 { 0% { transform: rotate(18deg); } 50% { transform: rotate(-3deg); } 100% { transform: rotate(18deg); } }
@keyframes stick2 { 0% { transform: rotate(-10deg); } 50% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }
@keyframes stick3 { 0% { transform: rotate(-10deg); } 20% { transform: rotate(-25deg); } 50% { transform: rotate(-15deg); } 75% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }
@keyframes stick4 { 0% { transform: rotate(-10deg); } 6.25% { transform: rotate(-25deg); } 12.5% { transform: rotate(-10deg); } 18.75% { transform: rotate(-25deg); } 25% { transform: rotate(-10deg); } 31.25% { transform: rotate(-25deg); } 37.5% { transform: rotate(-10deg); } 43.75% { transform: rotate(-25deg); } 50% { transform: rotate(-10deg); } 56.25% { transform: rotate(-25deg); } 62.5% { transform: rotate(-10deg); } 68.75% { transform: rotate(-25deg); } 75% { transform: rotate(-10deg); } 81.25% { transform: rotate(-25deg); } 87.5% { transform: rotate(-10deg); } 93.75% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }
.jang_gu_key { background-size: 100%; cursor: pointer; position: absolute; width: 100px; height: 100px; background: #fff; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); transition: all 0.1s ease; }
.jang_gu_key:hover { background-color: #f0f0f0; transform: scale(1.02); }
.jang_gu_key.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    box-shadow:
        0 0 20px rgba(212, 165, 116, 0.6),
        0 0 40px rgba(255, 200, 130, 0.4),
        inset 0 0 30px rgba(255, 235, 200, 0.5);
    transform: scale(0.95);
    transition: all 0.15s ease-out;
}
/* 이미지는 버튼 안에 기본 표시 */
.jang_gu_key .note_img { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.jang_gu_key .note_img > img { max-width: 80%; max-height: 80%; object-fit: contain; }
/* 구음은 위에 표시, 기본 숨김 */
.key_txt { font-family: 'NanumSquareNeo-dEb'; font-size: 38px; text-align: center; position: absolute; top: -55px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: none; }
.key_txt.on { display: block; }
#jang_gu_key5 .key_txt { font-size: 27px; text-align: center; letter-spacing: -2px; }
#jang_gu_key1 { top: 270px; left: -140px; }
#jang_gu_key2 { top: -180px; left: 568px; }
#jang_gu_key3 { top: 270px; left: 1103px; }
#jang_gu_key4 { top: 270px; left: 1232px; }
#jang_gu_key5 { top: 270px; left: 1363px; }
.jang_gu .btnNote .off { letter-spacing: -1px; }
.jang_gu .btnNote { padding: 6px 10px; }
.jang_gu .kb { color: #3f52ff; font-family: 'KoPubWorld Dotum Bold'; font-size: 28px; display: none; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -68px; justify-content: center; align-items: center; }
#jang_gu_key2 .kb { border-radius: 25px; width: 140px; }
.jang_gu .kb.on { display: flex; }

/* 터치 모드 - 장구채, 장구손 이미지 (위치 반대로) */
.touch_wrap { display: none; }
.touch_wrap.on { display: block; }
#touch_hand { position: absolute; width: 465px; top: 34px; left: -230px; transform: rotate(-25deg); transform-origin: bottom center; }
#touch_stick { position: absolute; width: 165px; top: 148px; left: 1099px; transform: rotate(-10deg); transform-origin: bottom; }

/* 터치 모드 활성화 시 기본 스틱 숨기기 */
.jang_gu_wrap.touch_mode .stick_wrap { display: none; }
.jang_gu_wrap.touch_mode .touch_wrap { display: block; }

/* 터치 모드 애니메이션 (손과 채 위치 반대) */
.touch_wrap.jang_gu_key1 #touch_hand { animation: touch_hand1 linear 0.35s; }
.touch_wrap.jang_gu_key2 #touch_hand { animation: touch_hand1 linear 0.35s; }
.touch_wrap.jang_gu_key2 #touch_stick { animation: touch_stick1 linear 0.30s; }
.touch_wrap.jang_gu_key3 #touch_stick { animation: touch_stick1 linear 0.30s; }
.touch_wrap.jang_gu_key4 #touch_stick { animation: touch_stick2 linear 0.20s; }
.touch_wrap.jang_gu_key5 #touch_stick { animation: touch_stick3 linear 0.8s; }

@keyframes touch_hand1 { 0% { transform: rotate(-25deg); } 50% { transform: rotate(-5deg); } 100% { transform: rotate(-25deg); } }
@keyframes touch_stick1 { 0% { transform: rotate(-10deg); } 50% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }
@keyframes touch_stick2 { 0% { transform: rotate(-10deg); } 20% { transform: rotate(-25deg); } 50% { transform: rotate(-15deg); } 75% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }
@keyframes touch_stick3 { 0% { transform: rotate(-10deg); } 6.25% { transform: rotate(-25deg); } 12.5% { transform: rotate(-10deg); } 18.75% { transform: rotate(-25deg); } 25% { transform: rotate(-10deg); } 31.25% { transform: rotate(-25deg); } 37.5% { transform: rotate(-10deg); } 43.75% { transform: rotate(-25deg); } 50% { transform: rotate(-10deg); } 56.25% { transform: rotate(-25deg); } 62.5% { transform: rotate(-10deg); } 68.75% { transform: rotate(-25deg); } 75% { transform: rotate(-10deg); } 81.25% { transform: rotate(-25deg); } 87.5% { transform: rotate(-10deg); } 93.75% { transform: rotate(-25deg); } 100% { transform: rotate(-10deg); } }

/* 터치 버튼 스타일 */
.jang_gu .btnTouch { padding: 6px 10px; }

/* 터치 모드 시 jang_gu_key 숨기기 */
.jang_gu_wrap.touch_mode .jang_gu_key { display: none; }

/* 터치 모드 시 빛 효과 숨기기 */
.jang_gu_wrap.touch_mode .hit_effect { display: none; }

/* 터치 영역 스타일 */
.touch_area { display: none; position: absolute; cursor: pointer; border-radius: 50%; }
.jang_gu_wrap.touch_mode .touch_area { display: block; }
/* 손 영역: 장구 왼쪽 북편 위치 (손 이미지 근처) */
.touch_left { width: 460px; height: 460px; top: 60px; left: -325px; border-radius: 50%; }
/* 채 영역: 장구 오른쪽 채편 위치 (채 이미지 근처) */
.touch_right { width: 240px; height: 528px; top: 125px; left: 1040px; border-radius: 50%; transform: rotate(6deg); }
.touch_area.active { background: rgba(255, 200, 130, 0.3); }
.touch_area:hover { background: rgba(255, 200, 130, 0.15); }

/* 터치 모드일 때 장구 이미지 크게 */
.jang_gu_wrap.touch_mode .bg_img { transform: translateX(-50%) scale(1.35); top : -205px; }
.jang_gu_wrap.touch_mode .bg_img { transition: transform 0.3s ease; }
.jang_gu_wrap.touch_mode .bg_img { transition: transform 0.3s ease; }
.jang_gu_wrap.touch_mode .touch_wrap { transition: transform 0.3s ease; }