@charset "utf-8";
.gayageum .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.gayageum .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.gayageum#section { }
.gayageum .gayageum_wrap { position: absolute; top: 370px; left: 50%; transform: translateX(-50%); width: 100%; height: 510px; }
.gayageum_wrap .bg_img { position: absolute; top: -190px; left: 3%; width: 1800px; max-width: 120%; }
.gayageum_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.gayageum .gayageum_key_active { position: absolute; width: 100%; top: 0; left: 0; }
.gayageum .gayageum_key_act { position: absolute; top: 24px; left: 988px; width: 827px; display: none; height: 150px; pointer-events: none; }
.gayageum .gayageum_key_act.active { display: block; }
.gayageumOn { display: none; }
.gayageumOn.half { border-radius: 100px 0 0 100px; width: 15px; height: 29px; top: -2px; left: 393px; }
.gayageumOn1 { top: 14px; left: -39px; }
.gayageumOn2 { top: 15px; left: 60.6px; }
.gayageumOn3 { top: 15px; left: 160px; }
.gayageumOn4 { top: 15px; left: 264px; }
.gayageumOn5 { top: 15px; left: 348px; }
.gayageumOn6 { top: 15px; left: 446px; }
.gayageum_key { background-size: 100%; cursor: pointer; position: relative; z-index: 10; width: 80px; height: 80px; background: #fff; border: 2px solid #dddedd; display: flex; align-items: center; justify-content: center; border-radius: 10%; transition: all 0.1s ease;}

.gayageum .note.on { display: block; }
.gayageum .gayageum_key.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%) !important;
    border-color: #d4a574 !important;
    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) !important;
    transform: scale(0.95) !important;
    transition: all 0.15s ease-out !important;
}
.gayageum .kb { display: none !important; }
.gayageum .kb.on { display: none !important; }
.gayageum .kor_note { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 45px; position: static; transform: none; line-height: 1; white-space: nowrap; }
.gayageum .kor_bottom { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 42px; position: absolute; left: 50%; bottom: -105px; transform: translateX(-50%); color: #444; white-space: nowrap; }
.gayageum .kor_bottom .dot-marker { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #444; font-weight: bold; letter-spacing: 5px; margin-left: 0px; width: 50px; }
.gayageum .note.gayageum_bottom { position: absolute; top: 542px; left: 103px; width: 100%; }
.gayageum .key_box { display: flex; margin: auto; flex-direction: column; align-content: center; justify-content: center; align-items: center; width: 100%; position: absolute; top: 275px; left: 0; gap: 10px; }
/* 줄 번호 행 */
.gayageum .string_number_row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 25px; padding-right: 128px;}
.gayageum .string_label { background: #a8d4e6; color: #333; font-family: 'NanumSquareNeo-dEb'; font-size: 24px; padding: 8px 16px; border-radius: 20px; margin-right: 10px; }
.gayageum .string_number { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-family: 'NanumSquareNeo-dEb'; font-size: 45px; color: #2e7d32; border: 2px solid #ddd; background: #fff; transition: all 0.15s ease-out; border-radius: 10px; cursor: pointer; }
.gayageum .string_number.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%) !important;
    border-color: #d4a574 !important;
    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) !important;
    transform: scale(0.95) !important;
    transition: all 0.15s ease-out !important;
}
/* 구음 행 - 기본 표시, on 클래스로 토글 */
.gayageum .gueum_row { display: none; flex-direction: row; align-items: center; justify-content: center; gap: 25px; }
.gayageum .gueum_row.on { display: flex; margin-left: 10px;}
/* 키보드 행 - 기본 숨김 */
.gayageum .keyboard_row { display: none; flex-direction: row; align-items: center; justify-content: center; gap: 55px; margin-left: 10px; }
.gayageum .keyboard_row.on { display: flex; }
.gayageum .kb_key { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; color: #3f52ff; border: 2px solid #3f52ff; border-radius: 50%; background: #fff; transition: all 0.15s ease-out; line-height: 56px; cursor: pointer; }
.gayageum .kb_key.active {
    transform: scale(0.95) !important;
    transition: all 0.15s ease-out !important;
}
.gayageum .note>img { width: 47px; display: block; margin: auto; }
.gayageum .line1 { border: 4px solid #22a4db; width: 676px; height: 40px; position: absolute; top: 0; left: 0; }
.gayageum .line2 { border: 4px solid #49418f; width: 675px; height: 40px; position: absolute; top: 0; left: 798px; }
.gayageum .line3 { border: 4px solid #1aa15d; width: 108px; height: 40px; position: absolute; top: 0; left: 1596px; }
.gayageum .b_line { border-top: none; }
.gayageum .b_line p { font-family: 'NotoM'; font-size: 32px; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background-color: #ffdcdc; padding: 0 10px; text-align: center; }
.gayageum .line1 p { width: 70px; }
.gayageum .line3.b_line p { font-size: 32px; width: 65px; padding: 0 2px; }
.gayageum #bg_txt1 { transform: rotate(0); top: -35px; left: 403px; }
.gayageum #bg_txt2 { transform: rotate(0); top: -35px; left: 1549px; }
.gayageum .btn_space { background-image: url(../images/common/btn_space2.png); background-size: 34px; top: -160px; right: 80px; }
.gayageum .btn_space .kb { font-size: 29px; top: -70px; }
.gayageum_strings { position: absolute; top: -473px; left: 41%; transform: translateX(-24%) rotate(90deg); width: 178px; max-width: 113%; height: 166%; pointer-events: none; }
.gayageum_string_segment { position: absolute; width: 4px; background: transparent; transition: all 0.1s ease; opacity: 0; transform-origin: top; }
/* 안족 전 세그먼트 - 전체 일자로 표시 */
.gayageum_string_segment.before { top: -49%; height: 150%; transform: rotate(0deg); }
/* 안족 후 세그먼트 - 숨김 처리 */
.gayageum_string_segment.after { display: none; }
.gayageum_string_segment.vibrating { animation: stringVibrate 0.5s ease-out forwards; }
/* 키보드 누르고 있는 동안 줄이 계속 보이도록 */
.gayageum_string_segment.holding {
    opacity: 1 !important;
    background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.9) 0%, rgba(255, 200, 50, 0.6) 50%, transparent 100%) !important;
    filter: blur(2px);
    width: 8px;
}
@keyframes stringVibrate { 0% { opacity: 1; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.9) 0%, rgba(255, 200, 50, 0.6) 50%, transparent 100%); filter: blur(0px); } 25% { opacity: 1; background: radial-gradient(ellipse at center, rgba(255, 200, 50, 0.95) 0%, rgba(255, 180, 30, 0.7) 50%, transparent 100%); filter: blur(2px); width: 8px; } 50% { opacity: 0.8; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.8) 0%, rgba(255, 200, 50, 0.5) 50%, transparent 100%); filter: blur(3px); width: 10px; } 75% { opacity: 0.5; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.6) 0%, rgba(255, 200, 50, 0.3) 50%, transparent 100%); filter: blur(2px); width: 8px; } 100% { opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.3) 0%, rgba(255, 200, 50, 0.1) 50%, transparent 100%); filter: blur(1px); width: 4px; } }
/* Individual control for each string segment - 일자로 표시 */
/* String 1 */
.gayageum_string_segment.before[data-string="1"] { left: 50px; top: -515px; height: 170%; transform: rotate(0.7deg); }
/* String 2 */
.gayageum_string_segment.before[data-string="2"] { left: 68px; top: -515px; height: 170%; transform: rotate(0.55deg); }
/* String 3 */
.gayageum_string_segment.before[data-string="3"] { left: 86px; top: -515px; height: 170%; transform: rotate(0.5deg); }
/* String 4 */
.gayageum_string_segment.before[data-string="4"] { left: 104px; top: -515px; height: 170%; transform: rotate(0.35deg); }
/* String 5 */
.gayageum_string_segment.before[data-string="5"] { left: 122px; top: -515px; height: 170%; transform: rotate(0.25deg); }
/* String 6 */
.gayageum_string_segment.before[data-string="6"] { left: 140px; top: -515px; height: 170%; transform: rotate(0.1deg); }
/* String 7 */
.gayageum_string_segment.before[data-string="7"] { left: 156px; top: -515px; height: 170%; transform: rotate(0deg); }
/* String 8 */
.gayageum_string_segment.before[data-string="8"] { left: 175px; top: -515px; height: 170%; transform: rotate(-0.1deg); }
/* String 9 */
.gayageum_string_segment.before[data-string="9"] { left: 192px; top: -515px; height: 170%; transform: rotate(-0.3deg); }
/* String 10 */
.gayageum_string_segment.before[data-string="10"] { left: 210px; top: -515px; height: 170%; transform: rotate(-0.4deg); }
/* String 11 */
.gayageum_string_segment.before[data-string="11"] { left: 228px; top: -515px; height: 170%; transform: rotate(-0.5deg); }
/* String 12 */
.gayageum_string_segment.before[data-string="12"] { left: 246px; top: -515px; height: 170%; transform: rotate(-0.6deg); }



