@charset "utf-8";

html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ffffff; overflow: hidden; }
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: 32px; font-family: 'NanumSquareRoundEB'; color: #333;border: 1px solid #e0e0e0; padding: 15px; border-radius: 24px;}
.menu_items { display: flex; align-items: center; justify-content: flex-end; flex-grow: 1; }
.titleArea .btn, .titleArea .volumeWrap, .titleArea .metronome.mini, .close { margin-left: 70px; }
.btn { font-family: 'nanumsquareRB'; background: #f8f8f8; border: 1px solid #ccc; border-radius: 20px; text-align: center; width: auto; padding: 8px 18px; height: 40px; color: #333; font-size: 18px; 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; }
.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;}
.volume_icon {width: 35px; height: 35px; margin-right: 10px;transition: all 0.3s ease;}
.volumeWrap { display: flex; align-items: center; background: #f8f8f8; border-radius: 20px; border: 1px solid #ccc; padding: 6px 15px; height: 40px; }
.volumeBar { width: 150px; 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 15px; height: 40px; }
.metro_txt { font-size: 18px; font-family: 'NanumSquareRoundEB'; color: #333; margin-right: 10px; }
.metro_img { width: 72px; height: 72px; margin-right: 10px; transition: all 0.3s ease; }
.metro_num { background-color: #fff; width: 50px; border-radius: 10px; height: 30px; border: 2px solid #ccc; margin: 0 8px; }
.metronome.mini .metro_num #bpm { font-size: 20px; width: 100%; text-align: center; color: #555; line-height: 26px; font-family: 'nanumsquareRB'; }
.plus, .minus { width: 24px; height: 24px; cursor: pointer; background-size: 100%; }
.metronome.on .plus { background-image: url(../images/common/btn_zoomIn.png); }
.metronome.on .minus { background-image: url(../images/common/btn_zoomOut.png); }
.metronome.mini .btnPlay { width: 60px; height: 30px; background-color: #86b3d9; text-align: center; border-radius: 10px; cursor: pointer; border: 1px solid #7aa8c8; margin: 0 8px; }
.metronome.mini .btnPlay>p { font-size: 16px; font-family: 'NanumSquareRoundEB'; color: #fff; line-height: 30px; }
.close { background: url(../images/common/btn_close.png) no-repeat; background-size: 100% 100%; width: 40px; height: 40px; 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: 40px; 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: rgba(255, 255, 255, 0.5); }
.btn_record:not(:last-child) { margin-right: 8px; }
.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; }

/* 멜로디 공유 컨트롤 스타일 */
.melody_share_controls { display: flex; align-items: center; background: #f0f8ff; border-radius: 20px; border: 1px solid #b3d9ff; padding: 6px 15px; height: 40px; 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: rgba(255, 255, 255, 0.7); }
.btn_share:not(:last-child) { margin-right: 8px; }
.btn_share.disabled { opacity: 0.4; cursor: not-allowed; }
.btn_share.disabled:hover { background: transparent; }
.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; }