/* /g/data 해설 오디오 플레이어 — 모든 페이지 공통. 우상단 모서리에 고정된 작은 카드 */
:root{--ap-bg:rgba(18,22,36,.93);--ap-fg:#f2f5fb;--ap-dim:#9aa6bf;--ap-acc:#6aa2ff;--ap-line:rgba(255,255,255,.16)}
#ap-root{position:fixed;right:14px;top:84px;z-index:300;width:248px;font:13px/1.4 -apple-system,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;color:var(--ap-fg)}
#ap-root *{box-sizing:border-box}
:where(#ap-root) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0;min-width:0;min-height:0;box-shadow:none;text-transform:none;letter-spacing:normal}
#ap-root button:focus-visible,#ap-root input:focus-visible{outline:2px solid var(--ap-acc);outline-offset:2px}
/* 접힌 상태: 모서리의 작은 알약 */
.ap-open-btn{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 11px;margin-left:auto;border-radius:19px;background:var(--ap-bg);box-shadow:0 5px 18px rgba(0,0,0,.35);border:1px solid var(--ap-line)!important;font-weight:600;font-size:13px}
.ap-open-btn svg{width:18px;height:18px;fill:currentColor}
#ap-root.playing .ap-open-btn{background:var(--ap-acc);color:#0b1220}
.ap-panel{display:none;background:var(--ap-bg);border:1px solid var(--ap-line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.38);padding:9px 12px 11px;backdrop-filter:blur(8px)}
#ap-root.open .ap-panel{display:block}
#ap-root.open .ap-open-btn{display:none}
.ap-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.ap-title{font-weight:700;display:flex;align-items:center;gap:6px}
.ap-title svg{width:16px;height:16px;fill:currentColor}
.ap-seg{margin-left:auto;color:var(--ap-dim);font-size:12px;font-variant-numeric:tabular-nums}
.ap-cap{display:none;max-height:58px;overflow:hidden;color:var(--ap-dim);font-size:12px;margin:0 0 7px}
.ap-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.ap-transport{justify-content:center;gap:14px;margin-top:2px}
.ap-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.ap-btn:hover{background:rgba(255,255,255,.13)}
.ap-btn svg{width:18px;height:18px;fill:currentColor}
.ap-head .ap-btn{width:26px;height:26px}
.ap-head .ap-btn svg{width:16px;height:16px}
.ap-play{width:40px;height:40px;background:var(--ap-acc)!important;color:#0b1220}
.ap-play:hover{filter:brightness(1.1)}
.ap-play svg{width:20px;height:20px}
.ap-lbl{width:34px;flex:none;color:var(--ap-dim);font-size:11px}
.ap-pbar,.ap-speed-bar,.ap-vbar{flex:1;min-width:0}
.ap-speed-val{min-width:38px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ap-pm{width:24px;height:24px;border-radius:50%;font-size:16px;line-height:1;display:grid;place-items:center;border:1px solid var(--ap-line)!important;flex:none}
.ap-pm:hover{background:rgba(255,255,255,.13)}
.ap-mode{font-size:11px;padding:4px 9px!important;border-radius:12px;border:1px solid var(--ap-line)!important;white-space:nowrap;flex:none}
.ap-mode.on{background:rgba(106,162,255,.25)}
.ap-cc.ap-cc-off{opacity:.4}
#ap-root input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.25);cursor:pointer}
#ap-root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--ap-acc);border:0}
#ap-root input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ap-acc);border:0}
/* 이어서 듣기 안내 (자동 넘김 뒤 브라우저가 소리를 막았을 때) */
.ap-resume{position:fixed;right:14px;top:84px;z-index:310;background:var(--ap-acc);color:#0b1220;font:700 15px/1 "Noto Sans KR","Malgun Gothic",sans-serif;padding:14px 20px;border-radius:26px;border:0;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:ap-pulse 1.4s ease-in-out infinite}
@keyframes ap-pulse{50%{transform:scale(1.06)}}
/* 포인터 — 음성이 나올 때만 보인다 */
#ap-pointer{position:fixed;left:0;top:0;width:0;height:0;z-index:290;pointer-events:none;opacity:0;transition:opacity .25s}
#ap-pointer.mv{transition:transform .6s cubic-bezier(.22,.8,.3,1),opacity .25s}
#ap-pointer.on{opacity:1}
#ap-pointer svg{position:absolute;left:-3px;top:-2px;width:34px;height:34px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
#ap-pointer i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:3px solid #ffd54a;animation:ap-ring 1.2s ease-out infinite}
@keyframes ap-ring{0%{transform:scale(.3);opacity:.95}100%{transform:scale(1.5);opacity:0}}
/* 설명 중인 요소 반짝임 */
.ap-glow{animation:ap-glow 1.3s ease-in-out infinite;outline:3px solid rgba(255,213,74,.9);outline-offset:3px;border-radius:6px;position:relative;z-index:5}
@keyframes ap-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,213,74,.0)}50%{box-shadow:0 0 22px 6px rgba(255,213,74,.65)}}
/* 하나씩 보여주기 */
.ap-hidden{opacity:0!important;transform:translateY(10px)!important;pointer-events:none!important}
.ap-shown{animation:ap-pop .45s ease-out}
@keyframes ap-pop{0%{opacity:0;transform:translateY(12px) scale(.96)}100%{opacity:1;transform:none}}
/* 재생 중에는 반투명 — 마우스를 올리면 또렷해진다 */
#ap-root.open.playing:not(:hover):not(:focus-within) .ap-panel{opacity:.62;transition:opacity .25s}
#ap-root .ap-panel{transition:opacity .25s}
.ap-head{user-select:none}
/* 가로 막대 모양: 화면이 꽉 차서 카드가 들어갈 빈 곳이 없을 때 가장자리에 얇게 붙는다 */
#ap-root.bar.open{width:var(--ap-bw,760px)}
#ap-root.bar.open .ap-panel{display:flex;align-items:center;gap:12px;height:54px;padding:6px 14px;border-radius:27px}
#ap-root.bar .ap-cap{display:none!important}
#ap-root.bar .ap-row{margin:0}
#ap-root.bar .ap-transport{order:1;gap:4px}
#ap-root.bar .ap-rprog{order:2;flex:1 1 90px;min-width:70px}
#ap-root.bar .ap-rspeed{order:3;gap:5px}
#ap-root.bar .ap-vol{order:4}
#ap-root.bar .ap-head{order:5;margin:0;gap:2px}
#ap-root.bar .ap-title,#ap-root.bar .ap-lbl{display:none}
#ap-root.bar .ap-speed-bar{flex:none;width:56px}
#ap-root.bar .ap-vbar{flex:none;width:52px}
#ap-root.bar .ap-play{width:36px;height:36px}
#ap-root.bar .ap-btn{width:28px;height:28px}
#ap-root.bar .ap-seg{margin-left:0;min-width:34px;text-align:right}
/* 좁은 화면(휴대폰): 아래쪽에 붙는 가로 막대 */
#ap-root.dock{left:8px!important;right:8px!important;top:auto!important;width:auto}
#ap-root.dock .ap-lbl{width:28px}
#ap-root.dock .ap-panel{padding:8px 12px 10px}
#ap-root.dock .ap-head{cursor:default}
@media (max-width:720px){#ap-root{left:8px;right:8px;top:auto;bottom:8px;width:auto}.ap-resume{top:auto;bottom:70px;right:8px}}
@media (prefers-reduced-motion:reduce){#ap-pointer{transition:none}.ap-glow,#ap-pointer i,.ap-resume{animation:none}}
@media print{#ap-root,#ap-pointer,.ap-resume{display:none!important}}
#ap-pointer.ck i{animation:ap-click .5s ease-out 1;border-color:#ff5252}
@keyframes ap-click{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* 화면 아래 검은 바탕 자막 (CC 단추로 켜고 끔) */
#ap-sub{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;max-width:min(900px,92vw);box-sizing:border-box;background:#000;color:#fff;font:600 clamp(16px,1.9vw,22px)/1.5 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;padding:10px 20px;border-radius:6px;text-align:center;z-index:285;display:none;pointer-events:none;white-space:normal}
#ap-sub.on{display:block}
@media print{#ap-sub{display:none!important}}

/* 미니 막대: 화면이 꽉 차서 카드·가로 막대도 들어갈 빈 곳이 없을 때. 이전/재생/다음과 닫기만 남긴다 */
#ap-root.mini.open{width:var(--ap-bw,240px)}
#ap-root.mini.open .ap-panel{display:flex;align-items:center;gap:6px;height:50px;padding:5px 10px;border-radius:25px}
#ap-root.mini .ap-cap,#ap-root.mini .ap-rprog,#ap-root.mini .ap-rspeed,#ap-root.mini .ap-vol,#ap-root.mini .ap-title{display:none!important}
#ap-root.mini .ap-row{margin:0}
#ap-root.mini .ap-transport{order:1;gap:2px}
#ap-root.mini .ap-head{order:2;margin:0;gap:4px}
#ap-root.mini .ap-btn{width:28px;height:28px}
#ap-root.mini .ap-head .ap-btn{width:26px;height:26px}
#ap-root.mini .ap-play{width:34px;height:34px}
#ap-root.mini .ap-seg{margin-left:0;min-width:34px;text-align:right}
/* 휴대폰 도킹을 낮게: 머리줄 / 이동+진행 / 속도+모드 세 줄만 */
#ap-root.dock .ap-panel{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;padding:6px 12px 8px}
#ap-root.dock .ap-head{order:1;flex:0 0 100%;margin:0}
#ap-root.dock .ap-transport{order:2;flex:none;margin:0;gap:8px}
#ap-root.dock .ap-rprog{order:3;flex:1 1 120px;margin:0}
#ap-root.dock .ap-rspeed{order:4;flex:1 1 55%;margin:0}
#ap-root.dock .ap-vol{order:5;flex:0 0 auto;margin:0;margin-left:auto}
#ap-root.dock .ap-spk,#ap-root.dock .ap-vbar{display:none}
#ap-root.dock .ap-play{width:36px;height:36px}