/* 줄번호, 구음, 키보드 함께 호버 */
.gayageum .string_number_row:has(.string_number:nth-child(2):hover) ~ .gueum_row .gayageum_key:nth-child(1),
.gayageum .string_number:nth-child(2):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(2):hover) ~ .keyboard_row .kb_key:nth-child(1) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(3):hover) ~ .gueum_row .gayageum_key:nth-child(2),
.gayageum .string_number:nth-child(3):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(3):hover) ~ .keyboard_row .kb_key:nth-child(2) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(4):hover) ~ .gueum_row .gayageum_key:nth-child(3),
.gayageum .string_number:nth-child(4):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(4):hover) ~ .keyboard_row .kb_key:nth-child(3) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(5):hover) ~ .gueum_row .gayageum_key:nth-child(4),
.gayageum .string_number:nth-child(5):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(5):hover) ~ .keyboard_row .kb_key:nth-child(4) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(6):hover) ~ .gueum_row .gayageum_key:nth-child(5),
.gayageum .string_number:nth-child(6):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(6):hover) ~ .keyboard_row .kb_key:nth-child(5) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(7):hover) ~ .gueum_row .gayageum_key:nth-child(6),
.gayageum .string_number:nth-child(7):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(7):hover) ~ .keyboard_row .kb_key:nth-child(6) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(8):hover) ~ .gueum_row .gayageum_key:nth-child(7),
.gayageum .string_number:nth-child(8):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(8):hover) ~ .keyboard_row .kb_key:nth-child(7) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(9):hover) ~ .gueum_row .gayageum_key:nth-child(8),
.gayageum .string_number:nth-child(9):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(9):hover) ~ .keyboard_row .kb_key:nth-child(8) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(10):hover) ~ .gueum_row .gayageum_key:nth-child(9),
.gayageum .string_number:nth-child(10):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(10):hover) ~ .keyboard_row .kb_key:nth-child(9) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(11):hover) ~ .gueum_row .gayageum_key:nth-child(10),
.gayageum .string_number:nth-child(11):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(11):hover) ~ .keyboard_row .kb_key:nth-child(10) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(12):hover) ~ .gueum_row .gayageum_key:nth-child(11),
.gayageum .string_number:nth-child(12):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(12):hover) ~ .keyboard_row .kb_key:nth-child(11) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .string_number_row:has(.string_number:nth-child(13):hover) ~ .gueum_row .gayageum_key:nth-child(12),
.gayageum .string_number:nth-child(13):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .string_number_row:has(.string_number:nth-child(13):hover) ~ .keyboard_row .kb_key:nth-child(12) { transform: scale(1.02); transition: all 0.1s ease; }

