@charset "utf-8";
.ocarina .footer { position: fixed !important; bottom: 20px !important; right: 30px !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; }
.ocarina .footer img { height: 40px; width: auto; }
.ocarina#section { position: relative; min-height: 100vh; }
.ocarina .ocarina_wrap { position: absolute; top: 115px; left: 50%; transform: translateX(-50%) scale(0.7); width: 1157px; height: 475px; }
.ocarina_wrap .bg_img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; z-index: 1; pointer-events: none; }
.ocarina_wrap #ocarina_svg { position: absolute; left: 50%; top: 67%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 2; }
.ocarina_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.ocarina .sub_tit { display: block; font-size: 24px; text-align: center; line-height: 1.2; margin-left: 10px; }
.ocarina .titleArea h1 { margin-right: 0; }
.ocarina .btn { vertical-align: middle; }
.ocarina_key { background: #fff; background-size: 100%; cursor: pointer; position: absolute; width: 130px; height: 130px; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0 0 21px 3px rgba(0,0,0,0.15); }
.ocarina_key.top { top: 0; left: 300px; display: flex;;}
.ocarina_key.bottom { top: 173px; }
#ocarina_key0 { left: 90px; }
#ocarina_key1 { left: 408px; }
#ocarina_key2 { left: 578px; }
#ocarina_key3 { left: 900px; }
#ocarina_key4 { left: 1062px; }
#ocarina_key5 { left: 1225px; }
#ocarina_key6 { left: 1550px; }
#ocarina_key7 { left: 1717px; }
#ocarina_key8 { left: 0; }
#ocarina_key9 { left: 164px; }
#ocarina_key10 { left: 328px; }
#ocarina_key11 { left: 491px; }
#ocarina_key12 { left: 655px; }
#ocarina_key13 { left: 819px; }
#ocarina_key14 { left: 983px; }
#ocarina_key15 { left: 1147px; }
#ocarina_key16 { left: 1310px; }
#ocarina_key17 { left: 1474px; }
#ocarina_key18 { left: 1638px; }
#ocarina_key19 { left: 1802px; }
#ocarina_key20 { left: 1966px; }
.ocarina .note { color: #444444; font-family: 'KoPubWorld Dotum Bold'; font-weight: bold; display: inline-block; font-size: 44px; text-align: center; padding-top: 9px; width: 130px; }
.ocarina .note_top {padding: 0 9px;}
.ocarina .note.on { display: inline-block; }
.ocarina .note.active { color: #d71fd9 !important; text-shadow: 0 0 10px rgba(215, 31, 217, 0.5) !important; transform: scale(1.1) !important; transition: all 0.1s ease !important; }
.ocarina .note.note_bottom { color: #444444; font-weight: bold; font-size: 55px; padding-top: 20px;}
.ocarina .note_top span { display: flex; margin-left:15px; justify-content: center; }
.ocarina .note_top span img { mix-blend-mode: multiply; }
.ocarina .ocarina_key.active .note_top span img { mix-blend-mode: multiply; }
.ocarina .kb { color: #3f52ff; border: 2px solid #3f52ff; border-radius: 50%; font-family: 'KoPubWorld Dotum Bold'; font-size: 54px;  width: 80px; height: 80px; position: absolute; left: 50%; transform: translateX(-50%); text-align: center; align-items: center; display: none; }
.piano .kb { color: #3f52ff; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; justify-content: center; line-height: 56px; }
.ocarina .ocarina_key.active, .ocarina p.ocarina_key.active, #ocarina_key1.active, #ocarina_key2.active, #ocarina_key3.active, #ocarina_key4.active, #ocarina_key5.active, #ocarina_key6.active, #ocarina_key7.active, #ocarina_key8.active, #ocarina_key9.active, #ocarina_key10.active, #ocarina_key11.active, #ocarina_key12.active, #ocarina_key13.active, #ocarina_key14.active, #ocarina_key15.active, #ocarina_key16.active, #ocarina_key17.active, #ocarina_key18.active, #ocarina_key19.active, #ocarina_key20.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;
}
.ocarina .ocarina_key:hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.ocarina .kb.on { display: block; }
.ocarina .kb_top { top: -116px;     transform: translateX(-50%) translateY(2px);}
.ocarina .kb_bottom { bottom: -104px; }
.ocarina .key_wrap { width: 1619px; position: absolute; top: 745px; left: 30%; transform: translateX(-50%); height: 340px; z-index: 10; }
.ocarina .btn_space { top: 0px; background: #fff; cursor: pointer; position: absolute; width: 130px; height: 130px; border: 4px solid #dddedd; border-radius: 50%; box-shadow: 0 0 21px 3px rgba(0, 0, 0, 0.15); left: 0px; }
.ocarina .btn_space .kb { bottom: 90px; }
.ocarina .btn_space.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;
}
.ocarina .btn_space:hover { background-color: #f0f0f0; transform: scale(1.02); transition: all 0.1s ease; }
.ocarina .btn_space .note { font-size: 114px; position: relative; top: -40px; }

/* 범례 스타일 */
.hole_legend {
    position: absolute;
    top: 480px;
    right: -220px;
    display: flex;
    gap: 30px;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 30px;
    border-radius: 15px;
    border: 3px solid #dddedd;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    z-index: 10;
}
.legend_item {
    display: flex;
    align-items: center;
    gap: 1px;
}
.legend_circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #333;
}
.legend_circle.open {
    background: #fff;
}
.legend_circle.closed {
    background: #ffd700;
}
.legend_text {
    font-family: 'KoPubWorld Dotum Bold';
    font-size: 26px;
    color: #333;
}