@charset "utf-8";
.cahon .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.cahon .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.cahon#section { }
.cahon .cahon_wrap { position: absolute; top: 320px; left: 50%; transform: translateX(-50%); width: 869px; height: 510px; }
.cahon_wrap .bg_img { position: absolute; top: -135px; left: 50%; transform: translateX(-50%); width: 900px; }
.cahon_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.cahon .cahon_act { position: absolute; width: 431px; top: 18px; left: 190px; }
.cahon .re_key_act { position: absolute; top: -1px; left: 463px; width: 577px; display: none; }
.cahon .re_key_act.active { display: block; }
.cahon_key { display: inline-block; cursor: pointer; position: absolute; top: 300px; transition: all 0.1s ease; }
.cahon_key:hover { transform: scale(1.02); transition: all 0.1s ease; }
.cahon_key:hover .surface { filter: brightness(1.1); }
.cahon_key.active { animation: cajonHit 0.15s ease-out forwards; }
@keyframes cajonHit {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.cahon .cahon_key.top { top: -86px; height: 137px; width: 189%; }
.cahon .cahon_key.middle { top: 50px; height: 150px; width: 177%; }
.cahon .cahon_key.bottom { top: 190px; height: 140px; width: 166%; }
.cahon .cahon_key.top .surface { height: 117%; }
.cahon .cahon_key.middle .surface { height: 100%; }
.cahon .cahon_key.bottom .surface { height: 88%; }
.cahon .cahon_key.top.left 
{
    position: absolute;
    left: 116px;
    top: 45px;
    width: 35%;
    height: 28%;
}
.cahon .cahon_key.top.right {
    position: absolute;
    right: 116px;
    top: 45px;
    width: 35%;
    height: 28%;
}
.cahon .cahon_key.middle.left {
    position: absolute;
    left: 82px;
    top: 200px;
    width: 39%;
    height: 28%;
}
.cahon .cahon_key.middle.right {
    position: absolute;
    right: 82px;
    top: 200px;
    width: 39%;
    height: 28%;
}
.cahon .cahon_key.bottom.left {
    position: absolute;
    left: 46px;
    top: 353px;
    width: 43%;
    height: 28%;
}
.cahon .cahon_key.bottom.right {
    position: absolute;
    right: 46px;
    top: 353px;
    width: 43%;
    height: 28%;
}
.surface { border-radius: 0; width: 100%; display: block; box-shadow: inset 0 2px 4px rgba(255,255,255,0.3); }
.surface_top { background: linear-gradient(to bottom, rgba(205, 155, 100, 0.95) 0%, rgba(180, 130, 80, 0.9) 100%); }
.surface_middle { background: linear-gradient(
  to bottom,
  rgba(207, 141, 167, 0.95) 0%,   /* #cf8da7 */
  rgba(180, 115, 140, 0.9) 100%   /* #b4738c 계열 */
); }
.surface_bottom { background: linear-gradient(
  to bottom,
  rgba(172, 163, 208, 0.95) 0%,   /* #aca3d0 */
  rgba(145, 138, 185, 0.9) 100%   /* #918ab9 계열 */
); }
#surface1 { clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#surface2 { clip-path: polygon(0% 0%, 93% 0%, 100% 100%, 0% 100%); position: absolute; right: 0; top: 0; width: 100%; height: 100%;}
#surface3 { clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 3% 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#surface4 { clip-path: polygon(0% 0%, 90% 0%, 97% 100%, 0% 100%); position: absolute; right: 0; top: 0; width: 100%; height: 100%;}
#surface5 { clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 4% 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#surface6 { clip-path: polygon(0% 0%, 88% 0%, 96% 100%, 0% 100%); position: absolute; right: 0; top: 0; width: 100%; height: 100%;}
.cahon .note { color: #013467; font-family: 'NanumSquareNeo-dEb'; display: inline-block; font-size: 31px; text-align: center; padding-top: 28px; width: 90px; }
.cahon .note_top span { display: block; }
.cahon .note.note_bottom { color: #000; font-size: 30px; padding-top: 26px; }
.cahon .kb { position: absolute; display: none; z-index: 5; color: #3f52ff; font-family: "KoPubWorld Dotum Bold"; background-color: #ffffff; border: 2px solid #3f52ff; border-radius: 50%; width: 50px; height: 50px; justify-content: center; line-height: 50px; text-align: center; font-size: 32px; }
.cahon .kb.on { display: flex; }
/* 키보드 위치 - 좌측 */
.cahon .cahon_key.left .kb { left: -125px; top: 52%; transform: translateY(-50%); }
/* 키보드 위치 - 우측 */
.cahon .cahon_key.right .kb { right: -125px; top: 52%; transform: translateY(-50%); }
.tone_txt1, .tone_txt2, .tone_txt3, .tone_txt4, .tone_txt5, .tone_txt6 {
    position: absolute;
    color: #ffffff;
    font-size: 50px;
    top: 50%;
    text-align: center;
    font-family: 'NanumSquareNeo-dEb';
    font-weight: bold;
    pointer-events: none;
    display: none;
}
/* 왼쪽 버튼 텍스트 - 사다리꼴 중심으로 오른쪽 이동 */
.tone_txt1 { left: 52%; transform: translate(-50%, -50%); }
.tone_txt3 { left: 53%; transform: translate(-50%, -50%); }
.tone_txt5 { left: 54%; transform: translate(-50%, -50%); }
/* 오른쪽 버튼 텍스트 - 사다리꼴 중심으로 왼쪽 이동 */
.tone_txt2 { left: 48%; transform: translate(-50%, -50%); }
.tone_txt4 { left: 47%; transform: translate(-50%, -50%); }
.tone_txt6 { left: 46%; transform: translate(-50%, -50%); }

/* 카혼 톤 범례 */
.cahon .cajon_legend {
    position: absolute;
    top: 200px;
    right: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.cahon .legend_item {
    display: flex;
    align-items: center;
    gap: 1px;
}

.cahon .legend_color {
    display: inline-block;
    width: 40px;
    height: 20px;
    border-radius: 3px;
}

.cahon .legend_fingertap {
    background: linear-gradient(to bottom, rgba(172, 163, 208, 0.95) 0%, rgba(145, 138, 185, 0.9) 100%)
}

.cahon .legend_slap {
    background: linear-gradient(to bottom, rgba(207, 141, 167, 0.95) 0%, rgba(180, 115, 140, 0.9) 100%);
}

.cahon .legend_bass {
    background: linear-gradient(to bottom, rgba(205, 155, 100, 0.95) 0%, rgba(180, 130, 80, 0.9) 100%);
}

.cahon .legend_text {
    font-family: 'NanumSquareNeo-cBd';
    font-size: 18px;
    color: #333;
}

.seat_txt{
    position: absolute;
    bottom: 100px;
    left: 914px;
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 30px;
    color: white;
}

/* 위에서 보는 모습입니다 안내 텍스트 */
.cahon .view_info {
    position: absolute;
    top: 145px;
    left: 213px;
    transform: translateX(-50%);
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 30px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cahon .view_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #fff;
    color: #3f52ff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    border: 2px solid #3f52ff;
}

#cajon_view::before {
    content: "ⓘ";
    font-size: 36px;
    color: #4A90E2;
}