/* 구음 호버 시 줄번호, 키보드 함께 호버 */
.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(1):hover) .string_number:nth-child(2),
.gayageum .gayageum_key:nth-child(1):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(1):hover) ~ .keyboard_row .kb_key:nth-child(1) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(2):hover) .string_number:nth-child(3),
.gayageum .gayageum_key:nth-child(2):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(2):hover) ~ .keyboard_row .kb_key:nth-child(2) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(3):hover) .string_number:nth-child(4),
.gayageum .gayageum_key:nth-child(3):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(3):hover) ~ .keyboard_row .kb_key:nth-child(3) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(4):hover) .string_number:nth-child(5),
.gayageum .gayageum_key:nth-child(4):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(4):hover) ~ .keyboard_row .kb_key:nth-child(4) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(5):hover) .string_number:nth-child(6),
.gayageum .gayageum_key:nth-child(5):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(5):hover) ~ .keyboard_row .kb_key:nth-child(5) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(6):hover) .string_number:nth-child(7),
.gayageum .gayageum_key:nth-child(6):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(6):hover) ~ .keyboard_row .kb_key:nth-child(6) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(7):hover) .string_number:nth-child(8),
.gayageum .gayageum_key:nth-child(7):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(7):hover) ~ .keyboard_row .kb_key:nth-child(7) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(8):hover) .string_number:nth-child(9),
.gayageum .gayageum_key:nth-child(8):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(8):hover) ~ .keyboard_row .kb_key:nth-child(8) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(9):hover) .string_number:nth-child(10),
.gayageum .gayageum_key:nth-child(9):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(9):hover) ~ .keyboard_row .kb_key:nth-child(9) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(10):hover) .string_number:nth-child(11),
.gayageum .gayageum_key:nth-child(10):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(10):hover) ~ .keyboard_row .kb_key:nth-child(10) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(11):hover) .string_number:nth-child(12),
.gayageum .gayageum_key:nth-child(11):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(11):hover) ~ .keyboard_row .kb_key:nth-child(11) { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.gueum_row .gayageum_key:nth-child(12):hover) .string_number:nth-child(13),
.gayageum .gayageum_key:nth-child(12):hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .gueum_row:has(.gayageum_key:nth-child(12):hover) ~ .keyboard_row .kb_key:nth-child(12) { transform: scale(1.02); transition: all 0.1s ease; }

