/* ---------- 제어 센터 (화면 위쪽에서 아래로 쓸어내리면 열림) ---------- */
.cc { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; padding: calc(max(env(safe-area-inset-top), 10px) + 34px) 22px 0;
  background: rgba(20,20,24,.38); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0; transform: translateY(-24px); pointer-events: none; transition: opacity .28s ease, transform .32s cubic-bezier(.22,.8,.2,1); color: #fff; touch-action: none; }
.cc.open { opacity: 1; transform: none; pointer-events: auto; }
.cc-grid { width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 74px; gap: 14px; }
.cc-box { border-radius: 26px; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.18); position: relative; overflow: hidden; }
.cc-conn { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 12px; }
.cc-c { width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.2); cursor: pointer; }
.cc-c svg, .cc-sq svg, .cc-focus svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cc-c.on.or { background: #ff9f0a; } .cc-c.on.gr { background: #34c759; } .cc-c.on.bl { background: #0a84ff; }
.cc-music { grid-column: span 2; grid-row: span 2; padding: 14px; display: flex; flex-direction: column; }
.cc-music .cc-art { width: 42px; height: 42px; border-radius: 9px; background: #555 center / cover; flex: none; }
.cc-music b { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-music small { display: block; font-size: 13px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-mctl { margin-top: auto; display: flex; justify-content: space-around; align-items: center; }
.cc-mctl button { border: 0; background: none; color: #fff; padding: 4px; cursor: pointer; }
.cc-mctl svg { width: 24px; height: 24px; fill: #fff; }
.cc-sq { border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; }
.cc-sq.on { background: #fff; } .cc-sq.on svg { stroke: #000; }
.cc-sl { grid-row: span 2; cursor: ns-resize; }
.cc-sl i { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; pointer-events: none; }
.cc-sl svg { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 26px; height: 26px; fill: none; stroke: #8e8e93; stroke-width: 2; stroke-linecap: round; z-index: 1; pointer-events: none; }
.cc-focus { grid-column: span 2; border: 0; color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; text-align: left; cursor: pointer; font: inherit; }
.cc-focus .cc-fi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.cc-focus b { display: block; font-size: 14px; font-weight: 600; } .cc-focus small { font-size: 12px; opacity: .75; }
.cc-focus.on { background: #fff; color: #000; } .cc-focus.on .cc-fi { background: #5e5ce6; }
.cc-focus.on .cc-fi svg { stroke: #fff; fill: #fff; }
.cc-hint { margin-top: auto; padding-bottom: calc(max(env(safe-area-inset-bottom), 8px) + 14px); font-size: 12px; opacity: .6; }
/* 방해 금지: 상태바 달 표시 + 잠금화면 표시 */
.st-moon { display: none; width: 13px; height: 13px; fill: currentColor; margin-right: 2px; }
body.dnd .st-moon { display: block; }
.lk-focus { display: none; align-items: center; justify-content: center; gap: 5px; margin: 2px auto 0; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.lk-focus svg { width: 14px; height: 14px; fill: #fff; }
body.dnd .lk-focus { display: flex; }