/* =====================================================================
   MIND LINKER — Sleep Meditation (수면 명상)
   Full-screen night soundscape player overlay. Rendered above everything.
   Brand night palette: deep teal→indigo drawn from the cyan/teal ramp,
   pale-cyan moon glow. Reuses tokens + motion tokens.
   ===================================================================== */

.sl {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  color: oklch(95% 0.02 210);
  background:
    radial-gradient(120% 90% at 50% -10%, oklch(34% 0.07 215), transparent 55%),
    radial-gradient(90% 70% at 88% 8%, oklch(40% 0.085 196 / .55), transparent 50%),
    linear-gradient(168deg, oklch(24% 0.05 224) 0%, oklch(17% 0.04 250) 60%, oklch(13% 0.03 262) 100%);
  overflow: hidden;
  animation: slFade .5s var(--ease) both;
}
@keyframes slFade { from { opacity: 0; } to { opacity: 1; } }
.sl.closing { animation: slOut .34s var(--ease) forwards; }
@keyframes slOut { to { opacity: 0; } }

/* drifting starfield */
.sl__stars { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, oklch(98% 0.02 210 / .9), transparent),
    radial-gradient(1.2px 1.2px at 78% 16%, oklch(98% 0.02 210 / .8), transparent),
    radial-gradient(1px 1px at 33% 64%, oklch(98% 0.02 210 / .7), transparent),
    radial-gradient(1.6px 1.6px at 64% 48%, oklch(98% 0.02 210 / .85), transparent),
    radial-gradient(1px 1px at 88% 72%, oklch(98% 0.02 210 / .6), transparent),
    radial-gradient(1.3px 1.3px at 22% 84%, oklch(98% 0.02 210 / .7), transparent),
    radial-gradient(1px 1px at 50% 30%, oklch(98% 0.02 210 / .6), transparent),
    radial-gradient(1.1px 1.1px at 6% 54%, oklch(98% 0.02 210 / .6), transparent);
  animation: slTwinkle 6s ease-in-out infinite; }
@keyframes slTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sl__stars { animation: none; } }

/* top bar */
.sl__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top)) 22px 6px; flex: 0 0 auto; }
.sl__eyebrow { font: var(--fw-mono) 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: oklch(82% 0.07 200 / .85); }
.sl__x { width: 44px; height: 44px; border-radius: 14px; border: 1px solid oklch(100% 0 0 / .14); cursor: pointer;
  background: oklch(100% 0 0 / .08); color: oklch(96% 0.02 210); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background var(--dur-base) var(--ease); }
.sl__x:hover { background: oklch(100% 0 0 / .16); }
.sl__x svg { width: 20px; height: 20px; }

/* stage: moon + now-playing */
.sl__stage { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px; padding: 20px 24px; min-height: 0; overflow: hidden; }

/* short viewports: shrink the moon so it never crowds the panel */
@media (max-height: 720px) {
  .sl__moon { width: 150px; height: 150px; }
}
@media (max-height: 560px) {
  .sl__moon { width: 104px; height: 104px; }
  .sl__moon::before, .sl__moon::after { display: none; }
}

.sl__moon { position: relative; width: 188px; height: 188px; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(38% 34% at 34% 28%, oklch(99% 0.01 200) 0%, oklch(99% 0.01 200 / 0) 46%),
    radial-gradient(120% 120% at 32% 24%, oklch(95% 0.03 196), oklch(82% 0.08 198) 52%, oklch(64% 0.10 214) 100%);
  box-shadow:
    inset -14px -20px 44px oklch(40% 0.07 230 / .5),
    0 0 60px oklch(78% 0.12 200 / .45), 0 0 120px oklch(64% 0.12 214 / .35);
  animation: slBreath 9s ease-in-out infinite; }
@media (min-width: 768px) { .sl__moon { width: 232px; height: 232px; } }
@keyframes slBreath { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .sl__moon { animation: none; } }
/* soft halo rings */
.sl__moon::before, .sl__moon::after { content: ""; position: absolute; inset: -22px; border-radius: 50%;
  border: 1px solid oklch(82% 0.09 202 / .22); animation: slHalo 9s ease-in-out infinite; }
