/* ========== 기본 (모바일 기준) ========== */
.record {}
.record .record-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 12px !important; margin-bottom:8px; }
.record .record-wrap .status { font-size:var(--f-body1); }

/* --- 버튼 --- */
.record .record-wrap .control-button { display:block; width:75px; height:75px; border-radius:100%; margin-top:12px; background:#F3393D center/34px no-repeat; }
.record .record-wrap .ready { background-image:url(../img/ielts/my_class/ico_record.svg); }
.record .record-wrap .ready.off, .record.disabled .record-wrap .control-button { background-color:#C5C5C5; pointer-events:none; cursor:default; }
.record .record-wrap .control-button.recording { animation:recording-blink 1s infinite; position:relative; }
.record .record-wrap .control-button.recording::after { content:''; width:30px; height:30px; background-color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* --- 애니메이션 --- */
@keyframes recording-blink { 0%,100%{ background-color:#F3393D; } 50%{ background-color:transparent; } }

/* --- 파일 업로드 --- */
#fileUploadWrapper { width:100%; }
.file-drag { width:100%; min-height:80px; background:#fff; border:2px dashed #C5C5C5; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:var(--f-size14); letter-spacing:-0.01px; color:#999; }
.file-drag.drag-over { border-color:#cc0011; background-color:#fad9d9; }
.file-drag ul { width:100%; padding:16px; }
.file-drag ul li { display:flex; align-items:center; }
.record .file-drag { margin-top:8px; min-width:280px; min-height:52px; height:52px; font-size:var(--f-body2); color:#666; border:1px dashed #999; border-radius:0; width:100%; }
.record .file-drag.drag-over { border-color:#cc0011; background-color:#fad9d9; }
.record .file-drag span { color:#339DFF; font-weight:700; }
.record .file-drag.disabled { pointer-events:none; cursor:default; border-color:#e7e7e7; }
.record input[type="file"] { display:none; }
.file-drag a { letter-spacing:-0.01px; color:#4C4BAE; margin:0 4px; }
.file-drag a:hover { text-decoration:underline; }
.d-none { display:none; }

/* --- 녹음 시간/파형 --- */
.record .record-wrap .rec-time { display:flex; align-items:center; font-weight:500; font-size:var(--f-body1); letter-spacing:-0.01px; color:#444; }
.record .record-wrap .rec-time .ico-recording { display:block; width:10px; height:10px; border-radius:10px; background-color:#F3393D; margin-right:8px; }
.record .record-wrap .voice-print { width:248px; height:52px; margin-top:10px; border-radius:26px; background:#fff url(../img/ielts/my_class/bg_voiceprint.svg) center/216px 38px no-repeat; }

/* --- 다운로드 --- */
.record .rec-down { text-align:right; margin:-8px 0 8px; }
.record .rec-down a { display:inline-flex; font-size:var(--f-body3); letter-spacing:-0.01px; color:#666; }
.record .rec-down a i { margin-left:4px; }

/* --- 플레이어 --- */
.record .record-wrap .player { display:none;  width: -webkit-fill-available; }
.record .record-wrap .player audio { display:none; }
.record .record-wrap .player.on { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }

/* 재생바 */
.record .record-wrap .player .playbar { display:flex; align-items:center; justify-content:space-between; margin: 0px auto; }
.record .record-wrap .player .playbar span { font-size:var(--f-body2); color:#333; }
.record .record-wrap .player .playbar .bar { width:180px; height:4px; background:#C5C5C5; margin:0 10px; }
.record .record-wrap .player .playbar .bar .bar-ing { width:0; height:4px; background:#46BC2F; position:relative; }
.record .record-wrap .player .playbar .bar .bar-ing::after { content:''; display:block; width:8px; height:8px; background:#46BC2F; border-radius:100%; position:absolute; top:50%; right:0; transform:translateY(-50%); margin-right:-4px; }

/* 버튼들 */
.record .record-wrap .player .playbtn { margin-top:12px; display:flex; align-items:center; justify-content:center; width:100%; }
.record .record-wrap .player .playbtn .ico-speaker { display:block; width:24px; height:24px; background:url(../img/ielts/my_class/ico_speaker.svg) center/24px no-repeat; position:relative; }
.record .record-wrap .player .playbtn .ico-speaker:hover, .record .record-wrap .player .playbtn .ico-speaker:active { background-image:url(../img/ielts/my_class/ico_speaker_on.svg); }
.record .record-wrap .player .playbtn .ico-play { display:block; width:30px; height:30px; background:url(../img/ielts/my_class/ico_play.svg) center/30px no-repeat; }
.record .record-wrap .player .playbtn .ico-play.stop { background-image:url(../img/ielts/my_class/ico_stop.svg); }
.record .record-wrap .player .playbtn .ico-setting { display:block; width:24px; height:24px; background:url(../img/ielts/my_class/ico_setting.svg) center/24px no-repeat; position:relative; }
.record .record-wrap .player .playbtn .ico-setting:hover, .record .record-wrap .player .playbtn .ico-setting:active { background-image:url(../img/ielts/my_class/ico_setting_on.svg); }

/* 플레이어 버튼 그룹 */
.record .record-wrap .player .btns { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; flex-wrap: wrap }
.record .record-wrap .player .btns button { flex:1; height:33px; padding:0 3px; white-space:nowrap; font-size:12px; background:transparent; border-radius:8px; }
/* .record .record-wrap .player .btns button:not(:first-child) { margin-left:1px; } */
.record .record-wrap .player .btns button:hover { background:#fff; }
.record .record-wrap .player .btns button.downloadFile { margin-top: 4px;}
.record .record-wrap .player .btns button.uploadAudio { margin: 0px 0px 0px 4px;}
/* --- 아이콘 --- */
.ico-add { display:inline-block; width:16px; height:16px; background:url(../img/ielts/my_class/mo/ico-add-file.svg) center/contain no-repeat; vertical-align:top; }
.ico-file-delete { display:inline-block; width:16px; height:16px; background:url(../img/ielts/my_class/ico_file_delete.svg) center/contain no-repeat; vertical-align:top; }

/* --- 버튼 공통 --- */
a.my-btn-default2, button.my-btn-default2 { display:inline-flex; padding:0 9px; min-width:106px; height:46px; background:#fff; border:1px solid #C5C5C5; border-radius:var(--b-radius0); align-items:center; justify-content:center; font-size:var(--f-size14); color:#333; }

/* --- 업로드 버튼 강조 --- */
.uploadAudio { background:linear-gradient(135deg, #ff6b35, #f7931e) !important; color:white !important; border:none !important; font-weight:bold !important; box-shadow:0 4px 12px rgba(255,107,53,0.3) !important; transition:all 0.3s ease !important; margin:0 3px; }

/* ========== PC (768px 이상) ========== */
@media screen and (min-width:768px) {
  .record { margin-left:auto; max-width:320px; margin-top:16px; }
  .record .record-wrap { min-width:320px; height:154px; padding:16px; margin-bottom:8px; border-radius:12px; background:#F6F6F6; }
  .record .record-wrap.h130 { height:130px; }
  .record .record-wrap .control-button { margin-top:24px; }
  .record .record-wrap .rec-time { line-height:20px; }
  .record .record-wrap .player .playbtn { justify-content:space-between; }
  .volume { display:none; position:absolute; bottom:30px; left:0; padding:8px 5px; background:#000; flex-direction:column; gap:4px; }
  .playx { display:none; position:absolute; bottom:-40px; right:-64px; padding:8px; background:#000; flex-direction:column; gap:4px; }
  .playx > span, .playx > label { font-size:var(--f-body2); line-height:19px; margin-bottom:5px; color:#fff; }


  .record .record-wrap .player .btns { flex-wrap: unset;}
  .record .record-wrap .player .btns button  { min-width: unset ;}
  .record .record-wrap .player .btns button:not(:first-of-type) { margin-left: 4px;}
  /* .record .record-wrap .player .playbar .bar { width: 160px;} */
  /* .record .record-wrap .player .btns button { width: 32%;min-width: unset; }
  .record .record-wrap .player .btns button:not(:first-of-type) { margin-left: 4px;}
  .record .record-wrap .player .btns button.downloadFile { margin-top: 0px;} */

}