/* 키보드 호버 시 줄번호, 구음 함께 호버 */
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(1):hover) .string_number:nth-child(2),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(1):hover) .gayageum_key:nth-child(1) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(1):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(2):hover) .string_number:nth-child(3),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(2):hover) .gayageum_key:nth-child(2) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(2):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(3):hover) .string_number:nth-child(4),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(3):hover) .gayageum_key:nth-child(3) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(3):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(4):hover) .string_number:nth-child(5),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(4):hover) .gayageum_key:nth-child(4) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(4):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(5):hover) .string_number:nth-child(6),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(5):hover) .gayageum_key:nth-child(5) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(5):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(6):hover) .string_number:nth-child(7),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(6):hover) .gayageum_key:nth-child(6) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(6):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(7):hover) .string_number:nth-child(8),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(7):hover) .gayageum_key:nth-child(7) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(7):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(8):hover) .string_number:nth-child(9),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(8):hover) .gayageum_key:nth-child(8) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(8):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(9):hover) .string_number:nth-child(10),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(9):hover) .gayageum_key:nth-child(9) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(9):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(10):hover) .string_number:nth-child(11),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(10):hover) .gayageum_key:nth-child(10) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(10):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(11):hover) .string_number:nth-child(12),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(11):hover) .gayageum_key:nth-child(11) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(11):hover { transform: scale(1.02); transition: all 0.1s ease; }

