@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Zen+Antique&display=swap');

/* ==========================================================================
   milim_cassette v2 — 그리드 랜딩 + 글래스 카세트 플레이어 (Song Board Revival 시안 이식)
   ========================================================================== */

:root {
  --mlc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mlc-radius: 28px;
  --mlc-glass-strong: oklch(1 0 0 / 0.55);
  --mlc-glass-border: oklch(0.85 0.02 250 / 0.6);
  --mlc-shadow: 0 10px 40px -20px oklch(0.2 0.05 260 / 0.35);

  --tape-main: oklch(0.75 0.05 250);
  --tape-p1: oklch(0.65 0.15 250);
  --tape-p2: oklch(0.97 0.01 80);
  --tape-p3: oklch(0.82 0.08 60);
  --tape-text: oklch(0.25 0.02 260);

}

.mlc-app-wrap {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: clamp(18px, 3vw, 32px);
  box-sizing: border-box;
  isolation: isolate;
  font-family: var(--mlc-site-body-font);
  color: var(--mlc-site-text);
  background: transparent;
}

.mlc-gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.mlc-gradient-bg::before,
.mlc-gradient-bg::after {
  content: "";
  position: absolute;
  width: 120vmax;
  height: 120vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  transition: opacity 1.2s var(--mlc-ease);
}
.mlc-gradient-bg::before {
  top: -40vmax; left: -40vmax;
  background: radial-gradient(circle at center, var(--tape-p1), transparent 70%);
}
.mlc-gradient-bg::after {
  bottom: -40vmax; right: -40vmax;
  background: radial-gradient(circle at center, var(--tape-main), transparent 70%);
}
/* 배경 그래디언트는 '재생 중'에만 (JS가 .is-playing 토글) */
.mlc-app-wrap.is-playing .mlc-gradient-bg::before {
  opacity: 0.45;
  animation: mlc-drift-a 42s ease-in-out infinite;
}
.mlc-app-wrap.is-playing .mlc-gradient-bg::after {
  opacity: 0.5;
  animation: mlc-drift-b 55s ease-in-out infinite;
}
@keyframes mlc-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15vmax, 10vmax) scale(1.1); }
}
@keyframes mlc-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12vmax, -8vmax) scale(1.15); }
}

.mlc-shell {
  position: relative;
  display: grid;
  grid-template-columns: clamp(300px, 24vw, 380px) 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 100px);
}
@media (max-width: 900px) {
  .mlc-shell { grid-template-columns: 1fr; }
}

