@charset "utf-8";

html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ffffff; overflow: hidden !important; position: fixed; touch-action: none; }
body { display: flex; justify-content: center; align-items: center; }
body * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea { -moz-user-select: auto; -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; }
#container { width: 1920px; height: 1080px; background: #fff; position: absolute; top: 0; left: 0; overflow: hidden; }
#content { width: 100%; height: 100%; position: relative; top: 25px;}
#section { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 10px;  box-sizing: border-box; }
.titleArea { display: flex; align-items: center; justify-content: flex-start; padding: 0 40px; background: #ffffff; box-sizing: border-box; position: absolute; width: 100%; height: 125px; top: 0; left: 0; z-index: 100;  border: 1px solid #e0e0e0; border-radius: 24px; }
.titleArea h1 { 
    font-size: 48px; 
    font-family: 'Hakgyoansim Allimjang TTF R'; 
    color: #2c3e50;
    padding: 15px; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
    letter-spacing: 1px;
}
.menu_items { display: flex; align-items: center; justify-content: flex-end; flex-grow: 1; }
.titleArea .btn, .titleArea .volumeWrap, .titleArea .metronome.mini, .close { margin-left: 20px; }
.btn { font-family: 'Hakgyoansim Allimjang TTF R'; background: #f8f8f8; border: 1px solid #ccc; border-radius: 20px; text-align: center; width: auto; padding: 8px 18px; height: 48px; color: #333; font-size: 27px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 3px rgba(0,0,0,0.05); display: flex; justify-content: center; align-items: center; }
.btn:hover { background: #e9e9e9; border-color: #bbb; }
.btn p { position: static; transform: none; text-shadow: none; }
.btn.on { background: #337ab7; color: white; border-color: #2e6da4; }
.btn.on:hover { background: #2e6da4; border-color: #285e8e; }
.record_none_icon {width: 35px; height: 35px; margin-right: 10px;transition: all 0.3s ease;}
.record_play_icon {width: 35px; height: 35px; margin-right: 10px;transition: all 0.3s ease;}
.record_icon {width: 35px; height: 35px; margin-right: 10px;transition: all 0.3s ease;}
.record_paused_icon {width: 35px; height: 35px; margin-right: 10px; transition: all 0.3s ease;}
.volume_icon {width: 35px; height: 35px; margin-right: 10px;transition: all 0.3s ease; cursor: pointer;}
.volume_icon:hover { transform: scale(1.1); }
.volumeWrap { display: flex; align-items: center; flex-wrap: nowrap; background: #f8f8f8; border-radius: 20px; border: 1px solid #ccc; padding: 6px 15px; height: 48px; position: relative; min-width: 180px; width: auto; }
.volumeBar { width: 100px; height: 6px; background-color: #e9e9e9; border-radius: 15px; margin-left: 10px; position: relative; }
.volumeWrap>p { font-size: 18px; font-family: 'NanumSquareRoundEB'; color: #333; }
div.vseeker { background-color: #f87a27; height: 100%; width: 50%; border-radius: 15px 0 0 15px; }
.volumeSeekBtn { width: 18px; height: 18px; background-color: #ff6a07; border: 2px solid #f36100; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; }
.metronome.mini { display: flex; align-items: center; background: #f8f8f8; border-radius: 20px; border: 1px solid #ccc; padding: 6px 10px; height: 48px; }
.metro_txt { font-size: 18px; font-family: 'NanumSquareRoundEB'; color: #333; margin-right: 10px; }
.metro_img { width: 36px; height: 36px; margin-right: 10px; transition: all 0.3s ease; }
.metro_num { 
    background-color: #fff; 
    width: 60px; 
    border-radius: 10px; 
    height: 36px; 
    border: 2px solid #ccc; 
    margin: 0 6px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.metronome.mini .metro_num #bpm { 
    font-size: 24px; 
    width: 100%; 
    text-align: center; 
    color: #555; 
    line-height: normal; 
    font-family: 'nanumsquareRB'; 
    border: none; 
    background: transparent; 
    outline: none; 
    padding: 0; 
    margin: 0;
    vertical-align: middle;
}
.plus, .minus { width: 50px; height: 36px; cursor: pointer; background-size: 100%; }
.metronome.on .plus { background: #4CAF50; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; border: 2px solid #45a049; }
.metronome.on .plus:before { content: "+"; }
.metronome.on .minus { background: #4CAF50; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold; border: 2px solid #4CAF50; }
.metronome.on .minus:before { content: "−"; }
.metronome.mini .btnPlay { width: 70px; height: 36px; background-color: #86b3d9; text-align: center; border-radius: 10px; cursor: pointer; border: 1px solid #7aa8c8; margin: 0 6px; }
.metronome.mini .btnPlay>p { font-size: 20px; font-family: 'NanumSquareRoundEB'; color: #fff; line-height: 36px; }
.close { background: url(../images/common/btn_close.png) no-repeat; background-size: 100% 100%; width: 48px; height: 48px; cursor: pointer; border: none; background-color: transparent; }
.footer { position: absolute; bottom: 20px; right: 30px; }

/* 녹음 컨트롤 스타일 */
.recording_controls { display: flex; align-items: center; background: #f8f8f8; border-radius: 20px; border: 1px solid #ccc; padding: 6px 15px; height: 48px; margin-left: 20px; }
.btn_record { background: transparent; border: none; cursor: pointer; padding: 5px 8px; border-radius: 10px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.btn_record:hover { background: transparent; }
.btn_record:hover img { transform: scale(1.1); }
.btn_record:not(:last-child) { margin-right: -15px; }
.btn_record.recording { animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
.btn_record.playing { background: #4ecdc4; }
.btn_record.disabled { opacity: 0.4; cursor: not-allowed; }
.btn_record.disabled:hover { background: transparent; }
.btn_record.disabled:hover img { transform: none; }

/* 녹음 시작 버튼 비활성화 스타일 */
#btn_record_start.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

#btn_record_start.disabled:hover {
    background: transparent !important;
}

#btn_record_start.disabled:hover img {
    transform: none !important;
}

/* 시간 표시 스타일 */
.time_display {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 32px;
    color: #333;
    width: 230px;
    text-align: center;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time_display #current_time {
    color: #ff3535;
    font-weight: bold;
    margin-right: 2px;
}

.time_display #total_time {
    color: #666;
    margin-left: 2px;
}

/* 멜로디 공유 컨트롤 스타일 */
.melody_share_controls { display: flex; align-items: center; background: #f0f8ff; border-radius: 20px; border: 1px solid #b3d9ff; padding: 6px 15px; height: 48px; margin-left: 20px; }
.btn_share { background: transparent; border: none; cursor: pointer; padding: 5px 8px; border-radius: 10px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.btn_share:hover { background: transparent; }
.btn_share:hover img { transform: scale(1.1); }
.btn_share:not(:last-child) { margin-right: 8px; }
.btn_share.disabled { opacity: 0.4; cursor: not-allowed; }
.btn_share.disabled:hover { background: transparent; }
.btn_share.disabled:hover img { transform: none; }
.share_icon { width: 35px; height: 35px; transition: all 0.3s ease; }

.titleArea .volumeWrap { margin-right: 0; }
.titleArea .recording_controls { margin-left: 20px; }
.titleArea .melody_share_controls { margin-left: 20px; }
.titleArea .qr_controls { margin-left: 20px; }

/* 추가 호버 효과들 */
.metronome.mini .btnPlay:hover { background-color: #7aa8c8; border-color: #6b96bb; }

.metronome.on .plus:hover { background: #45a049; border-color: #3d8b40; transform: scale(1.05); }
.metronome.on .plus:active { transform: scale(0.95); }

.metronome.on .minus:hover { background: #45a049; border-color: #3d8b40; transform: scale(1.05); }
.metronome.on .minus:active { transform: scale(0.95); }

/* 메트로놈 컨트롤 비활성화 스타일 */
#bpm.disabled {
    background-color: #f0f0f0 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.metronome .plus.disabled,
.metronome .minus.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.metronome.on .plus.disabled,
.metronome.on .minus.disabled {
    background: #ccc !important;
    border-color: #999 !important;
    color: #666 !important;
}

.metronome.on .plus.disabled:hover,
.metronome.on .minus.disabled:hover {
    background: #ccc !important;
    border-color: #999 !important;
}

/* 커스텀 툴팁 스타일 */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    min-width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 28px;
    font-family: 'HakgyoansimSantteutdotumL';
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    
    /* Tooltip arrow */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* 모든 버튼의 툴팁 중앙 정렬 강제 적용 */
.btn_record.tooltip .tooltiptext,
.btn_share.tooltip .tooltiptext {
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
}

/* 개별 버튼 툴팁 위치 조정 */
#btn_record_start.tooltip .tooltiptext,
#btn_record_stop.tooltip .tooltiptext {
    transform: translateX(-53%) !important;
}

#btn_play_toggle.tooltip .tooltiptext {
    transform: translateX(-57%) !important;
}

/* 볼륨 버튼 툴팁 위치 조정 */
.volumeWrap .tooltip .tooltiptext {
    position: absolute !important;
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
}

/* QR 코드 버튼 툴팁 위치 조정 (오른쪽 끝 버튼) */
#btn_qr_code.tooltip .tooltiptext {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
}

#btn_qr_code.tooltip .tooltiptext::after {
    left: auto !important;
    right: 20px !important;
}



/* 녹음 안내 메시지 스타일 */
.recording_guide {
    position: absolute;
    top: 135px;
    right: 10px;
    padding: 8px 0;
    font-size: 32px;
    font-family: 'Hakgyoansim Allimjang TTF R';
    color: #333;
    z-index: 99;
    animation: fadeInSlide 0.3s ease-out;
    white-space: nowrap;
    min-width: 450px;
    display: flex;
    align-items: center;
}

.recording_guide::before {
    content: "ⓘ";
    font-size: 36px;
    margin-right: 8px;
    color: #4A90E2;
}

/* QR 코드 컨트롤 스타일 */
.qr_controls {
    display: flex;
    align-items: center;
    height: 48px;
    margin-left: 20px;
}

.btn_qr {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_qr:hover {
    background: transparent;
}

.btn_qr:hover img {
    transform: scale(1.1);
}

.qr_icon {
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
}

/* QR 팝업 스타일 */
.qr_popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr_popup {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: qrPopupSlide 0.3s ease-out;
}

.qr_popup_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.qr_popup_header h3 {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 24px;
    color: #333;
    margin: 0;
}

.qr_close_btn {
    background: none;
    border: none;
    font-size: 30px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr_close_btn:hover {
    color: #333;
}

.qr_popup_content {
    text-align: center;
}

.qr_code_container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

#qr_image {
    width: 250px;
    height: 250px;
    object-fit: contain;
}

.qr_guide_text {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 16px;
    color: #666;
    margin: 20px 0 0 0;
    line-height: 1.5;
}

@keyframes qrPopupSlide {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Alert 팝업 스타일 */
.alert_popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert_popup {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    text-align: center;
    animation: alertPopupSlide 0.3s ease-out;
    position: relative;
}

.alert_popup_header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.alert_popup_header h3 {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 24px;
    color: #333;
    margin: 0;
}

.alert_popup_content {
    text-align: center;
    margin-bottom: 30px;
}

.alert_popup_content p {
    font-family: 'NanumSquareRoundEB';
    font-size: 18px;
    color: #666;
    margin: 20px 0;
    line-height: 1.5;
    white-space: pre-line;
}

.alert_popup_footer {
    display: flex;
    justify-content: flex-end;
}

.alert_confirm_btn {
    background: #337ab7;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 16px;
    font-family: 'NanumSquareRoundEB';
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert_confirm_btn:hover {
    background: #2e6da4;
}

@keyframes alertPopupSlide {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.recording_guide .guide_icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin: 0 5px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 녹음 카운트다운 오버레이 스타일 */
.countdown_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.countdown_content {
    text-align: center;
    color: white;
}

.countdown_number {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 120px;
    font-weight: bold;
    color: #ff3535;
    text-shadow: 0 0 20px rgba(255, 53, 53, 0.5);
    margin-bottom: 20px;
    animation: countdownPulse 1s ease-in-out;
}

.countdown_text {
    font-family: 'Hakgyoansim Allimjang TTF R';
    font-size: 24px;
    color: white;
    margin-top: 20px;
    opacity: 0.9;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes countdownPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 카운트다운 애니메이션 클래스 */
.countdown-animate {
    animation: countdownPulse 1s ease-in-out !important;
}

.fadeOut {
    animation: fadeOut 0.3s ease-out forwards !important;
}