.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(12):hover) .string_number:nth-child(13),
.gayageum .key_box:has(.keyboard_row .kb_key:nth-child(12):hover) .gayageum_key:nth-child(12) { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .kb_key:nth-child(12):hover { transform: scale(1.02); transition: all 0.1s ease; }
.gayageum .note { color: #013467; font-family: 'KoPubBatangBold'; display: inline-block; font-size: 42px; text-align: center; padding-top: 21px; width: 100%; position: absolute; top: 98px; display: none; }


/* ========== 터치 모드 스타일 ========== */
/* 터치 버튼 */
.gayageum .btnTouch { cursor: pointer; }
.gayageum .btnTouch.on { background: #1f9ed9; }
.gayageum .btnTouch.on p.on { color: #fff; }

/* 터치 모드 활성화 시 구음/키보드 버튼 - 비활성화 스타일만 적용 (클릭은 가능) */
.gayageum .btnKorNote.disabled,
.gayageum .btnKb.disabled {
    opacity: 0.5;
    cursor: pointer;
}

/* 터치 모드 전체 래퍼 */
.gayageum .touch_mode_wrap {
    position: absolute;
    top: 220px;
    left: 56%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 700px;
    z-index: 500;
}

/* 확대 배경 이미지 */
.gayageum .touch_bg_img {
    position: absolute;
    top: -93px;
    left: 50%;
    transform: translateX(-50%);
    width: 1312px;
    height: auto;
}

/* 터치 가능한 줄 영역 컨테이너 */
.gayageum .touch_strings {
    position: absolute;
    top: 0;
    left: 43.5%;
    transform: translateX(-50%);
    width: 1130px;
    height: 929px;
}

/* 각 터치 줄 영역 */
.gayageum .touch_string {
    position: absolute;
    left: 0;
    width: 100%;
    height: 75px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.1s ease;
    border-radius: 10px;
}

.gayageum .touch_string:hover {
    background: rgba(255, 200, 100, 0.2);
}

.gayageum .touch_string.active {
    background: rgba(255, 200, 100, 0.4);
}

/* 각 줄의 위치 - 이미지 크기 530px 기준, 12줄 균등 배치 */
.gayageum .touch_string[data-string="1"] { top: -75px; }
.gayageum .touch_string[data-string="2"] { top: 0px; }
.gayageum .touch_string[data-string="3"] { top: 75px; }
.gayageum .touch_string[data-string="4"] { top: 150px; }
.gayageum .touch_string[data-string="5"] { top: 224px; }
.gayageum .touch_string[data-string="6"] { top: 298px; }
.gayageum .touch_string[data-string="7"] { top: 375px; }
.gayageum .touch_string[data-string="8"] { top: 450px; }
.gayageum .touch_string[data-string="9"] { top: 520px; }
.gayageum .touch_string[data-string="10"] { top: 597px; }
.gayageum .touch_string[data-string="11"] { top: 670px; }
.gayageum .touch_string[data-string="12"] { top: 745px; }

/* 터치 모드 줄 진동 효과 컨테이너 */
.gayageum .touch_string_effects {
    position: absolute;
    top: -93;
    left: 43.5%;
    transform: translateX(-50%);
    width: 1130px;
    height: 929px;
    pointer-events: none;
}

/* 각 줄 진동 효과 */
.gayageum .touch_string_effect {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.gayageum .touch_string_effect.vibrating {
    animation: touchStringVibrate 0.5s ease-out forwards;
}

@keyframes touchStringVibrate {
    0% { opacity: 1; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.9) 0%, rgba(255, 200, 50, 0.6) 50%, transparent 100%); height: 4px; }
    25% { opacity: 1; background: radial-gradient(ellipse at center, rgba(255, 200, 50, 0.95) 0%, rgba(255, 180, 30, 0.7) 50%, transparent 100%); height: 10px; }
    50% { opacity: 0.8; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.8) 0%, rgba(255, 200, 50, 0.5) 50%, transparent 100%); height: 14px; }
    75% { opacity: 0.5; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.6) 0%, rgba(255, 200, 50, 0.3) 50%, transparent 100%); height: 10px; }
    100% { opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 220, 100, 0.3) 0%, rgba(255, 200, 50, 0.1) 50%, transparent 100%); height: 4px; }
}