.mlc-sidebar, .mlc-hero {
  border-radius: var(--mlc-radius);
  background: var(--mlc-glass-strong);
  border: 1px solid var(--mlc-glass-border);
  box-shadow: var(--mlc-shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.mlc-sidebar {
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 18px; overflow: hidden; min-height: 0;
}
.mlc-sidebar-head { display: flex; flex-direction: column; gap: 14px; }
.mlc-sidebar-titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mlc-board-title {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: oklch(0.22 0.02 260);
  transition: color 0.5s var(--mlc-ease);
}
.mlc-title-icon { color: oklch(0.6 0.15 250); transition: color 0.5s var(--mlc-ease); }
.mlc-app-wrap.has-theme .mlc-board-title,
.mlc-app-wrap.has-theme .mlc-title-icon { color: var(--tape-p1); }

.mlc-sidebar-tools { display: flex; gap: 6px; }

.mlc-ibtn {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.45); color: oklch(0.35 0.02 260);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; transition: all 0.2s var(--mlc-ease);
}
.mlc-ibtn:hover { background: oklch(1 0 0 / 0.85); transform: translateY(-1px); }
.mlc-ibtn--primary { background: oklch(0.6 0.15 250); color: white; border-color: transparent; }
.mlc-app-wrap.has-theme .mlc-ibtn--primary { background: var(--tape-p1); }
.mlc-ibtn--danger { color: oklch(0.55 0.22 25); }

.mlc-tabs {
  display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
  border-radius: 999px; background: oklch(0.95 0.01 250 / 0.6);
  border: 1px solid var(--mlc-glass-border);
}
.mlc-tab {
  border: 0; background: transparent; padding: 8px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: oklch(0.5 0.02 260);
  cursor: pointer; transition: all 0.25s var(--mlc-ease);
}
.mlc-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.mlc-tab.is-active {
  background: white; color: oklch(0.2 0.02 260);
  box-shadow: 0 2px 8px oklch(0.2 0.05 260 / 0.1);
}
.mlc-app-wrap.has-theme .mlc-tab.is-active { color: var(--tape-p1); }

.mlc-sidebar-body { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; }

/* 라이브러리/트랙 패널 — 겹쳐서 크로스페이드 (JS가 is-active 토글) */
.mlc-panel { display: none; }
.mlc-panel.is-active { display: block; }

.mlc-library, .mlc-tracklist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.mlc-lib-row {
  width: 100%; display: grid; grid-template-columns: 76px 1fr auto;
  align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 14px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  transition: all 0.2s var(--mlc-ease);
  font: inherit; color: inherit;
}
.mlc-lib-row:hover { background: oklch(1 0 0 / 0.6); }
.mlc-lib-row.is-active {
  background: oklch(1 0 0 / 0.85);
  border-color: var(--tape-p1);
  box-shadow: 0 4px 14px -6px oklch(0.2 0.05 260 / 0.2);
}
.mlc-lib-thumb-svg {
  width: 76px; aspect-ratio: 560 / 340;
  border-radius: 8px; overflow: hidden;
  display: block;
  box-shadow: 0 2px 6px -2px oklch(0.2 0.05 260 / 0.25);
}
.mlc-cassette-wrap--mini { width: 100%; aspect-ratio: 560 / 340; filter: none; }
.mlc-lib-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlc-lib-title {
  font-weight: 700; font-size: 14px; color: oklch(0.2 0.02 260);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlc-lib-author {
  font-size: 11px; color: oklch(0.55 0.02 260);
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlc-lib-variant {
  font-weight: 700; color: var(--tape-p1);
  letter-spacing: 0.3px; text-transform: uppercase; font-size: 10px;
}
.mlc-lib-status { color: oklch(0.65 0.02 260); display: inline-flex; }

.mlc-track-row {
  width: 100%; display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; border: 0; background: transparent;
  cursor: pointer; text-align: left; font: inherit;
  transition: background 0.2s var(--mlc-ease);
}
.mlc-track-row:hover { background: oklch(1 0 0 / 0.55); }
.mlc-track-row.is-active { background: oklch(1 0 0 / 0.85); }
.mlc-track-num { font-family: var(--mlc-site-body-font); font-size: 11px; color: oklch(0.55 0.02 260); }
.mlc-track-meta { min-width: 0; }
.mlc-track-title { display: block; font-size: 13px; font-weight: 600; color: oklch(0.2 0.02 260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-track-artist { display: block; font-size: 11px; color: oklch(0.55 0.02 260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlc-soundbar { display: inline-flex; gap: 2px; align-items: end; height: 14px; }
.mlc-soundbar i {
  width: 3px; background: var(--tape-p1); border-radius: 2px;
  animation: mlc-sound 1s ease-in-out infinite;
}
.mlc-soundbar i:nth-child(1) { height: 40%; }
.mlc-soundbar i:nth-child(2) { height: 100%; animation-delay: 0.2s; }
.mlc-soundbar i:nth-child(3) { height: 60%; animation-delay: 0.4s; }
@keyframes mlc-sound { 0%,100%{transform:scaleY(0.5);} 50%{transform:scaleY(1);} }

.mlc-empty {
  text-align: center; padding: 40px 20px;
  font-size: 13px; color: oklch(0.55 0.02 260);
}

.mlc-pagination {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid oklch(0.9 0.01 250 / 0.6);
}
.mlc-pagination a, .mlc-pagination strong, .mlc-pagination .pg_current, .mlc-pagination .pg_page {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.5); color: oklch(0.3 0.02 260);
  font-size: 13px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s var(--mlc-ease);
}
.mlc-pagination a:hover { background: white; }
.mlc-pagination strong, .mlc-pagination .pg_current {
  background: oklch(0.3 0.03 260); color: white; border-color: transparent;
}
.mlc-app-wrap.has-theme .mlc-pagination strong,
.mlc-app-wrap.has-theme .mlc-pagination .pg_current { background: var(--tape-p1); }

.mlc-hero { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; }
.mlc-hero-topbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.mlc-hero-badge {
  padding: 6px 14px; border-radius: 999px;
  background: var(--tape-p1); color: white;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.mlc-hero-actions { display: flex; gap: 6px; }
.mlc-hero-inner {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px; padding: 20px 0;
}
.mlc-hero--empty { color: oklch(0.55 0.02 260); }
.mlc-hero-empty-text { margin: 0; font-size: 14px; font-weight: 600; }
.mlc-hero-empty-hint { margin: 0; font-size: 12px; opacity: 0.7; }

.mlc-cassette-wrap {
  width: min(520px, 90%);
  aspect-ratio: 560 / 340;
  filter: drop-shadow(0 20px 40px oklch(0.2 0.05 260 / 0.2));
  transition: filter 0.5s var(--mlc-ease);
}
.mlc-app-wrap.has-theme .mlc-cassette-wrap {
  filter: drop-shadow(0 24px 48px color-mix(in oklab, var(--tape-main) 40%, transparent));
}
.mlc-cassette-svg { width: 100%; height: 100%; display: block; }
/* 카세트 SVG 타이포는 하드코딩 폰트를 무시하고 사이트 폰트를 상속(CSS가 presentation attribute 보다 우선) */
.mlc-cassette-svg text {font-family: var(--mlc-site-body-font, inherit);letter-spacing: 0.01em;font-weight: 600;}
/* ── 선택형 재질 오버레이(전역, 원본 SVG 불변) ─ 기본 OFF/100% → 기존과 동일.
   컨테이너에 .mlc-fx-depth / --mlc-shell-op 설정으로 구동(window.mlcSetFX). 셸(main 채움)만 반투명, 라벨/타이포 불변 */
.mlc-cassette-svg [fill="var(--main)"] { fill-opacity: var(--mlc-shell-op, 1); }
.mlc-fx-depth .mlc-cassette-svg {
  filter: drop-shadow(0 var(--mlc-dy, 0) var(--mlc-db, 0) rgb(from var(--tape-main) r g b / 34%));
}
.mlc-fx-depth .mlc-cassette-svg [fill="var(--point2)"],
.mlc-fx-depth .mlc-cassette-svg [fill="var(--point1)"] {
  filter: drop-shadow(0 var(--mlc-dy2, 0) var(--mlc-db2, 0) rgb(from var(--tape-main) r g b / 34%));
}
/* 히어로 카세트 컨테이너 — 안쪽 .mlc-cassette-wrap 이 실제 flex 자식이 되도록 */
.mlc-hero-cassette { display: contents; }

.mlc-reel { transform-origin: center; transform-box: fill-box; }
.mlc-reel--spin { animation: mlc-reel-spin 3s linear infinite; }
@keyframes mlc-reel-spin { to { transform: rotate(360deg); } }

.mlc-now-card {
  width: min(520px, 90%);
  padding: 18px 22px; border-radius: 20px;
  background: oklch(1 0 0 / 0.7);
  border: 1px solid var(--mlc-glass-border);
  display: flex; flex-direction: column; gap: 14px;
}
.mlc-now-meta { text-align: center; min-width: 0; }
.mlc-now-title { margin: 0; font-size: 15px; font-weight: 700; color: oklch(0.2 0.02 260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-now-artist { margin: 2px 0 0; font-size: 12px; color: oklch(0.5 0.02 260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlc-progress-bar {
  height: 4px; border-radius: 999px;
  background: oklch(0.9 0.01 250); overflow: hidden; cursor: pointer;
}
.mlc-progress-fill { height: 100%; width: 0%; background: var(--tape-p1); transition: width 0.4s var(--mlc-ease); }
.mlc-progress-times {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 10px; color: oklch(0.55 0.02 260); font-family: var(--mlc-site-body-font);
}

.mlc-controls { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mlc-ctrl {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: oklch(0.95 0.01 250); color: oklch(0.3 0.02 260);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s var(--mlc-ease);
}
.mlc-ctrl:hover { background: oklch(0.9 0.01 250); }
.mlc-ctrl.is-on { color: var(--tape-p1); }
.mlc-ctrl--toggle:not(.is-on) { opacity: 0.45; }
.mlc-ctrl.is-one::after {
  content: "1"; position: absolute; right: 7px; bottom: 5px;
  font-size: 9px; font-weight: 800; line-height: 1; color: var(--tape-p1);
}
.mlc-ctrl--play {
  width: 52px; height: 52px; background: var(--tape-p1); color: white;
  box-shadow: 0 8px 20px -6px color-mix(in oklab, var(--tape-p1) 60%, transparent);
}
.mlc-ctrl--play:hover { transform: scale(1.05); }
.mlc-vol-wrap { position: relative; display: inline-flex; }
/* 세로형 볼륨 슬라이더 — 숫자는 최상단, 그 아래 두툼한 라운드 필 바(builduilabs 느낌) */
.mlc-vol-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px); transform-origin: bottom center;
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 12px 14px; border-radius: 18px;
  background: oklch(1 0 0 / 0.92); border: 1px solid var(--mlc-glass-border);
  box-shadow: var(--mlc-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.2s var(--mlc-ease), transform 0.2s var(--mlc-ease); z-index: 30;
}
.mlc-vol-wrap.is-open .mlc-vol-pop { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mlc-vol-num {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--mlc-site-text);
}
.mlc-vol-slider { position: relative; width: 26px; height: 118px; }
.mlc-vol-track {
  position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0;
  width: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklch, var(--tape-main) 14%, oklch(0.9 0.01 250));
}
.mlc-vol-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: var(--tape-p1); border-radius: 999px;
  transition: height 0.08s linear;
}
/* 네이티브 range 는 투명하게 덮어 드래그/키보드 입력만 담당 */
.mlc-vol-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
  -webkit-appearance: slider-vertical; appearance: slider-vertical;
  writing-mode: vertical-lr; direction: rtl; opacity: 0;
}

/* 유튜브 iframe 숨김 */
.mlc-yt-holder { position: fixed; left: -9999px; bottom: 0; width: 1px; height: 1px; overflow: hidden; }

/* 자동재생 차단 오버레이 */
.mlc-tap-overlay {
  display: none; position: absolute; inset: 0; z-index: 6;
  align-items: center; justify-content: center; gap: 8px;
  background: oklch(0 0 0 / 0.5); color: #fff; border-radius: var(--mlc-radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.mlc-hero.needs-tap .mlc-tap-overlay { display: flex; }

/* 긴 제목 마퀴 (넘칠 때만 JS가 .is-scrolling 부여) */
/* vertical-align:top — inline-flex 는 기본 baseline 정렬이라 줄상자 아래로 밀려
   overflow:hidden 인 부모에서 글리프 하단이 잘린다. 서체·크기와 무관하게 방지. */
.mlc-mq-inner { display: inline-flex; white-space: nowrap; vertical-align: top; }
/* 마퀴 대상도 같은 이유로 서체 기준 행간 — 고정 배수면 글리프 상·하단이 잘린다 */
.mlc-marquee { line-height: normal; }
.mlc-mq-seg { white-space: nowrap; padding-right: 44px; }
.mlc-marquee.is-scrolling { text-align: left; }
.mlc-marquee.is-scrolling > .mlc-mq-inner {
  animation: mlc-marquee var(--mq-dur, 8s) linear infinite; will-change: transform;
}
@keyframes mlc-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mq-shift, 0px))); } }
/* 마퀴: 호버/포커스 시 일시정지(가독성) */
.mlc-marquee:hover > .mlc-mq-inner,
.mlc-marquee:focus-within > .mlc-mq-inner { animation-play-state: paused; }

/* SVG 카세트 제목 마퀴 — 라벨 폭(data-mlc-fit)을 넘칠 때만 cassette-svg.js 가 구성.
   translate 값은 SVG 사용자 단위(viewBox 800×500)라 카세트 크기와 무관하게 비율 유지. */
.mlc-svg-mq { animation: mlc-svg-marquee var(--mq-dur, 9s) linear infinite; }
@keyframes mlc-svg-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--mq-shift, 0px))); }
}
.mlc-cassette-wrap:hover .mlc-svg-mq { animation-play-state: paused; }

