/* css/style.css — 원형 프로그레스 오디오 플레이어 (Circular Progress Audio Player) */

.melo-tts-container {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
}

/* 기존 가로형 <audio> 컨트롤 바 완전 숨김 */
.melo-tts-native {
    display: none !important;
}

/* ── 원형 버튼 ───────────────────────────── */
.melo-tts-circle {
    position: relative;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: #0073aa; /* 브랜드 컬러 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.melo-tts-circle:hover {
    background: #005a87;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.melo-tts-circle:active {
    transform: scale(0.96);
}

.melo-tts-circle:focus-visible {
    outline: 3px solid rgba(0, 115, 170, 0.45);
    outline-offset: 3px;
}

.melo-tts-circle:disabled {
    background: #9db4c0;
    cursor: default;
}

/* ── 진행 링 (SVG) : 버튼 테두리를 채움 ───── */
.melo-tts-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 12시 방향에서 시작 → 시계방향 진행 */
    pointer-events: none;
    overflow: visible;
}

.melo-tts-ring circle {
    fill: none;
    stroke-width: 4;
}

/* 재생 전/로딩: 은은한 회색(반투명 흰) 테두리 */
.melo-tts-ring-track {
    stroke: rgba(255, 255, 255, 0.28);
}

/* 진행분: 밝은 포인트 컬러(흰색). dasharray/offset 은 JS 가 제어 */
.melo-tts-ring-progress {
    stroke: #ffffff;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s linear;
}

/* ── 중앙 아이콘 (재생 ▶ / 일시정지 ▮▮) ──── */
.melo-tts-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.melo-tts-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

/* ── 로딩(연결 중/스트리밍·길이 미상) : 링 회전 스피너 ── */
.melo-tts-circle.is-loading .melo-tts-ring {
    animation: melo-ring-spin 0.9s linear infinite;
}
.melo-tts-circle.is-loading .melo-tts-ring-progress {
    stroke-dasharray: 40 200 !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
}

@keyframes melo-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── 캡션 (상태/시간) ─────────────────────── */
.melo-tts-caption {
    font-size: 15px;
    line-height: 1.4;
    color: inherit;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 접근성: 모션 최소화 선호 시 스피너 정지 */
@media (prefers-reduced-motion: reduce) {
    .melo-tts-circle.is-loading .melo-tts-ring {
        animation: none;
    }
}