@charset "utf-8";
.piano .bg_img { position: absolute; top: 0; left: 0; width: 100%; height: 1080px; }
.piano .piano_wrap { position: absolute; top: 200px; left: 50%; transform: translateX(-50%); width: 1854px; height: 710px; }
.piano .white_key_wrap { position: absolute; top: 0; }
.piano .black_key_wrap { position: absolute; top: -10px; z-index: 5; }
.piano .white_key { display: inline-block; width: 132px; height: 738px; cursor: pointer; background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 20%, #f0f0f0 80%, #e8e8e8 100%); border: 2px solid #d0d0d0; border-radius: 0 0 12px 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: all 0.1s ease; }
.piano .black_key { display: inline-block; width: 105px; height: 438px; cursor: pointer; background: linear-gradient(to bottom, #404040 0%, #2a2a2a 20%, #1a1a1a 80%, #000000 100%); border: 2px solid #333333; border-radius: 0 0 8px 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.1s ease; }
.piano .key_img { display: none; }
.piano .white_key.active { background: linear-gradient(to bottom, #fff200 0%, #ffd700 20%, #ffcc00 80%, #ffb300 100%); transform: translateY(3px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(255, 165, 0, 0.3); }
.piano .black_key.active { 
    background: linear-gradient(to bottom, 
        rgba(255, 242, 0, 0.7) 0%, 
        rgba(255, 215, 0, 0.7) 20%, 
        rgba(255, 204, 0, 0.7) 80%, 
        rgba(255, 179, 0, 0.7) 100%),
        linear-gradient(to bottom, #404040 0%, #2a2a2a 20%, #1a1a1a 80%, #000000 100%); 
    transform: translateY(2px); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(255, 215, 0, 0.3); 
}
.piano .key { position: absolute; }
.piano .note { font-family: "KoPubWorld Dotum Bold"; display: none; background-color: #ffffff; border: 2px solid #333333; border-radius: 8px; padding: 8px 12px; line-height: 1; }
.piano .note.on { display: block; }
.piano .note_top span { display: flex; align-items: center; white-space: nowrap; }
.piano .note_top { text-align: center; font-size: 30px; position: absolute; top: 127px; left: 50%; transform: translateX(-50%); width: 45px; }
.piano .note_top.on { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.piano .note_bottom {
    position: absolute;
    font-size: 30px;
    top: 458px;
    left: 50%;
    transform: translateX(-50%);
}
.piano .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: 56px;
}
#white_key14 .kb { border-radius: 25px; width: 110px; }
.piano .kb.on { display: flex; }
.piano .kb_top { font-size: 28px; position: absolute; top: 221px; left: 50%; transform: translateX(-50%) translateY(2px); }
.piano .kb_bottom { position: absolute; font-size: 32px; top: 528px; left: 50%; transform: translateX(-50%); }
#white_key1 { left: -32px; }
#white_key2 { left: 105px; }
#white_key3 { left: 242px; }
#white_key4 { left: 379px; }
#white_key5 { left: 516px; }
#white_key6 { left: 653px; }
#white_key7 { left: 790px; }
#white_key8 { left: 927px; }
#white_key9 { left: 1064px; }
#white_key10 { left: 1201px; }
#white_key11 { left: 1338px; }
#white_key12 { left: 1475px; }
#white_key13 { left: 1612px; }
#white_key14 { left: 1749px; }
#black_key1 { left: 54px; }
#black_key2 { left: 326px; }
#black_key3 { left: 464px; }
#black_key4 { left: 736px; }
#black_key5 { left: 872px; }
#black_key6 { left: 1007px; }
#black_key7 { left: 1281px; }
#black_key8 { left: 1419px; }
#black_key9 { left: 1693px; }
.piano .footer { 
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
}

.piano .footer img {
    position: absolute;
    bottom: 35px;
    right: 20px;
    height: 40px;
    width: auto;
}

/* 빨간 녹음 버튼 스타일 */
.record_red_circle {
    width: 35px;
    height: 35px;
    background-color: #dc3545;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.record_red_circle:hover {
    background-color: #c82333;
    transform: scale(1.1);
}

/* Sharp/Flat 이미지 스타일 */
.sharp_img, .flat_img {
    position: relative;
    top: -6px;
    height: 30px;
    width: auto;
    margin-left: 2px;
    vertical-align: middle;
}

/* 피아노 페이지 전용 - 키보드 버튼 및 모든 버튼 모바일 최적화 */
.piano .btn, 
.piano .btnKb, 
.piano .btnNote,
#section.piano .btn,
#section.piano .btnKb,
#section.piano .btnNote {
    /* 터치 최적화 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
    
    /* 버튼 가시성 보장 */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    
    /* 최소 터치 영역 보장 */
    min-height: 44px !important;
    min-width: 44px !important;
    
    /* 브라우저별 호환성 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 모바일에서 버튼 크기 조정 */
@media (max-width: 768px) {
    .piano .btn, 
    .piano .btnKb, 
    .piano .btnNote,
    #section.piano .btn,
    #section.piano .btnKb,
    #section.piano .btnNote {
        min-height: 48px !important;
        padding: 10px 15px !important;
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .piano .btn, 
    .piano .btnKb, 
    .piano .btnNote,
    #section.piano .btn,
    #section.piano .btnKb,
    #section.piano .btnNote {
        min-height: 44px !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
    }
}

/* 강제 표시 - 숨겨질 수 있는 모든 경우 방지 */
.piano .btnKb,
#section.piano .btnKb {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}

/* iOS Safari 특별 처리 */
@supports (-webkit-touch-callout: none) {
    .piano .btn, 
    .piano .btnKb, 
    .piano .btnNote,
    #section.piano .btn,
    #section.piano .btnKb,
    #section.piano .btnNote {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
}