.mlc-floating-menu {
  position: fixed; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.7); color: oklch(0.25 0.02 260);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(10px);
  box-shadow: var(--mlc-shadow); z-index: 10;
  transition: all 0.2s var(--mlc-ease);
}
.mlc-floating-menu:hover { background: white; transform: scale(1.05); }

/* =========================================================
   그리드 랜딩 — 사이트 테마 토큰 (default.css)
   ========================================================= */
:root {
  /* 사이트 디자인 시스템(default.css.php) 토큰을 직접 상속. 토큰 부재 시에만 폴백값 사용(안전). */
  --mlc-site-bg: var(--bg-color);
  --mlc-site-card: var(--card-bg-color);
  --mlc-site-border: var(--card-border-color);
  --mlc-site-title: var(--title-font-color);
  --mlc-site-text: var(--content-font-color);
  --mlc-site-muted: var(--text-muted);
  --mlc-site-accent: var(--accent-color);
  --mlc-site-title-font: var(--title-font-family, "Zen Antique", ui-serif, Georgia, serif);
  --mlc-site-body-font: var(--content-font-family, "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif);
}

/* 카세트별 다크모드 — 주변 크롬(모달/미리보기)만 사이트 그레이 토큰으로. SVG 팔레트·색은 불변.
   사이트 전역 라이트/다크와 독립. 미지정(구버전) 글은 .mlc-dark 미적용 → 라이트 유지(하위호환). */
.mlc-dark {
  --mlc-site-card: var(--gray-800);
  --mlc-site-bg: var(--gray-900);
  --mlc-site-border: var(--gray-700);
  --mlc-site-title: var(--gray-50);
  --mlc-site-text: var(--gray-200);
  --mlc-site-muted: var(--gray-400);
}
.mlc-dark .mlc-modal {
  background: rgb(from var(--gray-900) r g b / 72%);
  border-color: rgb(from var(--gray-50) r g b / 14%);
  box-shadow: 0 40px 90px -30px rgb(from var(--black) r g b / 65%), inset 0 1px 0 rgb(from var(--gray-50) r g b / 8%);
  color: var(--mlc-site-text);
}
.mlc-dark .mlc-mctrl {/* background: var(--gray-800); */}
.mlc-dark .mlc-mctrl:hover { background: var(--gray-700); }
.mlc-dark .mlc-modal-nowcard { border-color: var(--gray-700); }
.mlc-dark .mlc-modal-ibtn:hover, .mlc-dark .mlc-modal-back:hover { background: var(--gray-700); }
/* 다크 테이프는 뒤 배경까지 어둡게 — 글래스 모달이 밝은 사이트 배경 위에 뜨면 대비가 깨진다.
   블러는 그대로 두고 어두운 틴트만 얹어 드리프트 글로우가 은은히 비치게 한다. */
.mlc-dark .mlc-modal-overlay { background: rgb(from var(--gray-900) r g b / 58%); }
.mlc-style-preview.mlc-dark { background: var(--gray-900); border-radius: var(--card-border-radius, 14px); padding: 14px; }

/* 글쓰기/수정 폼 등 일반 문서 페이지용 래퍼 */
.mlc-grid-root {
  min-height: 100vh;
  background: var(--mlc-site-bg);
  color: var(--mlc-site-text);
  font-family: var(--mlc-site-body-font);
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 96px;
}

/* =========================================================
   스테이지 — 화면 전체를 쓰는 테이프 진열대
   상단 헤더 / 중앙에 떠오른 선택 테이프 / 하단 호(弧) 랙
   ========================================================= */

/* 사이트 컨테이너(#container_wr)의 max-width:1400px 와 padding-top:40px 이
   좌우 여백과 상단 틈을 만든다 → 스테이지가 있는 페이지에서만 해제. */
#container_wr:has(.mlc-stage) { max-width: none; padding-top: 0; }

.mlc-stage {
  --rack-w: clamp(116px, 11vw, 172px);
  --stage-main: #5b8dbf;
  --stage-p1: #e0637f;
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: transparent;   /* 유휴 상태 = 오버레이 없는 투명 (사이트 배경 그대로) */
  color: var(--mlc-site-text);
  font-family: var(--mlc-site-body-font);
}

/* 곡 재생 중에만 켜지는 배경 드리프트 그래디언트(쿠가 기믹). 테이프 색이 방 전체에 번지며 흐른다.
   유휴/일시정지 상태에선 opacity 0 → 아무 오버레이도 없음(투명). */
.mlc-stage-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 1s ease;
}
.mlc-stage.is-audio .mlc-stage-glow { opacity: 1; }
.mlc-stage-glow::before, .mlc-stage-glow::after {
  content: ""; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%;
  filter: blur(75px);   /* 조금 덜 흐리게 → 색이 더 선명 */
}
.mlc-stage-glow::before {
  top: -24vmax; left: -20vmax; opacity: 0.8;
  background: radial-gradient(circle at center, var(--stage-p1), transparent 62%);
}
.mlc-stage-glow::after {
  bottom: -28vmax; right: -20vmax; opacity: 0.82;
  background: radial-gradient(circle at center, var(--stage-main), transparent 62%);
}
.mlc-stage.is-audio .mlc-stage-glow::before { animation: mlc-drift-a 40s ease-in-out infinite; }
.mlc-stage.is-audio .mlc-stage-glow::after { animation: mlc-drift-b 52s ease-in-out infinite; }
/* 행마다 명시적으로 지정한다. `.mlc-stage > *` 같은 포괄 선택자를 쓰면 특이성이 더 높아
   서랍/백드롭의 position:absolute 를 덮어써서 이것들이 그리드 행으로 튀어나온다. */