/* 각 줄 진동 효과 위치 - 줄 중앙에 배치 */
.gayageum .touch_string_effect[data-string="1"] { top: -42px; }
.gayageum .touch_string_effect[data-string="2"] { top: 33px; }
.gayageum .touch_string_effect[data-string="3"] { top: 107px; }
.gayageum .touch_string_effect[data-string="4"] { top: 183px; }
.gayageum .touch_string_effect[data-string="5"] { top: 258px; }
.gayageum .touch_string_effect[data-string="6"] { top: 331px; }
.gayageum .touch_string_effect[data-string="7"] { top: 407px; }
.gayageum .touch_string_effect[data-string="8"] { top: 482px; }
.gayageum .touch_string_effect[data-string="9"] { top: 557px; }
.gayageum .touch_string_effect[data-string="10"] { top: 630px; }
.gayageum .touch_string_effect[data-string="11"] { top: 705px; }
.gayageum .touch_string_effect[data-string="12"] { top: 780px; }

/* 터치 모드 키 박스 (왼쪽에 세로 배치) */
.gayageum .touch_key_box {
    position: absolute;
    top: -70px;
    left: -108px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* 줄 번호 열 */
.gayageum .touch_number_col {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.gayageum .touch_number {
    width: 50px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'NanumSquareNeo-dEb';
    font-size: 28px;
    color: #2e7d32;
    border: 2px solid #ddd;
    background: #fff;
    transition: all 0.15s ease-out;
    /* cursor: pointer; */
    border-radius: 12px;
}

/* .gayageum .touch_number:hover {
    border-color: #4CAF50;
} */

.gayageum .touch_number.active {
    background: #4CAF50;
    color: #fff;
    border-color: #2e7d32;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

/* 구음 열 */
.gayageum .touch_gueum_col {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.gayageum .touch_gueum {
    width: 50px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'KoPubWorld Dotum Bold';
    font-size: 28px;
    color: #333;
    border: 2px solid #ddd;
    background: #fff;
    transition: all 0.15s ease-out;
    /* cursor: pointer; */
    border-radius: 12px;
}

.gayageum .touch_gueum.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.6);
}

/* 키보드 열 */
.gayageum .touch_kb_col {
    display: flex;
    flex-direction: column;
    gap: 21px;
    margin-top: 1px;
}

.gayageum .touch_kb {
    width: 40px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'NanumSquareNeo-dEb';
    font-size: 22px;
    color: #333;
    border: 2px solid #ddd;
    background: #fff;
    transition: all 0.15s ease-out;
}

.gayageum .touch_kb { width: 48px; height: 50px; display: flex; align-items: center; justify-content: center; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; color: #3f52ff; border: 2px solid #3f52ff; border-radius: 50%; background: #fff; transition: all 0.15s ease-out; line-height: 56px; gap: 2px; cursor: pointer; }

.gayageum .touch_kb:hover {
    background: rgba(63, 82, 255, 0.1);
}

.gayageum .touch_kb.active {
    background: #1f9ed9;
    color: #fff;
    border-color: #1565c0;
    box-shadow: 0 0 15px rgba(31, 158, 217, 0.6);
}

/* 녹화 안내 메시지 - 가야금 페이지에서 z-index 높임 */
.gayageum .recording_guide {
    z-index: 600;
    pointer-events: none;
}

/* 첫 번째 줄은 터치 가능하도록 z-index 더 높게 */
.gayageum .touch_string[data-string="1"] {
    z-index: 700;
}