/* 공통 색·글꼴·기본 스타일 */
:root {
  --bg: #07090d;
  --panel: #0f131b;
  --panel-2: #141a24;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #e8ebf1;
  --muted: #8b94a5;
  --dim: #5a6374;
  --iha: #8ab4ee;
  --iha-deep: #3d6bb3;
  --gate: #c084fc;
  --gate-deep: #7c3aed;
  --ok: #6ee7a7;
  --danger: #f87171;
  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
html[data-lang="ja"] { --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; }
html[data-lang="zh-CN"] { --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
html[data-lang="zh-TW"] { --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html[data-lang="ko"] body { word-break: keep-all; }

button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }

.mono { font-family: var(--mono); letter-spacing: 0.18em; }
[hidden] { display: none !important; }

/* =========================================================
   음악 플레이어 (오른쪽 아래, 접기/펼치기, 끌어서 이동)
   ========================================================= */
.player {
  --pl: #c084fc; --pl-2: #8b5cf6;
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  font-family: var(--font);
}
.pl-mini {
  position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; touch-action: none;
  border: 1px solid color-mix(in srgb, var(--pl) 55%, transparent);
  background: radial-gradient(circle at 50% 35%, rgba(139,92,246,.28), rgba(10,12,18,.9) 70%);
  color: var(--pl); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.pl-mini svg { width: 22px; height: 22px; }
.pl-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--pl); opacity: 0; }
.player.is-playing .pl-ring { animation: plRing 2.2s ease-out infinite; }
@keyframes plRing { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
.player.is-open .pl-mini { display: none; }

.pl-panel {
  display: none;
  width: min(300px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(12,15,22,.94);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  animation: plIn .35s cubic-bezier(.32,1.45,.6,1);
}
.player.is-open .pl-panel { display: block; }
@keyframes plIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.pl-head { display: flex; align-items: center; gap: 10px; }
.pl-drag { width: 16px; height: 22px; color: var(--dim); cursor: grab; touch-action: none; flex: 0 0 auto; }
.pl-drag:active { cursor: grabbing; }
.pl-drag svg { width: 100%; height: 100%; }
.pl-cover {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; color: var(--pl);
  background: linear-gradient(140deg, rgba(139,92,246,.35), rgba(76,29,149,.25));
  border: 1px solid rgba(192,132,252,.25);
}
.pl-cover > svg { width: 20px; height: 20px; }
.pl-eq { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 1.5px; align-items: flex-end; height: 9px; opacity: 0; }
.pl-eq i { width: 2px; background: var(--pl); border-radius: 1px; animation: plEq .9s ease-in-out infinite; }
.pl-eq i:nth-child(1) { height: 5px; } .pl-eq i:nth-child(2) { height: 9px; animation-delay: -.3s; } .pl-eq i:nth-child(3) { height: 6px; animation-delay: -.6s; }
.player.is-playing .pl-eq { opacity: 1; }
@keyframes plEq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.pl-info { flex: 1; min-width: 0; }
.pl-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
.player.is-empty .pl-title { font-size: 12px; font-weight: 600; color: var(--muted); }

.pl-icon {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 6px; border-radius: 8px;
  display: grid; place-items: center; border: 0; background: none; color: var(--muted);
}
.pl-icon:hover, .pl-icon.is-on { color: var(--text); background: rgba(255,255,255,.06); }
.pl-icon svg { width: 100%; height: 100%; }

.pl-tracks { margin-top: 10px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,.04); display: grid; gap: 2px; }
.pl-tracks button {
  display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; text-align: left; font-size: 12.5px; color: var(--muted);
}
.pl-tracks button span { font-family: var(--mono); font-size: 10px; color: var(--dim); width: 12px; }
.pl-tracks button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.pl-tracks button.is-cur { color: var(--pl); }
.pl-tracks button.is-bad { opacity: .4; text-decoration: line-through; }

.pl-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 0;
  border-radius: 6px; cursor: pointer; outline: none;
  background: linear-gradient(90deg, var(--pl-2), var(--pl)) 0 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.1);
}
.pl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #0c0f16; border: 2.5px solid var(--pl); box-shadow: 0 0 0 4px rgba(192,132,252,.15); }
.pl-range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #0c0f16; border: 2.5px solid var(--pl); }
.pl-range:focus-visible { box-shadow: 0 0 0 2px rgba(192,132,252,.5); }
.pl-seek { margin-top: 16px; }
.pl-times { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }

.pl-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pl-ctrl .pl-icon { width: 36px; height: 36px; padding: 7px; color: #c9cfd9; }
.pl-play {
  width: 48px; height: 48px; padding: 13px; border-radius: 50%; border: 0;
  display: grid; place-items: center; color: #12051f;
  background: linear-gradient(140deg, #d8b4fe, var(--pl) 45%, var(--pl-2));
  box-shadow: 0 6px 20px rgba(139,92,246,.45);
  transition: transform .15s;
}
.pl-play:active { transform: scale(.94); }
.pl-play svg { width: 100%; height: 100%; }
.player.is-empty .pl-play, .player.is-empty .pl-ctrl .pl-icon { opacity: .35; pointer-events: none; }

.pl-vol { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pl-vol .pl-icon { width: 30px; height: 30px; }
.pl-vol .pl-range { flex: 1; }
.pl-vval { width: 24px; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}