.mlc-stage-header, .mlc-hero-stage, .mlc-rack { position: relative; z-index: 1; }

/* 게시판 제목은 항상 화면 정중앙. 좌측 1fr(빈 칸) / 제목 auto / 우측 1fr(액션) →
   양쪽 1fr 이 같은 폭이라 액션 개수와 무관하게 제목이 가운데 고정된다. */
.mlc-stage-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(12px, 1.6vw, 20px) clamp(14px, 2.4vw, 32px) 24px;
}
.mlc-grid-heading { grid-column: 2; min-width: 0; text-align: center; }
.mlc-grid-title {
  font-family: var(--mlc-site-title-font);
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--mlc-site-title);
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 900;
  text-transform: capitalize;
}
.mlc-grid-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--mlc-site-muted); }
.mlc-grid-actions { grid-column: 3; justify-self: end; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 헤더 아이콘 버튼 (검색·관리자·새 테이프) — 목록 햄버거 버튼과 통일 */
.mlc-icon-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mlc-site-border); border-radius: 10px;
  background: var(--mlc-site-card); color: var(--mlc-site-text);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mlc-icon-btn:hover { color: var(--mlc-site-accent); border-color: var(--mlc-site-accent); }
.mlc-icon-btn:focus-visible { outline: 2px solid var(--mlc-site-accent); outline-offset: 2px; }
.mlc-icon-btn--accent {
  background: var(--mlc-site-accent); color: #fff; border-color: var(--mlc-site-accent);
}
.mlc-icon-btn--accent:hover { background: color-mix(in oklch, var(--mlc-site-accent) 86%, black); color: #fff; }

/* 검색: 아이콘 → 클릭 시 입력창이 옆으로 펼쳐짐 */
.mlc-search {
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mlc-search.is-open {
  background: var(--mlc-site-card); border-color: var(--mlc-site-border);
}
.mlc-search.is-open:focus-within { border-color: var(--mlc-site-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--mlc-site-accent) 16%, transparent); }
.mlc-search-toggle { border: 0; background: transparent; }
.mlc-search.is-open .mlc-search-toggle { color: var(--mlc-site-muted); }
.mlc-search-input {
  width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--mlc-site-title);
  opacity: 0; transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.mlc-search.is-open .mlc-search-input { width: clamp(120px, 22vw, 200px); padding: 0 12px 0 2px; opacity: 1; }
.mlc-search-input::placeholder { color: var(--mlc-site-muted); }

.mlc-grid-search {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--mlc-site-card); border: 1px solid var(--mlc-site-border);
  border-radius: 6px; color: var(--mlc-site-muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mlc-grid-search:focus-within {
  border-color: var(--mlc-site-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--mlc-site-accent) 18%, transparent);
}
.mlc-grid-search input {
  border: 0; outline: 0; background: transparent; font: inherit;
  color: var(--mlc-site-title); width: 160px;
}
.mlc-grid-search input::placeholder { color: var(--mlc-site-muted); }

.mlc-grid-btn {
  height: 36px; padding: 0 14px; border-radius: 6px; font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mlc-grid-btn--ghost {
  background: var(--mlc-site-card); color: var(--mlc-site-text); border: 1px solid var(--mlc-site-border);
}
.mlc-grid-btn--ghost:hover { border-color: var(--mlc-site-muted); }
.mlc-grid-btn--accent {
  background: var(--mlc-site-accent); color: #fff; border: 1px solid var(--mlc-site-accent);
}
.mlc-grid-btn--accent:hover { background: color-mix(in oklch, var(--mlc-site-accent) 88%, black); }

/* 정렬 버튼 */
.mlc-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--mlc-site-card); border: 1px solid var(--mlc-site-border); }
.mlc-sort-btn {
  padding: 0 12px; height: 28px; border-radius: 6px; font-size: 13px; font-weight: 600;
  color: var(--mlc-site-muted); text-decoration: none;
  display: inline-flex; align-items: center; transition: background 0.15s ease, color 0.15s ease;
}
.mlc-sort-btn:hover { color: var(--mlc-site-title); }
.mlc-sort-btn.is-active { background: var(--mlc-site-accent); color: #fff; }

/* ---- 중앙: 랙에서 뽑혀 떠오른 테이프 ---- */
/* overflow:hidden 을 두지 않는다 — 카세트 drop-shadow 가 이 박스 경계에서 잘리기 때문.
   중앙 정렬 + 큰 카세트로 콘텐츠가 세로 공간을 더 채워 작성자↔랙 여백을 줄인다.
   아래로 살짝 치우치도록 padding-top 을 padding-bottom 보다 크게. */
/* flex-end + 고정 padding-bottom → 화면 높이와 무관하게 작성자↔랙 여백을 일정하게 작게 유지.
   남는 세로 공간은 헤더↔카세트(위)로 흡수(헤더 제목이 상단을 앵커). */
.mlc-hero-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: clamp(10px, 1.6vh, 20px); min-height: 0;
  padding: 0 clamp(16px, 3vw, 40px) clamp(24px, 5vh, 60px);
  text-align: center;
}
.mlc-hero-tape {
  position: relative; display: block; width: min(44vw, 32vh * 560 / 340, 540px); max-width: 100%;
  text-decoration: none; border-radius: 12px;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1), filter 0.24s ease;
  /* 단일 그림자만 — 아래 .mlc-cassette-wrap 의 기본 그림자는 끈다(이중 그림자 방지) */
  filter: drop-shadow(0 20px 34px color-mix(in oklch, var(--stage-main) 34%, transparent));
}
.mlc-hero-tape:hover, .mlc-hero-tape:focus-visible {
  transform: translateY(-8px) scale(1.035);
  filter: drop-shadow(0 30px 48px color-mix(in oklch, var(--stage-main) 46%, transparent));
}
.mlc-hero-tape:focus-visible { outline: 2px solid var(--mlc-site-accent); outline-offset: 10px; }
.mlc-hero-art { display: block; }
.mlc-hero-art .mlc-cassette-wrap { width: 100%; filter: none; }
.mlc-hero-art svg {width: 100%;height: auto;display: block;/* backdrop-filter: drop-shadow(2px 4px 6px black); */}

/* 호버 시 카세트 위로 떠오르는 재생 버튼 */
.mlc-hero-play {
  position: absolute; left: 50%; top: 50%;
  width: clamp(56px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(1 0 0 / 0.82); color: var(--stage-p1);
  border: 1px solid oklch(1 0 0 / 0.7);
  box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translate(-50%, -38%) scale(0.8);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
  pointer-events: none;
}
/* 삼각형은 오른쪽을 향해 시각 무게가 왼쪽에 쏠리므로, 원 정중앙에 있어 보이도록 아주 살짝 오른쪽으로 */
.mlc-hero-play svg { width: 38%; height: 38%; position: relative; left: 4%; }
.mlc-hero-tape:hover .mlc-hero-play,
.mlc-hero-tape:focus-visible .mlc-hero-play {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
/* 테이프가 바뀔 때마다 살짝 떠오르며 자리잡는다 */
.mlc-hero-art.is-in { animation: mlc-lift 0.26s cubic-bezier(0.2, 0.8, 0.25, 1); }
@keyframes mlc-lift {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

.mlc-hero-info { max-width: min(560px, 90vw); }
.mlc-hero-eyebrow {
  margin: 0 0 6px; font-family: var(--mlc-site-body-font);
  font-size: 11px; letter-spacing: 0.2em; color: var(--mlc-site-muted);
}
.mlc-hero-title {
  margin: 0;
  font-family: var(--mlc-site-title-font);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.25;
  color: var(--mlc-site-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlc-hero-sub { margin: 6px 0 0; font-size: 13px; color: var(--mlc-site-muted); }

/* ---- 하단: 화면 최하단에 붙어 호를 그리는 테이프 랙 ---- */
/* mask-image 를 쓰지 않는다 — CSS 마스크는 mask-clip:border-box 라 자식(테이프)의 위쪽 그림자를
   랙 박스 경계에서 잘라낸다(overflow 와 무관). 좌우 페이드는 JS 가 거리별 opacity 로 처리하고,
   화면 밖은 .mlc-stage 의 overflow:hidden 이 담당하므로 마스크 없이도 충분하다. */
.mlc-rack {
  position: relative; overflow: visible;
  height: calc(var(--rack-w) * 340 / 560 + clamp(46px, 6vh, 76px));
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.mlc-rack.is-drag { cursor: grabbing; }
.mlc-rack-track { position: absolute; inset: 0; }
.mlc-rack-item {
  position: absolute; left: 50%; top: clamp(10px, 1.4vh, 18px);
  width: var(--rack-w); display: block; text-decoration: none;
  will-change: transform, opacity;
  transform-origin: 50% 120%;
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.16));
}
.mlc-rack-item svg { width: 100%; height: auto; display: block; }
.mlc-rack-item:focus-visible { outline: 2px solid var(--mlc-site-accent); outline-offset: 4px; }

/* ---- 오른쪽 서랍: 등록순 목록 (왼쪽 전역 메뉴를 쓰는 사이트와 겹치지 않도록 우측 배치) ---- */
.mlc-side {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 6;
  width: min(320px, 82vw);
  display: flex;
  flex-direction: column;
  background: rgb(from var(--mlc-site-card) r g b / 60%);
  border: 1px solid var(--mlc-site-border);
  border-radius: var(--mlc-radius) 0 0 var(--mlc-radius);
  box-shadow: -12px 0 40px -28px rgb(from var(--black) r g b / 45%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.mlc-side.is-open { transform: none; }
.mlc-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 10px; */
  padding: 18px 14px 14px 20px;
  border-bottom: 1px solid var(--mlc-site-border);
}
.mlc-side-title {
  margin: 0;
  font-family: var(--mlc-site-title-font);
  font-weight: 700;
  font-size: 18px;
  color: var(--mlc-site-title);
}
.mlc-side-count {font-size: 12px;color: var(--mlc-site-muted);padding: 0px 0px 0px 150px;}
.mlc-side-list {
  list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 0;
  scrollbar-width: thin;
}
.mlc-side-row {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
.mlc-side-row:hover { background: color-mix(in oklch, var(--mlc-site-accent) 8%, transparent); }
.mlc-side-row.is-active { background: color-mix(in oklch, var(--mlc-site-accent) 14%, transparent); }
.mlc-side-chip {
  width: 34px; height: 21px; border-radius: 4px;
  background: linear-gradient(135deg, var(--c1) 55%, var(--c2) 55%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
.mlc-side-meta { min-width: 0; }
.mlc-side-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--mlc-site-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mlc-side-sub { display: block; font-size: 11px; color: var(--mlc-site-muted); }

/* 헤더 맨 왼쪽의 아이콘 버튼 하나가 서랍을 연다 */
.mlc-side-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mlc-site-border); border-radius: 10px;
  background: var(--mlc-site-card); color: var(--mlc-site-text);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mlc-side-btn:hover { color: var(--mlc-site-accent); border-color: var(--mlc-site-accent); }
.mlc-side-btn:focus-visible { outline: 2px solid var(--mlc-site-accent); outline-offset: 2px; }
.mlc-side-btn-icon {
  position: relative; display: block;
  width: 16px; height: 2px; border-radius: 2px; background: currentColor;
}
.mlc-side-btn-icon::before, .mlc-side-btn-icon::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 2px; border-radius: 2px; background: currentColor;
}
.mlc-side-btn-icon::before { top: -5px; }
.mlc-side-btn-icon::after { top: 5px; }

.mlc-side-backdrop {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(15, 23, 42, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.26s ease;
}
.mlc-stage.side-open .mlc-side-backdrop { opacity: 1; pointer-events: auto; }

.mlc-side-close {
  width: 28px; height: 28px; padding: 0; cursor: pointer; flex: 0 0 auto;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--mlc-site-muted); font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.mlc-side-close:hover { background: color-mix(in oklch, var(--mlc-site-accent) 10%, transparent); color: var(--mlc-site-title); }

@media (max-width: 720px) {
  /* 좁은 화면에선 3열 유지 시 제목이 눌리므로 2행(제목 위 / 액션 아래)으로 */
  .mlc-stage-header { grid-template-columns: 1fr; padding-bottom: 16px; }
  .mlc-grid-heading { grid-column: 1; }
  .mlc-grid-actions { grid-column: 1; justify-self: center; }
  .mlc-grid-subtitle { display: none; }
}

/* =========================================================
   재생 모달 (그리드 위 글래스 모달, visionOS 톤)
   ========================================================= */
.mlc-modal-root {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px); box-sizing: border-box;
  font-family: var(--mlc-site-body-font);
  pointer-events: none;   /* 닫힘 = 클릭이 뒤 그리드로 통과 */
}
.mlc-modal-root.is-open { pointer-events: auto; }
.mlc-modal-overlay {
  position: absolute;
  inset: 0;
  background: transparent;   /* 어둡게 만들지 않음 — 블러 + 뒤 드리프트 그래디언트만 */
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mlc-modal-root.is-open .mlc-modal-overlay { opacity: 1; }

.mlc-modal {
  position: relative; z-index: 1;
  width: min(960px, 100%); max-height: min(90vh, 800px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px;
  background: oklch(1 0 0 / 0.72);
  border: 1px solid oklch(1 0 0 / 0.5);
  box-shadow: 0 40px 90px -30px rgba(15, 23, 42, 0.55), 0 2px 8px rgba(15, 23, 42, 0.12),
              inset 0 1px 0 oklch(1 0 0 / 0.6);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  color: oklch(0.22 0.02 260);
  /* 닫힘: 아래로 내려가 있고 투명 → 열리면 위로 슬라이드인, 닫으면 아래로 슬라이드아웃 */
  opacity: 0; transform: translateY(56px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.28, 1);
}
.mlc-modal-root.is-open .mlc-modal { opacity: 1; transform: none; }

/* 테이프 색조 헤일로 */
.mlc-modal-halo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.mlc-modal-halo::before, .mlc-modal-halo::after {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(60px); opacity: 0.4;
}
.mlc-modal-halo::before { top: -20%; left: -10%; background: radial-gradient(circle, var(--tape-p1), transparent 65%); }
.mlc-modal-halo::after { bottom: -25%; right: -12%; background: radial-gradient(circle, var(--tape-main), transparent 65%); }
/* 흐름 콘텐츠만 헤일로 위로. 절대배치(topbar/tap)는 제외해야 그 position:absolute 가 안 덮인다
   (안 그러면 topbar 가 relative 로 강제돼 right:12 가 무시되고 삭제 버튼이 카드 밖으로 나가 잘림). */
.mlc-modal > *:not(.mlc-modal-halo):not(.mlc-modal-topbar):not(.mlc-modal-tap) { position: relative; z-index: 1; }

/* 상단바: 뒤로가기(좌) · 수정/삭제(우) — 테두리·배경 없는 아이콘만 */
.mlc-modal-topbar {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mlc-modal-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.mlc-modal-ibtn, .mlc-modal-back {
  flex: 0 0 auto;
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent;
  color: var(--mlc-site-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; font-size: 17px; transition: color 0.15s ease, background 0.15s ease;
}
.mlc-modal-ibtn:hover, .mlc-modal-back:hover { color: var(--tape-p1); background: oklch(1 0 0 / 0.4); }
.mlc-modal-ibtn--danger:hover { color: oklch(0.55 0.22 25); }

.mlc-modal-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 40px) clamp(16px, 2vw, 24px);
}
.mlc-modal-art { display: flex; align-items: center; justify-content: center; }
.mlc-modal-cassette { width: 100%; filter: drop-shadow(0 24px 44px rgb(from var(--tape-main) r g b / 40%)); }
.mlc-modal-cassette .mlc-cassette-wrap { width: 100%; filter: none; }
.mlc-modal-cassette svg { width: 100%; height: auto; display: block; }

/* 텍스트/아이콘은 테이프 컬러링을 따른다(가독성 위해 어두운 톤과 믹스). --tape-* 는 modal-player 가 카드에 설정 */
.mlc-modal-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mlc-modal-author { margin: 0; font-size: 13px; color: var(--mlc-site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-modal-title {
  margin: 0;
  font-family: var(--mlc-site-title-font);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  /* overflow:hidden 은 줄상자(=line-height) 기준으로 자른다. 고정 배수(1.15)는 서체의
     실제 글리프 높이(ascent+descent)보다 작아질 수 있어 상·하단이 잘렸다.
     normal 은 서체가 알려주는 높이를 그대로 써서 폰트·크기가 바뀌어도 잘리지 않는다. */
  line-height: normal;
  color: var(--mlc-site-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 현재 재생 곡 카드 */
.mlc-modal-nowcard {
  margin-top: 4px;
  padding: 14px 18px;
  border-radius: 16px;
  /* background: var(--mlc-site-card); */
  /* border: 1px solid oklch(1 0 0 / 0.6); */
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  align-items: flex-start;
}
.mlc-modal-now-title { font-size: 15px; font-weight: 700; color: var(--mlc-site-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-modal-now-artist { font-size: 13px; color: var(--mlc-site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlc-modal-progress { margin-top: 8px; }

/* 컨트롤: [셔플·반복] | [이전·재생·다음] | [볼륨] — 3분할 그리드라 재생 버튼이 항상 상대 중앙 */
.mlc-modal-controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 10px; gap: 8px;
}
/* min-width:0 이라야 양쪽 1fr 컬럼이 콘텐츠(좌 2버튼·우 1버튼) 크기에 눌리지 않고 동일 폭이 되어
   가운데 그룹(이전·재생·다음)이 진짜 중앙에 오고 재생 버튼이 정중앙에 보인다. */
.mlc-mc-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mlc-mc-left { justify-self: start; }
.mlc-mc-right { justify-self: end; }
.mlc-mc-center { justify-self: center; display: flex; align-items: center; gap: 10px; }

.mlc-mctrl {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid oklch(1 0 0 / 0.4);
  background: oklch(1 0 0 / 0.5);
  color: var(--mlc-site-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.mlc-mctrl:hover { background: oklch(1 0 0 / 0.85); }
.mlc-mctrl.is-on { color: var(--tape-p1); }
/* 셔플·반복·볼륨: 배경/테두리 없는 아이콘만 */
.mlc-mctrl--plain { width: 38px; height: 38px; border: 0; background: transparent; color: var(--mlc-site-muted); }
.mlc-mctrl--plain:hover { background: transparent; color: var(--tape-p1); }
.mlc-mctrl--plain.is-on { color: var(--tape-p1); }
.mlc-mctrl--toggle:not(.is-on) { opacity: 0.45; }
.mlc-mctrl.is-one::after { content: "1"; position: absolute; right: 6px; bottom: 4px; font-size: 9px; font-weight: 800; color: var(--tape-p1); }
.mlc-mctrl--play {
  width: 60px; height: 60px; color: #fff; border-color: transparent;
  background: var(--tape-p1);
  box-shadow: 0 12px 26px -8px color-mix(in oklch, var(--tape-p1) 60%, transparent);
}
.mlc-mctrl--play:hover { transform: scale(1.06); background: var(--tape-p1); }
/* fa-play 삼각형은 광학적으로 왼쪽에 치우쳐 보이므로 살짝 오른쪽으로(일시정지 아이콘은 대칭이라 보정 안 함) */
.mlc-mctrl--play .fa-play { position: relative; left: 2px; }

/* 수록곡 헤더 — 플레이어와 수록곡 사이 구분선(깔끔한 얇은 보더) */
.mlc-modal-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(12px, 1.8vw, 18px) clamp(18px, 2.4vw, 30px) 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mlc-site-text);
  /* background: oklch(1 0 0 / 0.22); */
  border-top: 1px solid var(--mlc-site-border);
}
.mlc-modal-listcount { font-size: 12px; font-weight: 600; color: var(--mlc-site-muted); }
.mlc-modal-tracklist {
  list-style: none;
  margin: 0;
  padding: 2px clamp(16px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: clamp(150px, 26vh, 260px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  /* background: oklch(1 0 0 / 0.22); */
}
.mlc-modal-track {
  width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s ease;
}
.mlc-modal-track:hover { background: oklch(1 0 0 / 0.55); }
.mlc-modal-track.is-active {background: rgb(from var(--tape-p2) r g b / 30%);box-shadow: 0 40px 90px -30px rgba(15, 23, 42, 0.55), 0 2px 8px rgba(15, 23, 42, 0.12);}
.mlc-modal-track.is-active .mlc-modal-track-title {color: var(--tape-text);font-weight: 600;opacity: 100%;}
.mlc-modal-track-num { font-family: var(--mlc-site-body-font); font-size: 11px; color: var(--mlc-site-muted); }
.mlc-modal-track-meta { min-width: 0; }
.mlc-modal-track-title {display: block;font-size: 14px;font-weight: 400;color: var(--mlc-site-title);overflow: hidden;opacity: 70%;text-overflow: ellipsis;white-space: nowrap;}
.mlc-modal-track-artist { display: block; font-size: 12px; color: var(--mlc-site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-modal-empty { text-align: center; padding: 30px; font-size: 13px; color: oklch(0.55 0.02 260); }

.mlc-modal-tap {
  display: none; position: absolute; inset: 0; z-index: 4;
  align-items: center; justify-content: center; gap: 8px;
  background: oklch(0.15 0.02 240 / 0.45); color: #fff; border-radius: 24px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.mlc-modal-root.needs-tap .mlc-modal-tap { display: flex; }

/* 모달 열려 있으면(=재생 중) 뒤 그리드는 조작 불가 (오버레이가 덮지만 명시) */
.mlc-stage.is-playing .mlc-rack,
.mlc-stage.is-playing .mlc-hero-tape { pointer-events: none; }

@media (max-width: 680px) {
  .mlc-modal-body { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .mlc-modal-art { max-width: 240px; margin: 0 auto; }
  .mlc-modal-author, .mlc-modal-title { text-align: center; }
  .mlc-modal-nowcard { text-align: left; }
}

.mlc-grid-empty { text-align: center; color: var(--mlc-site-muted); padding: 60px 20px; }
.mlc-grid-foot { text-align: center; color: var(--mlc-site-muted); font-size: 12px; margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .mlc-reel--spin, .mlc-soundbar i,
  .mlc-app-wrap.is-playing .mlc-gradient-bg::before,
  .mlc-app-wrap.is-playing .mlc-gradient-bg::after,
  .mlc-svg-mq,
  .mlc-marquee.is-scrolling > .mlc-mq-inner { animation: none; }
  .mlc-hero-art.is-in { animation: none; }
  .mlc-hero-tape, .mlc-hero-play, .mlc-side, .mlc-side-btn,
  .mlc-modal, .mlc-modal-overlay { transition: none; }
}

/* =========================================================
   등록/수정 폼 (write.skin.php) — 글래스모피즘
   ========================================================= */
.mlc-write {
  position: relative; max-width: 900px; margin-inline: auto;
  background: transparent;   /* .mlc-grid-root 의 불투명 배경을 지워 아래 ::before 앰비언트가 비치게 */
}
/* 글래스가 읽히도록 화면 고정 앰비언트 그래디언트를 뒤에 깐다 */
.mlc-write::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 12% -10%, color-mix(in oklch, #5b8dbf 22%, transparent), transparent 72%),
    radial-gradient(60vw 55vh at 100% 110%, color-mix(in oklch, #e0637f 20%, transparent), transparent 74%),
    var(--mlc-site-bg);
}
.mlc-write-header h2 {
  font-family: var(--mlc-site-title-font); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); color: var(--mlc-site-title); margin: 0 0 22px;
}

/* 글래스 패널 */
.mlc-wpanel, .mlc-style-panel {
  background: var(--mlc-glass-strong);
  border: 1px solid var(--mlc-glass-border);
  border-radius: var(--mlc-radius);
  box-shadow: var(--mlc-shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 22px 24px; margin-bottom: 18px;
}
.mlc-wpanel > h3, .mlc-style-left h3 {
  margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--mlc-site-title);
}
.mlc-optional { font-weight: 400; font-size: 12px; color: var(--mlc-site-muted); }
.mlc-row { margin-bottom: 10px; }
.mlc-row:last-child { margin-bottom: 0; }
.mlc-row--split { display: flex; gap: 10px; flex-wrap: wrap; }
.mlc-row--split > * { flex: 1; min-width: 140px; }
.mlc-input {
  width: 100%; box-sizing: border-box; padding: 10px 13px; font: inherit; font-size: 14px;
  border: 1px solid var(--mlc-glass-border); border-radius: 10px;
  background: oklch(1 0 0 / 0.55); color: var(--mlc-site-title);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mlc-input::placeholder { color: var(--mlc-site-muted); }
.mlc-input:focus {
  outline: 0; background: oklch(1 0 0 / 0.8);
  border-color: var(--mlc-site-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--mlc-site-accent) 18%, transparent);
}

.mlc-song-rows { display: flex; flex-direction: column; gap: 8px; }
.mlc-song-row { display: flex; gap: 8px; align-items: center; }
.mlc-song-num { flex: 0 0 20px; text-align: center; font-size: 12px; color: var(--mlc-site-muted); }
.mlc-song-row .mlc-song-title { flex: 0 0 26%; min-width: 0; }
.mlc-song-row .mlc-song-artist { flex: 0 0 22%; min-width: 0; }
.mlc-song-row .mlc-song-url { flex: 1; min-width: 0; }
.mlc-song-del {
  flex: 0 0 36px; height: 36px; border-radius: 10px; border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.5); color: var(--mlc-site-muted); font-size: 16px; cursor: pointer; line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mlc-song-del:hover { color: #d33; border-color: #e7b3b3; }
.mlc-song-add {
  margin-top: 12px; padding: 10px 16px; border-radius: 10px; border: 1px dashed var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.25); color: var(--mlc-site-text); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mlc-song-add:hover { border-color: var(--mlc-site-accent); color: var(--mlc-site-accent); }

.mlc-style-panel {
  display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 24px;
}
@media (max-width: 640px) { .mlc-style-panel { grid-template-columns: 1fr; } }
/* Depth / 투명도 / 다크 세그먼트 버튼 */
.mlc-fx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#mlc_opacity_grid { grid-template-columns: repeat(9, 1fr); }
.mlc-fx-btn {
  padding: 8px 4px; border-radius: 9px; border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.45); color: var(--mlc-site-text); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.mlc-fx-btn:hover { border-color: var(--mlc-site-muted); background: oklch(1 0 0 / 0.7); }
.mlc-fx-btn.is-active { border-color: var(--mlc-site-accent); background: color-mix(in oklch, var(--mlc-site-accent) 14%, oklch(1 0 0 / 0.6)); color: var(--mlc-site-accent); }
.mlc-palette-actions { display: flex; gap: 8px; margin-top: 10px; }
.mlc-mini-btn {
  flex: 1; padding: 8px; border-radius: 9px; border: 1px solid var(--mlc-glass-border);
  background: oklch(1 0 0 / 0.5); color: var(--mlc-site-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.mlc-mini-btn:hover { border-color: var(--mlc-site-accent); color: var(--mlc-site-accent); }
/* 프리셋·팔레트 드롭다운 (사이트 폼 토큰 상속) */
.mlc-select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mlc-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--mlc-site-muted); }
.mlc-select {
  width: 100%; padding: 9px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--form-border-color);
  border-radius: var(--form-border-radius);
  background: var(--form-bg-color);
  color: var(--form-text-color);
  transition: border-color var(--transition-fast, 0.15s ease);
}
.mlc-select:hover { border-color: var(--mlc-site-muted); }
.mlc-select:focus { outline: none; border-color: var(--mlc-site-accent); }
@media (max-width: 560px) { .mlc-select-row { grid-template-columns: 1fr; } }
.mlc-color-rows { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.mlc-color-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--mlc-site-muted); cursor: pointer; }
.mlc-color-item input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--mlc-glass-border); border-radius: 8px; background: oklch(1 0 0 / 0.6); cursor: pointer; }
.mlc-style-preview { display: flex; align-items: center; justify-content: center; }
.mlc-write-preview { width: 100%; filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.22)); }
.mlc-write-preview .mlc-cassette-wrap { width: 100%; }

.mlc-write-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.mlc-write-actions .mlc-grid-btn { height: 42px; padding: 0 24px; border-radius: 12px; }