@charset "utf-8";
.sogeum .footer { position: absolute; bottom: 28px; left: 0; right: 0; width: 100%; height: 60px; }
.sogeum .footer img { position: absolute; bottom: 35px; right: 20px; height: 40px; width: auto; }
.sogeum#section { }
.sogeum .sogeum_wrap { position: absolute; top: 370px; left: 50%; transform: translateX(-50%); width: 100%; height: 510px; }
.sogeum_wrap .bg_img { position: absolute; top: -110px; left: 50.5%; transform: translateX(-50%); width: 1820px; max-width: 120%; }
.sogeum_wrap .bg { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 100%; }
.sogeum .sogeum_key_active { position: absolute; width: 100%; top: 0; left: 0; }
.sogeum .sogeum_key_act { position: absolute; top: -25px; left: 874px; width: 827px; display: none; height: 150px; }
.sogeum .sogeum_key_act.active { display: block; }
.sogeumOn { background-color: #ffffff; border: 1px solid #000000; border-radius: 50%; display: inline-block; position: absolute; width: 48px; height: 48px; }
.sogeumOn.active {
    background: #ffd700;
    border: 2px solid #000;
}
.sogeumOn.half { border-radius: 100px 0 0 100px; width: 15px; height: 29px; top: -2px; left: 393px; }
.sogeumOn1 { top: -49px; left: 23px; }
.sogeumOn2 { top: -49px; left: 139px; }
.sogeumOn3 { top: -49px; left: 255px; }
.sogeumOn4 { top: -49px; left: 371px; }
.sogeumOn5 { top: -49px; left: 487px; }
.sogeumOn6 { top: -49px; left: 601px; }
.sogeum_key { background-size: 100%; cursor: pointer; position: relative; width: 95px; height: 95px; background: #fff; border: 4px solid #dddedd; border-radius: 20px; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); display: inline-block; margin-right: 11px; }
.sogeum .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; }
.sogeum .note.on { display: block; }
.sogeum .sogeum_key.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    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);
    transform: scale(0.95);
    transition: all 0.15s ease-out;
}
.sogeum .kb { color: #3f52ff; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; position: absolute; left: 50%; transform: translateX(-50%); display: none; bottom: -105px; border-radius: 50%; border: #3f52ff solid 2px; width: 50px; height: 50px; text-align: center; line-height: 50px; }
.sogeum .kb.on { display: block; }
.sogeum .kor_note { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 45px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1; white-space: nowrap; }
.sogeum .kor_note img { width: 70px; height: auto; display: block; }
.sogeum .kor_bottom { text-align: center; font-family: "KoPubWorld Dotum Bold"; font-size: 30px; position: absolute; left: 50%; top: -55px; transform: translateX(-50%); color: #444; white-space: nowrap; }
.sogeum .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; }
.sogeum .note.sogeum_bottom { position: absolute; top: 542px; left: 103px; width: 100%; }
.sogeum .key_box { display: flex; margin: auto; flex-direction: column; align-content: center; justify-content: center; align-items: center; width: 100%; position: absolute; top: 130px; left: 0; gap: 180px; }
.sogeum .key_row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; margin-top:120px; margin-left: 15px; }
.sogeum .key_row.top_row { margin-bottom: 10px; }
.sogeum .key_row.bottom_row { }
.sogeum .note>img { width: 47px; display: block; margin: auto; }
.sogeum .line1 { border: 4px solid #22a4db; width: 676px; height: 40px; position: absolute; top: 0; left: 0; }
.sogeum .line2 { border: 4px solid #49418f; width: 675px; height: 40px; position: absolute; top: 0; left: 798px; }
.sogeum .line3 { border: 4px solid #1aa15d; width: 108px; height: 40px; position: absolute; top: 0; left: 1596px; }
.sogeum .b_line { border-top: none; }
.sogeum .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; }
.sogeum .line1 p { width: 70px; }
.sogeum .line3.b_line p { font-size: 32px; width: 65px; padding: 0 2px; }
.sogeum .bg_txt { position: absolute; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; color: #333; }
.sogeum #bg_txt1 { transform: rotate(0); top: -155px; left: 330px; }
.sogeum #bg_txt2 { transform: rotate(0); top: -155px; left: 1670px; }
.sogeum .btn_space { background: #fff; background-image: url(../images/common/btn_space2.png); background-size: 34px; background-repeat: no-repeat; background-position: center; cursor: pointer; position: absolute; width: 100px; height: 100px; border: 3px solid #dddedd; border-radius: 50%; box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15); top: -181px; left: 1757px; }
.sogeum .btn_space .kb { top: -67px; font-family: "KoPubWorld Dotum Bold"; font-size: 28px; position: absolute; left: 42%; transform: translateX(-50%); display: none; width: 134px; }
.sogeum .btn_space .kb.on { display: block; }
.sogeum .btn_space.active {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-color: #d4a574;
    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);
    transform: scale(0.95);
    transition: all 0.15s ease-out;
}

/* 설명 박스 */
.sogeum .instruction_box {
    position: absolute;
    top: 415px;
    left: 1715px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
    font-family: "KoPubWorld Dotum Bold";
    font-size: 20px;
    line-height: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}
.sogeum .instruction_box p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1px;
}
.sogeum .instruction_box .dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #333;
}
.sogeum .instruction_box .dot.filled {
    background: #fff;
}
.sogeum .instruction_box .dot.empty {
    background: radial-gradient(circle at 30% 30%, #ffd700, #ffd700);
}

/* 취법 표시 (ㄷ자 bracket 스타일) */
.sogeum .chwi_labels {
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
}

.sogeum .chwi_label_group {
    position: absolute;
}

/* 저취 - Z(key1)부터 M(key7)까지 */
.sogeum .chwi_label_group.jwichi {
    left: 50%;
    transform: translateX(-50%);
    margin-left: -495px;
    width: 770px;
    height: 40px;
}

/* 평취 - A(key8)부터 J(key14)까지 */
.sogeum .chwi_label_group.pyeongchwi {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 275px;
    width: 770px;
    height: 40px;
}

/* 역취 - K(key15)부터 L(key16)까지 */
.sogeum .chwi_label_group.yeokchwi {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 825px;
    width: 220px;
    height: 40px;
}

/* 저취 라인 */
.sogeum .jwichi_line_left {
    position: absolute;
    left: -12px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}
.sogeum .jwichi_line_bottom {
    position: absolute;
    left: -9px;
    bottom: -5px;
    width: 93%;
    height: 3px;
    background: #000;
}
.sogeum .jwichi_line_right {
    position: absolute;
    right: 61px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}

/* 평취 라인 */
.sogeum .pyeongchwi_line_left {
    position: absolute;
    left: 54px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}
.sogeum .pyeongchwi_line_bottom {
    position: absolute;
    left: 54px;
    bottom: -5px;
    width: 93%;
    height: 3px;
    background: #000;
}
.sogeum .pyeongchwi_line_right {
    position: absolute;
    right: -2px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}

/* 역취 라인 */
.sogeum .yeokchwi_line_left {
    position: absolute;
    left: 61px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}
.sogeum .yeokchwi_line_bottom {
    position: absolute;
    left: 61px;
    bottom: -5px;
    width: 54%;
    height: 3px;
    background: #000;
}
.sogeum .yeokchwi_line_right {
    position: absolute;
    right: 38px;
    top: 5px;
    width: 3px;
    height: 100%;
    background: #000;
}

/* 저취 텍스트 */
.sogeum .jwichi_text {
    position: absolute;
    left: 46%;
    bottom: -30px;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 15px;
    font-family: "KoPubWorld Dotum Bold";
    font-size: 21px;
    color: #333;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    font-weight: 800;
}

/* 평취 텍스트 */
.sogeum .pyeongchwi_text {
    position: absolute;
    left: 55%;
    bottom: -30px;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 15px;
    font-family: "KoPubWorld Dotum Bold";
    font-size: 21px;
    color: #333;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    font-weight: 800;
}

/* 역취 텍스트 */
.sogeum .yeokchwi_text {
    position: absolute;
    left: 55.5%;
    bottom: -30px;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 15px;
    font-family: "KoPubWorld Dotum Bold";
    font-size: 21px;
    color: #333;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    font-weight: 800;
}

/* 취법별 border 색상 */
/* 기존 기본 스타일 유지 */
/* .sogeum .sogeum_key { border: 4px solid #dddedd; } */

/* 저취(낮은음) - 노란색: 임, 남, 무, 청황, 청태, 청고, 청중 (key1~key7) */
.sogeum #sogeum_key1,
.sogeum #sogeum_key2,
.sogeum #sogeum_key3,
.sogeum #sogeum_key4,
.sogeum #sogeum_key5,
.sogeum #sogeum_key6,
.sogeum #sogeum_key7 {
    border-color: #f0c000;
}

/* 평취(중간음) - 주황색: 청임, 청남, 청무, 중청황, 중청태, 중청고, 중청중 (key8~key14) */
.sogeum #sogeum_key8,
.sogeum #sogeum_key9,
.sogeum #sogeum_key10,
.sogeum #sogeum_key11,
.sogeum #sogeum_key12,
.sogeum #sogeum_key13,
.sogeum #sogeum_key14 {
    border-color: #ff8c00;
}

/* 역취(높은음) - 빨간색: 중청임, 중청남 (key15~key16) */
.sogeum #sogeum_key15,
.sogeum #sogeum_key16 {
    border-color: #e53935;
}