.sl__moon::after { inset: -44px; border-color: oklch(82% 0.09 202 / .12); animation-delay: .4s; }
@keyframes slHalo { 0%,100% { transform: scale(.98); opacity: .5; } 50% { transform: scale(1.04); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sl__moon::before, .sl__moon::after { animation: none; } }

.sl__now { text-align: center; margin-bottom: 16px; }
.sl__now-track { font: var(--fw-display) 24px var(--font-display); letter-spacing: -.02em; color: oklch(97% 0.02 205); white-space: nowrap; }
@media (min-width: 768px) { .sl__now-track { font-size: 27px; } }
.sl__now-sub { font: var(--fw-strong) 13px var(--font-body); color: oklch(80% 0.06 205 / .8); margin-top: 6px; }

/* bottom glass control panel */
.sl__panel { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 14px calc(16px + env(safe-area-inset-bottom));
  background: oklch(100% 0 0 / .07); border: 1px solid oklch(100% 0 0 / .12); border-radius: 28px;
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  padding: 18px 18px 20px; box-shadow: 0 -8px 40px oklch(15% 0.04 250 / .4); }
@media (min-width: 700px) { .sl__panel { max-width: 560px; margin-left: auto; margin-right: auto; width: calc(100% - 28px); } }

/* progress */
.sl__prog { display: flex; align-items: center; gap: 11px; }
.sl__bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: oklch(100% 0 0 / .14); overflow: hidden; cursor: pointer; }
.sl__bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, oklch(86% 0.10 196), oklch(74% 0.13 214)); box-shadow: 0 0 10px oklch(80% 0.12 204 / .6); transition: width .3s linear; }
.sl__time { font: var(--fw-mono) 11px var(--font-mono); color: oklch(82% 0.05 206 / .8); flex: 0 0 auto; min-width: 38px; text-align: center; }

/* transport */
.sl__transport { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 16px 0 4px; }
.sl__step { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  background: oklch(100% 0 0 / .08); color: oklch(95% 0.02 210); transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease); }
.sl__step:hover { background: oklch(100% 0 0 / .16); }
.sl__step:active { transform: scale(.94); }
.sl__step svg { width: 22px; height: 22px; }
.sl__play { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  color: oklch(22% 0.05 224);
  background: radial-gradient(120% 120% at 32% 24%, oklch(96% 0.04 198), oklch(82% 0.10 204) 70%, oklch(72% 0.12 214));
  box-shadow: 0 8px 22px oklch(64% 0.12 210 / .5), 0 0 0 6px oklch(100% 0 0 / .06), inset 0 2px 2px oklch(100% 0 0 / .6);
  transition: transform var(--dur-fast) var(--ease); }
.sl__play:active { transform: scale(.95); }
.sl__play svg { width: 30px; height: 30px; }

/* soundscape chips */
.sl__scapes { display: flex; gap: 9px; overflow-x: auto; padding: 16px 2px 4px; margin-top: 12px;
  border-top: 1px solid oklch(100% 0 0 / .1); scrollbar-width: none; }
.sl__scapes::-webkit-scrollbar { display: none; }
.sl__scape { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1px solid oklch(100% 0 0 / .12); background: oklch(100% 0 0 / .05); cursor: pointer;
  border-radius: 16px; padding: 11px 14px; min-width: 74px; color: oklch(84% 0.04 206 / .85);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.sl__scape:hover { background: oklch(100% 0 0 / .1); }
.sl__scape svg { width: 22px; height: 22px; }
.sl__scape span { font: var(--fw-strong) 11.5px var(--font-body); white-space: nowrap; }
.sl__scape[data-on] { background: oklch(100% 0 0 / .14); border-color: oklch(82% 0.1 202 / .5); color: oklch(97% 0.02 205);
  box-shadow: 0 0 0 1px oklch(82% 0.1 202 / .3), 0 6px 16px oklch(64% 0.12 214 / .25); }

/* sleep timer row */
.sl__timer { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sl__timer-lbl { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-strong) 12.5px var(--font-body); color: oklch(82% 0.05 206 / .85); margin-right: 2px; }
.sl__timer-lbl svg { width: 16px; height: 16px; }
.sl__tchip { border: 1px solid oklch(100% 0 0 / .14); background: oklch(100% 0 0 / .05); cursor: pointer;
  border-radius: 999px; padding: 8px 13px; font: var(--fw-strong) 12.5px var(--font-body); color: oklch(84% 0.04 206 / .85);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.sl__tchip:hover { background: oklch(100% 0 0 / .1); }
.sl__tchip[data-on] { background: linear-gradient(120deg, oklch(86% 0.10 196), oklch(74% 0.13 214)); color: oklch(20% 0.05 224); border-color: transparent; }