@charset "utf-8";
#section.kalimba { }
/* #contents를 titleArea 아래부터 브라우저 하단까지 */
#section.kalimba #contents {
    position: absolute;
    top: 126px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.kalimba .kalimba_wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; overflow: visible; }
.kalimba_wrap .bg_img { position: absolute; top: -201px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 0; opacity: 0.5; }
.kalimba_wrap .bg { position: absolute; top: -150px; left: 50%; transform: translateX(-50%); width: 100%; max-width: none; height: 920px; }
/* 칼림바 배경 이미지 - titleArea 바로 아래에서 시작, 비율 유지하며 하단까지 */
.kalimba_bg_img {
    position: absolute;
    left: 50%;
    top: -101px;
    transform: translateX(-50%);
    width: auto;
    height: 108%;
    object-fit: contain;
    object-position: center top;
    z-index: 0;
    max-width: none;
}

/* 칼림바 몸통 디자인 - 숨김 */
.kalimba_body {
    display: none;
    position: absolute;
    width: 1600px;
    height: 900px;
    left: 50%;
    /* top: 50px; */
    transform: translateX(-50%);
    z-index: 0;
}

/* 나무 몸통 */
.body_wood {
    position: absolute;
    width: 113%;
    left: -106px;
    height: 100%;
    background: linear-gradient(135deg,
        #a08060 0%,
        #b89070 15%,
        #c9a080 30%,
        #d4b090 50%,
        #c9a080 70%,
        #b89070 85%,
        #a08060 100%);
    border-radius: 40px;
    box-shadow:
        inset 0 8px 20px rgba(255, 255, 255, 0.25),
        inset 0 -8px 20px rgba(0, 0, 0, 0.3),
        0 15px 40px rgba(0, 0, 0, 0.4);
}

/* 나무 결 효과 */
.body_wood::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(139, 90, 43, 0.03) 50px,
            rgba(139, 90, 43, 0.03) 100px
        );
    border-radius: 40px;
}

/* 나무 질감 효과 */
.body_wood::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse 800px 100px at 30% 20%, rgba(160, 100, 50, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 600px 80px at 70% 40%, rgba(120, 80, 40, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 700px 90px at 40% 60%, rgba(140, 90, 45, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse 500px 70px at 80% 80%, rgba(130, 85, 42, 0.05) 0%, transparent 50%);
    border-radius: 40px;
}

/* 상단 브릿지 (건반을 고정하는 부분) */
.body_bridge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1550px;
    height: 80px;
    background: linear-gradient(180deg,
        #2a2a2a 0%,
        #3a3a3a 20%,
        #454545 50%,
        #3a3a3a 80%,
        #2a2a2a 100%);
    border-radius: 8px;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

/* 브릿지 나사 효과 */
.body_bridge::before,
.body_bridge::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, #555 0%, #333 50%, #222 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5);
}

.body_bridge::before {
    left: 50px;
}

.body_bridge::after {
    right: 50px;
}

/* 사운드 홀 - 비활성화 */
.body_sound_hole {
    display: none;
}

.kalimba .key_img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none; outline: none; padding: 0; margin: 0; }

/* 일반 상태 - 투명 건반 (이미지 위에 오버레이) */
.kalimba .act1 {
    background: transparent;
    border: none;
    border-radius: 0 0 35px 35px;
    box-shadow: none;
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
}

/* 밝은 메탈 광택 효과 - 비활성화 */
.kalimba .act1:before {
    display: none;
}

