/* 1.4.6: one circle control, with entrance music in the upper control area. */
.topbar .nav-wrap{min-height:76px}
.music-home{width:min(1220px,90vw);margin:0 auto}
.music-home:empty{display:none}
.music-player{position:relative;width:100%;min-width:0;border-top:1px solid #d1af7029;color:#f3eee5;font:12px/1.5 Arial,"Noto Sans KR",sans-serif}
.music-player[hidden],.music-player [hidden]{display:none!important}
.music-controls{display:flex;align-items:center;gap:12px;min-height:46px;min-width:0}
.music-player button{min-height:44px;border:0;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}
.music-player button:focus-visible,.music-player select:focus-visible,.music-player input:focus-visible{outline:2px solid #e3c081;outline-offset:2px;border-radius:5px}
.music-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;padding:0;flex:none;color:#d1af70!important}
#musicIcon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#d1af70}
.music-toggle-icon{display:block;width:26px;height:26px;flex:none}
#musicAction{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.music-player.expanded .music-toggle{color:#f3d99f!important;background:#d1af7014;border-radius:50%}
.music-marquee{min-width:30px;flex:1;overflow:hidden;white-space:nowrap;color:#c5cabc;font-size:11px;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 6px),transparent)}
.music-compact-title{display:inline-block;white-space:nowrap;max-width:none;padding:0 5px}
.music-marquee.is-scrolling .music-compact-title{animation:musicTitleScroll var(--music-title-duration,12s) linear infinite alternate;will-change:transform}
.music-player:hover .music-compact-title,.music-player:focus-within .music-compact-title{animation-play-state:paused}
@keyframes musicTitleScroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--music-title-travel,0px))}}
.music-select-label{display:block;width:100%;min-width:0;margin:9px 0 12px}
#musicSelectText{display:block;margin-bottom:5px;font-size:11px}
.music-player select{width:100%;max-width:100%;height:34px;min-width:0;border:1px solid #d1af7045;border-radius:6px;background:#17231e;color:#e8e7dc;font:11px/1.4 Arial,"Noto Sans KR",sans-serif;padding:5px 22px 5px 8px;cursor:pointer;text-overflow:ellipsis}
.music-player option{background:#17231e;color:#f3eee5}
.music-panel{position:absolute;z-index:31;right:0;top:100%;width:min(350px,calc(100vw - 28px));padding:12px 16px 16px;background:#14201bf7;border:1px solid #d1af7045;border-radius:0 0 10px 10px;box-shadow:0 14px 28px #0004;max-height:40vh;overflow:auto}
.music-title{margin:0 0 5px;font-weight:600;overflow-wrap:anywhere}
.music-credit{margin:0 0 12px;font-size:11px;color:#bec9ba;overflow-wrap:anywhere;white-space:pre-wrap}
.music-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.music-volume-label{display:flex;align-items:center;gap:10px;color:#c5ced8;font-size:11px;margin:9px 0 0}
.music-player input[type=range]{min-width:55px;width:auto;min-height:30px;margin:0;flex:1;padding:0;border:0;accent-color:#d1af70;background:transparent}
.music-volume-label output{min-width:29px;text-align:right;color:#d1af70}
.music-status{margin:0;padding:0 0 8px;font-size:10px;color:#e3cca4;overflow-wrap:anywhere}
.music-player.in-intro{position:absolute;z-index:100;top:calc(max(28px,env(safe-area-inset-top)) + 34px);bottom:auto;left:max(35px,env(safe-area-inset-left));right:auto;width:min(340px,calc(100% - 70px));padding:0 7px;border:1px solid #d1af7050;border-radius:8px;background:#101c19ed;box-shadow:0 5px 22px #0004}
.music-player.in-intro .music-controls{min-height:36px;gap:6px;flex-wrap:nowrap;padding:0}
.music-player.in-intro .music-toggle{width:36px;min-width:36px;min-height:36px;padding:0}
.music-player.in-intro .music-marquee{font-size:11px}
.music-player.in-intro .music-panel{top:100%;bottom:auto;left:-1px;right:auto;width:min(350px,calc(100vw - 70px));max-height:min(420px,calc(100dvh - 124px));border-radius:0 0 10px 10px}

.music-home.floating{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:min(440px,calc(100vw - 28px));z-index:40;background:#101c19f5;border-radius:8px;padding:0 10px}
.music-home.floating .music-panel{top:auto;bottom:100%}
.reader-toolbar>.music-player.in-reader{position:relative;box-shadow:none;flex:1 1 100%;max-width:none;align-self:center;background:#101a26;border:1px solid #d1af7033;border-radius:7px;padding:0 10px}
.music-player.in-reader .music-controls{min-height:40px}
.music-player.in-reader .music-panel{max-height:30vh}
.reader-dialog.light .music-player{background:#fffaf1;color:#292923;border-color:#b9aa8b}
.reader-dialog.light .music-marquee,.reader-dialog.light .music-credit,.reader-dialog.light .music-volume-label{color:#685b48}
.reader-dialog.light .music-panel{background:#fffaf1;color:#292923;border-color:#b9aa8b}
.reader-dialog.light .music-player select,.reader-dialog.light .music-player option{background:#f1eadc;color:#292923}
.reader-dialog.light .music-status{color:#775424}
@media(max-width:600px){.topbar .nav-wrap{min-height:104px}.music-home{width:90vw}.music-controls{gap:6px;flex-wrap:nowrap;padding:1px 0 4px}.music-marquee{font-size:10px;flex:1 1 70px}.music-player select{font-size:10px;padding-left:5px}.music-player.in-reader .music-controls{flex-wrap:nowrap}}
@media(prefers-reduced-motion:reduce){.music-marquee.is-scrolling .music-compact-title{animation:none;will-change:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}}
html.motion-off .music-marquee .music-compact-title{animation-play-state:paused}
@media print{.music-home,.music-player{display:none!important}}

/* Keep the new header row clear of the opening identity text. */
body.has-public-music .brand-manifesto{padding-top:calc(var(--asoy-header-height,123px) + 36px)}
.music-player .music-volume-step{padding:0;min-width:28px;width:28px;min-height:32px;height:32px;flex:none;border:1px solid #d1af7045;border-radius:5px;font-size:18px}
.music-volume-label{gap:7px;flex-wrap:nowrap}.music-volume-label output{min-width:35px}
.music-volume-meta{display:flex;align-items:center;gap:10px;margin-top:7px}
.music-player #musicMute{min-height:30px;padding:3px 8px;border:1px solid #d1af7045;border-radius:5px;font-size:10px}
#musicDeviceVolume{font-size:10px;line-height:1.5;color:#d6c5a1}
.music-player button:disabled,.music-player input:disabled{opacity:.45;cursor:default}

/* A separate upper row leaves the brand and language controls unobstructed. */
@media(max-width:750px){.music-player.in-intro{top:calc(max(21px,env(safe-area-inset-top)) + 33px);left:max(18px,env(safe-area-inset-left));right:auto;width:min(340px,calc(100% - 36px));max-width:none}.music-player.in-intro .music-panel{left:-1px;right:auto;width:min(350px,calc(100vw - 36px));max-height:min(420px,calc(100dvh - 116px))}}
