/* v13.8 · RY AUDIO VIEWER
   기준 배경: 1630 × 965
   모든 동적 UI 좌표는 이미지 기준 % 좌표로 고정한다.
*/

.ry-audio-modal[hidden]{display:none!important}

.ry-audio-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:2vh 2vw;
  background:rgba(0,5,9,.92);
  backdrop-filter:blur(5px);
}

/* 중요:
   배경 이미지 비율(1630/965)과 shell 비율을 동일하게 유지.
   object-fit:cover 사용 금지 — 좌표가 틀어지는 원인이 됨.
*/
.ry-audio-shell{
  position:relative;
  width:min(96vw, calc(94vh * 1630 / 965), 1630px);
  aspect-ratio:1630 / 965;
  overflow:hidden;
  background:#050708;
  box-shadow:
    0 30px 90px rgba(0,0,0,.78),
    0 0 0 1px rgba(218,185,120,.12);
}

.ry-audio-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* 새 배경은 이미 비어 있는 하드웨어 프레임이므로
   예전 검은 마스크와 중복 SIGNAL 라벨은 사용하지 않는다. */
.ry-wave-mask,
.ry-signal-mask,
.ry-signal-label{
  display:none!important;
}

/* ─────────────────────────────────────────
   실제 오디오 파형
   중앙 디스플레이 내부 전용
   ───────────────────────────────────────── */
.ry-audio-wave{
  position:absolute;
  left:29.0%;
  top:28.80%;
  width:60.5%;
  height:40.20%;
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(232,207,151,.28));
}

/* ─────────────────────────────────────────
   SIGNAL INTEGRITY
   배경의 우측 상단 계기판 안에 삽입
   ───────────────────────────────────────── */
.ry-signal-value{
  position:absolute;
  left:78.7%;
  top:20.5%;
  width:9.2%;
  font:400 clamp(13px,1.85vw,31px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#dfc27f;
  letter-spacing:.01em;
  text-align:left;
  text-shadow:0 0 10px rgba(217,185,120,.22);
  pointer-events:none;
}

.ry-signal-bars{
  position:absolute;
  left:78.7%;
  top:24.25%;
  width:10.1%;
  height:1.22%;
  border:1px solid rgba(217,185,120,.20);
  background:rgba(217,185,120,.06);
  overflow:hidden;
  pointer-events:none;
}

.ry-signal-bars>i{
  display:block;
  width:67%;
  height:100%;
  background:linear-gradient(90deg,#8d6b2d,#e2bd62);
  transition:width .8s ease;
}

/* ─────────────────────────────────────────
   PLAY / PAUSE
   배경 중앙 하단 recessed control plate 전체를 클릭 영역으로 사용
   아이콘 위치도 plate 내부 % 좌표
   ───────────────────────────────────────── */
.ry-audio-toggle{
  position:absolute;
  left:33.5%;
  top:74.7%;
  width:32.4%;
  height:11.8%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#efd396;
}

.ry-audio-toggle span{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:clamp(19px,2.3vw,40px);
  line-height:1;
  text-shadow:0 0 9px rgba(239,211,150,.45);
  transition:opacity .18s, filter .18s;
  pointer-events:none;
}

.ry-audio-toggle .play-icon{left:29.2%}
.ry-audio-toggle .pause-icon{right:29.2%}

.ry-audio-toggle[aria-pressed=false] .play-icon{
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(239,211,150,.48));
}
.ry-audio-toggle[aria-pressed=false] .pause-icon{opacity:.25}

.ry-audio-toggle[aria-pressed=true] .play-icon{opacity:.25}
.ry-audio-toggle[aria-pressed=true] .pause-icon{
  opacity:1;
  filter:drop-shadow(0 0 7px rgba(239,211,150,.48));
}

/* ─────────────────────────────────────────
   REC LED
   배경의 원형 빈 소켓 정중앙
   left/top은 소켓 중심점
   ───────────────────────────────────────── */
.ry-rec-led{
  position:absolute;
  left:87.37%;
  top:81.13%;
  width:1.35%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#d9473c;
  box-shadow:0 0 8px rgba(217,71,60,.6);
  opacity:.34;
  pointer-events:none;
}

.ry-audio-shell.is-playing .ry-rec-led{
  animation:ryRecPulse 1.7s ease-in-out infinite;
}

@keyframes ryRecPulse{
  0%,100%{
    opacity:.28;
    box-shadow:0 0 3px rgba(217,71,60,.28);
  }
  52%{
    opacity:1;
    box-shadow:0 0 13px rgba(217,71,60,.92);
  }
}

/* 닫기 버튼도 shell 기준 상대 위치 */
.ry-audio-close{
  position:absolute;
  right:1.00%;
  top:1.15%;
  z-index:3;
  width:2.35%;
  min-width:28px;
  aspect-ratio:1;
  border:1px solid rgba(217,185,120,.28);
  background:rgba(3,5,6,.82);
  color:#cbb17d;
  cursor:pointer;
  font-size:clamp(16px,1.35vw,22px);
  line-height:1;
}

/* 사건별 자료 제목/번호.
   배경 프레임을 침범하지 않도록 최하단 중앙 한 곳에만 표시. */
.ry-audio-caption{
  position:absolute;
  left:37%;
  bottom:1.35%;
  width:26%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  color:rgba(217,185,120,.48);
  font:500 clamp(7px,.68vw,11px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  pointer-events:none;
}

@media(max-width:700px){
  .ry-audio-modal{padding:1.5vh 1.5vw}
  .ry-audio-shell{width:min(97vw, calc(92vh * 1630 / 965))}
  .ry-audio-caption{display:none}
  .ry-audio-close{min-width:26px}
}

.record-attachments{margin-top:24px;padding-top:18px;border-top:1px solid rgba(140,160,180,.16)}
.record-attachments h3{margin:0 0 10px;font-size:13px;letter-spacing:.13em;color:#91a8bd}
.attachment-list{display:grid;gap:8px}
.attachment-open{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border:1px solid rgba(130,151,171,.18);background:rgba(8,15,22,.6);color:#d7e4ef;cursor:pointer;text-align:left}
.attachment-open small{color:#6d8296;letter-spacing:.08em}
@media(max-width:700px){.ry-audio-modal{padding:2vh 2vw}.ry-audio-shell{width:96vw}.ry-audio-close{width:30px;height:30px;font-size:18px}.ry-audio-caption{display:none}}