/* 눌렀을 때 - 밝은 금색 */
.kalimba .act2 {
    background: linear-gradient(180deg,
        #fff8e0 0%,
        #ffe066 10%,
        #ffd633 25%,
        #ffcc00 40%,
        #e6b800 60%,
        #cc9900 75%,
        #b38600 90%,
        #997300 100%);
    border: 2px solid #cc9900;
    border-radius: 0 0 35px 35px;
    box-shadow:
        0 3px 12px rgba(0,0,0,0.5),
        inset 0 1px 6px rgba(255,255,255,0.8),
        inset 0 -1px 4px rgba(0,0,0,0.3),
        0 0 25px rgba(255,204,0,0.7),
        0 0 40px rgba(255,204,0,0.4);
    position: relative;
}

/* 눌렀을 때 더 강한 광택 효과 */
.kalimba .act2:before {
    content: '';
    position: absolute;
    top: 20%;
    left: 25%;
    right: 25%;
    height: 40%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,255,200,0.6) 30%,
        transparent 50%,
        transparent 70%,
        rgba(0,0,0,0.2) 100%);
    border-radius: 0 0 20px 20px;
    pointer-events: none;
}
.kal_key { width: 83px; background-size: 100%; cursor: pointer; position: absolute; top: -150px; z-index: 10; }
.kalimba .act2 { display: none; }
.kalimba .kal_key.active .act2 { display: block; }
.kalimba .kal_key.active .act1 { display: none; }
#kal_key1 { left: 195px; height: 539px; transform: skewX(-4.8deg);}
#kal_key2 { left: 284px; height: 592px; transform: skewX(-4.4deg);}
#kal_key3 { left: 375.5px; height: 650px; transform: skewX(-3.8deg); }
#kal_key4 { left: 464.5px; height: 705px; transform: skewX(-3.5deg); }
#kal_key5 { left: 552.5px; height: 760px; transform: skewX(-2.4deg);}
#kal_key6 { left: 647px; height: 816px; transform: skewX(-2deg);}
#kal_key7 { left: 739.3px; height: 876px; transform: skewX(-1.2deg);}
#kal_key8 { left: 830px; height: 934px; transform: skewX(-0.55deg); }
#kal_key9 { left: 924px; height: 967px; }
#kal_key10 { left: 1017px; height: 910px; transform: skewX(0.55deg);}
#kal_key11 { left: 1106.3px; height: 850px; transform: skewX(1.7deg); }
#kal_key12 { left: 1197px; height: 795px; transform: skewX(2.3deg);}
#kal_key13 { left: 1288px; height: 736px; transform: skewX(2.8deg);}
#kal_key14 { left: 1377px; height: 683px; transform: skewX(3.5deg);}
#kal_key15 { left: 1466px; height: 626px; transform: skewX(3.8deg);}
#kal_key16 { left: 1553px; height: 570px; transform: skewX(4.6deg);}
#kal_key17 { left: 1640px; height: 524px; transform: skewX(5.8deg);}
.kalimba .note { position: absolute; display: flex; align-items: center; justify-content: center; font-family: "KoPubWorld Dotum Bold"; font-size: 26px; letter-spacing: -0.35rem; left: 50%; transform: translateX(-50%); text-align: center; bottom: 169px; display: none; background-color: #ffffff; border: 2px solid #333333; border-radius: 8px; padding: 6px 10px; line-height: 1.2; min-width: 30px; white-space: nowrap; transition: transform 0.1s ease;}
.kalimba .kal_key.active .note { transform: translateX(-50%) scale(0.9); }
.kalimba .kb { position: absolute; font-family: "KoPubWorld Dotum Bold"; font-size: 32px; left: 50%; transform: translateX(-50%); text-align: center; bottom: 245px; display: none; color: #3f52ff; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; align-items: center; justify-content: center; line-height: 1; transition: all 0.1s ease; margin-bottom: 50px; }
.kalimba .kb.active { /*background-color: #3f52ff; */color: #3f52ff;; transform: translateX(-50%) scale(0.95); box-shadow: 0 0 10px rgba(63, 82, 255, 0.5); }
.kalimba .kal_num { position: absolute; left: 50%; transform: translateX(-50%); bottom: 35px; display: none; font-family: "KoPubWorld Dotum Bold"; font-size: 40px; font-weight: 900; color: #333; padding: 8px 12px; min-width: 40px; text-align: center; line-height: 0.9; /*background-color: rgba(255,255,255,0.95);*/ border-radius: 8px; z-index: 20; white-space: nowrap; }
.kalimba .kal_num .dot-top { display: block; margin-bottom: -8px; }
/* 클릭 시 숫자 표시 */
.kalimba .kal_key.active .kal_num { display: block; }
/* 하늘색 (key1~8) */
#kal_key1 .kal_num, #kal_key2 .kal_num, #kal_key3 .kal_num, #kal_key4 .kal_num,
#kal_key5 .kal_num, #kal_key6 .kal_num, #kal_key7 .kal_num, #kal_key8 .kal_num {
    color: #069acc;
}
/* 핑크색 (key9~17) */
#kal_key9 .kal_num, #kal_key10 .kal_num, #kal_key11 .kal_num, #kal_key12 .kal_num,
#kal_key13 .kal_num, #kal_key14 .kal_num, #kal_key15 .kal_num, #kal_key16 .kal_num,
#kal_key17 .kal_num {
    color: #d1428c;
}
.kalimba .note.on { display: block; }
.kalimba .note_bottom { font-family: "KoPubWorld Dotum Bold"; position: absolute; font-size: 30px; left: 50%; transform: translateX(-50%); text-align: center; bottom: 105px; display: none; background-color: #ffffff; border: 2px solid #333333; border-radius: 8px; padding: 8px 12px; line-height: 1; }
.kalimba .note_bottom.on { display: block; }
.kalimba .kb.on { display: flex; }
.kalimba .kal_num.on { display: block; }
/* 조옮김 선택 */
.key_selector {
    position: relative;
}

.key_selector .key_select_text {
    position: static;
    transform: none;
    text-shadow: none;
}

.key_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background-color: white;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 226px;
    max-height: 340px;
    overflow-y: auto;
}

.key_option {
    padding: 12px 20px;
    font-size: 15px;
    font-family: 'NanumSquareNeo-cBd';
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee;
    justify-content: center;
}

.key_option:last-child {
    border-bottom: none;
}

.key_option:hover {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.key_option.selected {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

/* 조옮김 드롭다운 플랫 이미지 스타일 */
.key_option .key_flat_img {
    display: inline-block;
    width: 8px;
    height: 25px;
    vertical-align: baseline;
    /* margin-left: 2px;
    margin-right: 2px; */
    position: relative;
    top: -4px;
}

/* 기본 상태: 검은색 표시, 녹색/흰색 숨김 */
.key_option .key_flat_black {
    display: inline-block;
}

.key_option .key_flat_green {
    display: none;
}

.key_option .key_flat_white {
    display: none;
}

/* 호버 상태: 검은색 숨김, 녹색 표시 */
.key_option:hover .key_flat_black {
    display: none;
}

.key_option:hover .key_flat_green {
    display: inline-block;
}

/* 선택 상태: 검은색/녹색 숨김, 흰색 표시 */
.key_option.selected .key_flat_black {
    display: none;
}

.key_option.selected .key_flat_green {
    display: none;
}

.key_option.selected .key_flat_white {
    display: inline-block;
}

/* 샵/플랫 스타일 */
.kalimba .note .sharp,
.kalimba .note .flat {
    display: inline-flex;
    align-items: center;
}
.kalimba .note .sharp img,
.kalimba .note .flat img {
    width: 15px;
    height: 27px;
    margin-left: 6px;
    vertical-align: middle;
}

.kalimba .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; z-index: 100; }
.kalimba .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }