:root {
  --bg-color: #000000;
  --surface-color: #111111;
  --surface-hover: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --brand-color: #1DB954;
  --brand-hover: #1ed760;
  --divider: #222222;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand: 'Gaegu', 'Caveat', cursive;
  --player-height: 72px;
  --sidebar-width: 220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--player-height);
  overflow-x: hidden;
}

a { color: var(--text-primary); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ===================== BOTTOM NAV (HAMBURGER) ===================== */
.sidebar-nav {
  display: none; /* hidden by default, shown via JS toggle */
  position: fixed; bottom: var(--player-height); left: 0; right: 0;
  background: rgba(8,8,8,0.97);
  flex-direction: column; padding: 20px 24px 24px; z-index: 1000;
  border-top: 1px solid var(--divider);
  backdrop-filter: blur(24px);
  max-height: 70vh; overflow-y: auto;
  animation: slideUp 0.35s cubic-bezier(0.22,1,0.36,1);
}
.sidebar-nav.open { display: flex; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.sidebar-logo {
  font-size: 20px; font-weight: 800; color: var(--brand-color);
  margin-bottom: 18px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-links { display: flex; flex-direction: column; gap: 2px; }
.sidebar-links a {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px;
  border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--text-secondary);
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.sidebar-links a i { font-size: 22px; width: 24px; text-align: center; }
.sidebar-links a:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.sidebar-links a.active { color: var(--text-primary); }
.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-hover); border-radius: 20px; padding: 10px 14px; margin: 14px 0;
}
.sidebar-search i { color: var(--text-secondary); font-size: 15px; }
.sidebar-search input { background: transparent; border: none; color: white; width: 100%; outline: none; font-size: 13px; }
.sidebar-divider { height: 1px; background: var(--divider); margin: 8px 0; }
.sidebar-playlists { overflow-y: auto; max-height: 120px; }
.sidebar-playlists-title { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700; }
.sidebar-playlist-item { padding: 5px 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-radius: 4px; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-playlist-item:hover { color: var(--text-primary); }
.sidebar-user { padding: 14px 0 0; border-top: 1px solid var(--divider); margin-top: 8px; }

/* Hamburger toggle button */
.hamburger-btn {
  position: fixed;
  bottom: calc(var(--player-height) + 16px);
  left: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(30,30,30,0.9);
  border: 1px solid var(--divider);
  color: white;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1001;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s, left 0.35s cubic-bezier(0.22,1,0.36,1), top 0.35s cubic-bezier(0.22,1,0.36,1), bottom 0.35s cubic-bezier(0.22,1,0.36,1);
}
.hamburger-btn:hover { background: var(--brand-color); transform: scale(1.1); }
.hamburger-btn.open { background: var(--brand-color); }

/* ===================== DESKTOP (≥900px) — left side panel, always hidden by default, toggleable ===================== */
@media (min-width: 900px) {
  .sidebar-nav {
    /* Always rendered on desktop; visibility controlled by transform so the
       transition is smooth in both directions. */
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: var(--player-height);
    left: 0; right: auto;
    width: 260px; max-height: none;
    padding: 22px 20px 22px;
    border-top: none;
    border-right: 1px solid var(--divider);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
    animation: none;
    z-index: 1100;
  }
  .sidebar-nav.open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0,0,0,0.5);
  }
  /* Hamburger sits top-left on desktop, slides with the panel when open */
  .hamburger-btn {
    top: 16px;
    bottom: auto;
    left: 16px;
  }
  .hamburger-btn.open { left: 276px; }

  /* Reserve space at top-left so page titles aren't covered by the fixed hamburger button.
     Targets left-edge page headers; excludes centered .card layouts (auth, upload). */
  #app-content > h1:first-child,
  #app-content > div:first-child:not(.card) > h1:first-child,
  #app-content > section:first-child > h1:first-child,
  #app-content > .reveal:first-child > h1:first-child,
  #app-content > .tags-page-header,
  #app-content > .wall-header,
  #app-content > .wall-board > .wall-header-v2,
  #app-content > .album-hero,
  #app-content > .pl-hero,
  #app-content .album-hero-title,
  #app-content .tag-hero-title,
  #app-content .pl-title {
    padding-left: 64px;
  }
}

/* ===================== MAIN LAYOUT ===================== */
.layout-wrapper { margin-left: 0; }
#app-content {
  min-height: calc(100vh - var(--player-height));
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ===================== FLOATING SHAPES ===================== */
.shapes-universe {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--player-height));
  overflow: hidden;
  background: #000;
}
/* Starfield: two layered point fields with offset twinkle so the whole sky doesn't pulse in unison */
.shapes-universe::before,
.shapes-universe::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-size: 380px 380px;
}
.shapes-universe::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent 65%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.85), transparent 65%),
    radial-gradient(1.8px 1.8px at 44% 28%, #fff, transparent 65%),
    radial-gradient(1px 1px at 58% 72%, rgba(210,225,255,0.9), transparent 65%),
    radial-gradient(1.2px 1.2px at 71% 12%, #fff, transparent 65%),
    radial-gradient(1px 1px at 84% 48%, rgba(255,235,250,0.85), transparent 65%),
    radial-gradient(1.4px 1.4px at 8% 78%, #fff, transparent 65%),
    radial-gradient(1px 1px at 36% 88%, rgba(195,210,255,0.85), transparent 65%),
    radial-gradient(1.6px 1.6px at 92% 82%, #fff, transparent 65%),
    radial-gradient(1px 1px at 64% 36%, rgba(255,255,255,0.7), transparent 65%);
  animation: starTwinkleA 4.5s ease-in-out infinite;
}
.shapes-universe::after {
  background-image:
    radial-gradient(1px 1px at 6% 32%, rgba(255,255,255,0.7), transparent 65%),
    radial-gradient(1.2px 1.2px at 22% 8%, #fff, transparent 65%),
    radial-gradient(1px 1px at 38% 46%, rgba(255,240,220,0.8), transparent 65%),
    radial-gradient(1.5px 1.5px at 52% 18%, #fff, transparent 65%),
    radial-gradient(1px 1px at 66% 60%, rgba(220,230,255,0.85), transparent 65%),
    radial-gradient(1.3px 1.3px at 78% 24%, #fff, transparent 65%),
    radial-gradient(1px 1px at 94% 56%, rgba(255,255,255,0.7), transparent 65%),
    radial-gradient(1.4px 1.4px at 14% 92%, #fff, transparent 65%),
    radial-gradient(1px 1px at 48% 96%, rgba(230,225,255,0.8), transparent 65%),
    radial-gradient(1.2px 1.2px at 82% 70%, #fff, transparent 65%);
  background-position: 190px 190px;
  animation: starTwinkleB 7s ease-in-out infinite;
}
@keyframes starTwinkleA {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.45; }
}
@keyframes starTwinkleB {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

.floating-shape {
  position: absolute;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: var(--font-hand);
  font-weight: 700;
  color: #000;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s;
  user-select: none;
  z-index: 1;
}
.floating-shape:hover {
  transform: scale(1.15) !important;
  filter: brightness(1.2) drop-shadow(0 0 24px currentColor);
  z-index: 20;
}
.floating-shape.dragging {
  transform: scale(1.12) !important;
  filter: brightness(1.3) drop-shadow(0 0 30px currentColor);
  z-index: 50 !important;
  cursor: grabbing;
}
.floating-shape.resizing {
  z-index: 60 !important;
  filter: brightness(1.2) drop-shadow(0 0 20px currentColor);
}

/* Resize handle (bottom-right corner) */
.shape-resize-handle {
  position: absolute;
  bottom: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 5;
  touch-action: none;
}
.floating-shape:hover .shape-resize-handle { opacity: 1; }
/* Triangle has no background — hide handle for triangles */
.shape-triangle .shape-resize-handle { display: none; }

/* Always show handle on touch devices */
@media (hover: none) and (pointer: coarse) {
  .shape-resize-handle { opacity: 0.85; }
}
.floating-shape .shape-text {
  font-size: 21px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: keep-all;
  max-width: 220px;
  pointer-events: none;
}

/* Shape types */
.shape-circle { border-radius: 50%; width: 305px; height: 305px; }
.shape-oval { border-radius: 50%; width: 280px; height: 180px; }
.shape-rect { border-radius: 6px; width: 325px; height: 238px; }
.shape-triangle {
  width: 0; height: 0;
  border-left: 130px solid transparent; border-right: 130px solid transparent;
  border-bottom: 230px solid currentColor;
  background: none !important; padding: 0;
}
.shape-triangle .shape-text {
  position: absolute; bottom: -210px; left: 50%; transform: translateX(-50%);
  width: 180px; color: #000;
}
.shape-star {
  width: 320px; height: 320px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* Star's inner safe rectangle (22% wide max) only fits ~26% tall before the bottom legs cut it */
.shape-star .shape-text {
  max-width: 70px;
  max-height: 78px;
  font-size: 11px;
  line-height: 1.18;
  font-weight: 700;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shape-parallelogram {
  width: 280px; height: 170px;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  border-radius: 2px;
}
.shape-diamond {
  width: 285px; height: 285px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape-hexagon {
  width: 305px; height: 267px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* === New vintage-friendly shapes (solid fill, no gradient/glow — 빈티지 톤 유지) === */
.shape-squircle { border-radius: 22%; width: 305px; height: 305px; }

/* SVG-mask shapes: element keeps its inline `background:<color>`,
   the mask just cuts the silhouette out. No fancy effects. */
.shape-cloud, .shape-heart, .shape-blob, .shape-speech-bubble {
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: center;           mask-position: center;
  -webkit-mask-size: contain;              mask-size: contain;
  border-radius: 0;
}
.shape-cloud {
  width: 352px; height: 228px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'><path d='M22,58 C10,58 2,50 2,40 C2,30 10,23 22,24 C24,12 33,5 46,5 C58,5 67,12 70,24 C82,23 92,30 92,40 C92,50 82,58 72,58 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'><path d='M22,58 C10,58 2,50 2,40 C2,30 10,23 22,24 C24,12 33,5 46,5 C58,5 67,12 70,24 C82,23 92,30 92,40 C92,50 82,58 72,58 Z' fill='black'/></svg>");
}
.shape-heart {
  width: 305px; height: 280px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'><path d='M50,88 C25,68 5,52 5,28 C5,15 15,5 28,5 C38,5 47,12 50,22 C53,12 62,5 72,5 C85,5 95,15 95,28 C95,52 75,68 50,88 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'><path d='M50,88 C25,68 5,52 5,28 C5,15 15,5 28,5 C38,5 47,12 50,22 C53,12 62,5 72,5 C85,5 95,15 95,28 C95,52 75,68 50,88 Z' fill='black'/></svg>");
}
.shape-blob {
  width: 305px; height: 292px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'><path d='M70,6 C86,12 96,30 92,50 C88,70 78,84 60,90 C42,96 22,86 12,68 C2,50 6,28 22,14 C36,2 56,2 70,6 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'><path d='M70,6 C86,12 96,30 92,50 C88,70 78,84 60,90 C42,96 22,86 12,68 C2,50 6,28 22,14 C36,2 56,2 70,6 Z' fill='black'/></svg>");
}
.shape-speech-bubble {
  width: 330px; height: 280px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'><path d='M12,6 H88 Q94,6 94,12 V58 Q94,64 88,64 H44 L26,82 L30,64 H12 Q6,64 6,58 V12 Q6,6 12,6 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'><path d='M12,6 H88 Q94,6 94,12 V58 Q94,64 88,64 H44 L26,82 L30,64 H12 Q6,64 6,58 V12 Q6,6 12,6 Z' fill='black'/></svg>");
}

/* Tablet */
@media (max-width: 1024px) {
  .shape-squircle { width: 242px; height: 242px; }
  .shape-cloud { width: 280px; height: 181px; }
  .shape-heart { width: 242px; height: 222px; }
  .shape-blob { width: 242px; height: 232px; }
  .shape-speech-bubble { width: 260px; height: 222px; }
}
/* Mobile */
@media (max-width: 640px) {
  .shape-squircle { width: 197px; height: 197px; }
  .shape-cloud { width: 228px; height: 148px; }
  .shape-heart { width: 198px; height: 182px; }
  .shape-blob { width: 198px; height: 190px; }
  .shape-speech-bubble { width: 213px; height: 181px; }
}

/* Float animation */
@keyframes floatDrift {
  0%   { transform: translate(0, 0) rotate(var(--rot)); }
  25%  { transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * -1)) rotate(calc(var(--rot) + 2deg)); }
  50%  { transform: translate(var(--dx), calc(var(--dy) * -0.3)) rotate(calc(var(--rot) - 1deg)); }
  75%  { transform: translate(calc(var(--dx) * 0.3), var(--dy)) rotate(calc(var(--rot) + 1.5deg)); }
  100% { transform: translate(0, 0) rotate(var(--rot)); }
}

/* Decorative shapes (no text, just visual) */
.deco-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}

/* Upload button floating */
.upload-fab {
  position: fixed;
  bottom: calc(var(--player-height) + 24px);
  right: 32px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-color);
  color: white;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(29,185,84,0.5);
  z-index: 500;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
  cursor: pointer;
}
.upload-fab:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 8px 32px rgba(29,185,84,0.7);
}

/* Shuffle shape — 도형 페이지 우측 하단에 떠 있는 "도형" 모양 버튼.
   다른 도형들과 같은 .floating-shape 베이스를 쓰지만, position:fixed 라 항상 화면에 보임.
   누르면 도형 우주에서 랜덤 곡 골라 재생 + 그 도형까지 스크롤. */
.floating-shape.shuffle-shape {
  position: fixed !important;
  bottom: calc(var(--player-height) + 96px);
  right: 28px;
  /* 일반 도형보다 작게 (FAB 자리니까) — width/height는 shape-blob 기본 + override */
  width: 124px !important;
  height: 118px !important;
  z-index: 500;
  cursor: pointer;
  /* 살짝 비스듬히 + 둥둥 떠다니게 */
  transform: rotate(var(--rot, -6deg));
  animation: shuffle-shape-bob 4.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}
.floating-shape.shuffle-shape .shape-text {
  font-size: 24px !important;
  line-height: 1.15;
  font-weight: 800;
  max-width: 100px;
  color: #000;
}
.floating-shape.shuffle-shape:hover {
  transform: rotate(var(--rot, -6deg)) scale(1.08) !important;
  filter: drop-shadow(0 10px 26px rgba(255,64,129,0.7)) brightness(1.1);
  z-index: 510;
}
.floating-shape.shuffle-shape:active {
  transform: rotate(var(--rot, -6deg)) scale(0.95) !important;
}
@keyframes shuffle-shape-bob {
  0%,100% { transform: rotate(var(--rot, -6deg)) translateY(0); }
  50%     { transform: rotate(var(--rot, -6deg)) translateY(-7px); }
}

/* 주사위 — 평소엔 가만히, 호버 시 통통 튀면서 회전, 클릭 시 크게 점프 */
.floating-shape.shuffle-shape .shuffle-dice {
  display: inline-block;
  transform-origin: 50% 60%;
  /* idle 애니메이션 제거 — 평소엔 정지 */
}
.floating-shape.shuffle-shape:hover .shuffle-dice {
  /* linear + 사인곡선 키프레임 = 부드럽고 끊김 없는 바운스
     (cubic-bezier로 ease 주면 키프레임 경계마다 느려져서 뚝뚝 끊겨 보임) */
  animation: shuffle-dice-hop 0.6s linear infinite;
}
.floating-shape.shuffle-shape.rolling .shuffle-dice {
  /* 클릭 직후 — :hover 보다 우선하게 !important */
  animation: shuffle-dice-roll 0.55s linear 1 !important;
}

/* Hover: 사인 곡선 형태로 통통 튀면서 한 바퀴 회전 — linear 타이밍으로 끊김 제거 */
@keyframes shuffle-dice-hop {
  0%   { transform: translateY(0)    rotate(0deg); }
  15%  { transform: translateY(-9px)  rotate(54deg); }
  35%  { transform: translateY(-17px) rotate(126deg); }
  50%  { transform: translateY(-19px) rotate(180deg); }
  65%  { transform: translateY(-17px) rotate(234deg); }
  85%  { transform: translateY(-9px)  rotate(306deg); }
  100% { transform: translateY(0)    rotate(360deg); }
}
/* Click: 부드럽게 높이 점프 + 두 바퀴 + scale pulse */
@keyframes shuffle-dice-roll {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1); }
  20%  { transform: translateY(-22px) rotate(260deg) scale(1.18); }
  40%  { transform: translateY(-32px) rotate(440deg) scale(1.25); }
  60%  { transform: translateY(-22px) rotate(560deg) scale(1.18); }
  80%  { transform: translateY(-8px)  rotate(660deg) scale(1.08); }
  100% { transform: translateY(0)    rotate(720deg) scale(1); }
}

/* 현재 재생 중인 도형 — 글로우 펄스 (transform은 안 건드림, floatDrift 유지) */
.floating-shape.shape-playing {
  /* ::after 가상 요소로 ring 효과. 도형 본체 위에 펄스 ring 한 겹. */
  z-index: 30;
}
.floating-shape.shape-playing::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 3px var(--shape-color, #fff), 0 0 28px var(--shape-color, #fff);
  opacity: 0.55;
  animation: shape-playing-pulse 1.8s ease-in-out infinite;
}
/* SVG-mask 도형(.cloud/.heart/.blob/.speech-bubble) 은 ring이 silhouette 밖에 떠서 어색함 — 글로우만 */
.floating-shape.shape-playing.shape-cloud::after,
.floating-shape.shape-playing.shape-heart::after,
.floating-shape.shape-playing.shape-blob::after,
.floating-shape.shape-playing.shape-speech-bubble::after { display: none; }
.floating-shape.shape-playing.shape-cloud,
.floating-shape.shape-playing.shape-heart,
.floating-shape.shape-playing.shape-blob,
.floating-shape.shape-playing.shape-speech-bubble {
  filter: drop-shadow(0 0 22px var(--shape-color, #fff)) brightness(1.1);
  animation: shape-playing-glow 1.8s ease-in-out infinite;
}

@keyframes shape-playing-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--shape-color, #fff), 0 0 18px var(--shape-color, #fff); opacity: 0.45; }
  50%     { box-shadow: 0 0 0 4px var(--shape-color, #fff), 0 0 38px var(--shape-color, #fff); opacity: 0.85; }
}
@keyframes shape-playing-glow {
  0%,100% { filter: drop-shadow(0 0 14px var(--shape-color, #fff)) brightness(1.05); }
  50%     { filter: drop-shadow(0 0 30px var(--shape-color, #fff)) brightness(1.2); }
}

/* 셔플로 선택된 도형 — 짧게 빛나면서 사용자 시선을 끔 */
.shape-spotlight {
  z-index: 60 !important;
  animation: shape-spotlight-pulse 1.9s ease-out !important;
}
@keyframes shape-spotlight-pulse {
  0%   { filter: brightness(1)   drop-shadow(0 0 0    currentColor); transform: scale(1); }
  25%  { filter: brightness(1.45) drop-shadow(0 0 32px currentColor); transform: scale(1.18); }
  60%  { filter: brightness(1.25) drop-shadow(0 0 22px currentColor); transform: scale(1.08); }
  100% { filter: brightness(1)   drop-shadow(0 0 0    currentColor); transform: scale(1); }
}

/* ===================== PLAYER ===================== */
#global-player {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--player-height);
  background: rgba(10,10,10,0.95); border-top: 1px solid var(--divider);
  display: flex; align-items: center; padding: 0 16px; z-index: 1001;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(16px);
}
#global-player.active { transform: translateY(0); }
.player-controls { display: flex; align-items: center; gap: 16px; width: 200px; }
.control-btn { color: var(--text-secondary); font-size: 20px; transition: color 0.2s; }
.control-btn:hover { color: var(--text-primary); }
.control-btn.play-btn { font-size: 36px; color: var(--text-primary); }
.player-track-info { display: flex; align-items: center; gap: 12px; width: 280px; }
.player-cover { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.player-text { display: flex; flex-direction: column; }
.player-title { font-size: 13px; font-weight: 600; }
.player-artist { font-size: 11px; color: var(--text-secondary); }
.progress-container { flex-grow: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.time-text { font-size: 11px; color: var(--text-secondary); min-width: 36px; }
.progress-bar { flex-grow: 1; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; cursor: pointer; position: relative; }
.progress-bar:hover { height: 5px; }
.progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--brand-color); border-radius: 2px; width: 0%; pointer-events: none; }

/* Recent-plays button (rightmost in player) + popup */
.recent-plays-btn {
  color: var(--text-secondary); font-size: 22px;
  padding: 0 8px; margin-left: 4px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  transition: color 0.15s;
}
.recent-plays-btn:hover { color: var(--brand-color); }
.recent-plays-btn.open { color: var(--brand-color); }

#recent-plays-popup {
  position: fixed;
  bottom: calc(var(--player-height) + 8px);
  right: 12px;
  width: 340px;
  max-height: 60vh;
  background: rgba(20,20,20,0.98);
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  z-index: 1100;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: popupRise 0.18s cubic-bezier(0.22,1,0.36,1);
}
@keyframes popupRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.recent-plays-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--divider);
}
.recent-plays-header h3 { font-size: 14px; font-weight: 700; margin: 0; }
.recent-plays-close {
  background: transparent; border: none; color: var(--text-secondary);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.recent-plays-close:hover { color: var(--text-primary); }
.recent-plays-list { overflow-y: auto; flex: 1; padding: 6px 0; }
.recent-plays-empty {
  padding: 36px 16px; text-align: center; color: var(--text-secondary); font-size: 13px;
}
.recent-plays-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer; transition: background 0.12s;
}
.recent-plays-item:hover { background: rgba(255,255,255,0.05); }
.recent-plays-item.active { background: rgba(29,185,84,0.12); }
.recent-plays-item img {
  width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
}
.recent-plays-item-text { min-width: 0; flex: 1; }
.recent-plays-item-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-plays-item-artist {
  font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) {
  #recent-plays-popup {
    width: calc(100vw - 24px);
    right: 12px; left: 12px;
  }
}

/* ===================== PLAYLIST MODAL ===================== */
.playlist-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.playlist-modal-content { background: #1a1a1a; border-radius: 12px; width: 320px; max-height: 420px; overflow-y: auto; padding: 24px; box-shadow: 0 16px 48px rgba(0,0,0,0.6); }
.playlist-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.playlist-modal-header h3 { font-size: 18px; font-weight: 700; }
.playlist-modal-header button { color: var(--text-secondary); font-size: 22px; }
.playlist-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 6px; cursor: pointer; transition: background 0.2s; margin-bottom: 4px; }
.playlist-item:hover { background: rgba(255,255,255,0.08); }
.playlist-modal-create { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider); }
.playlist-modal-create input { flex: 1; background: var(--surface-color); border: 1px solid var(--divider); color: white; padding: 8px 12px; border-radius: 20px; font-size: 13px; outline: none; }
.playlist-modal-create input:focus { border-color: var(--brand-color); }
.playlist-modal-create button { background: var(--brand-color); color: white; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* ===================== COMMON ===================== */
h1 { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.btn-primary {
  background: var(--brand-color); color: white; padding: 10px 22px; border-radius: 20px;
  font-weight: 600; font-size: 14px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-primary:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,185,84,0.3); }
.btn-primary:active { transform: scale(0.97); }

.card { background: var(--surface-color); padding: 24px; border-radius: 8px; }
.text-brand { color: var(--brand-color); }

/* ===================== TRACK GRID ===================== */
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.track-card {
  background: var(--surface-color); border-radius: 8px; overflow: hidden;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: pointer; position: relative; padding: 10px;
}
.track-card:hover { background: var(--surface-hover); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
.track-cover-container { width: 100%; aspect-ratio: 1; position: relative; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.track-cover { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
  position: absolute; bottom: 8px; right: 8px; background: var(--brand-color);
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s, transform 0.2s; color: white; font-size: 20px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5); transform: translateY(6px);
}
.track-card:hover .play-overlay { opacity: 1; transform: translateY(0); }
.add-to-playlist-btn {
  position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.65); color: white;
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s; font-size: 16px; z-index: 5; border: none; cursor: pointer;
}
.track-card:hover .add-to-playlist-btn { opacity: 1; }
.add-to-playlist-btn:hover { background: var(--brand-color); }
.track-info { padding: 0; }
.track-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.tag-pill { display: inline-flex; background: rgba(29,185,84,0.15); color: var(--brand-color); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.tag-pill:hover { background: rgba(29,185,84,0.3); }
.tag-pills-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ===================== TAGS CLOUD — everynoise / dense word-cloud feel ===================== */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 진짜 빽빽하게 — 단어처럼 붙어 있는 느낌. baseline 정렬로 큰/작은 글자가 한 줄 위에. */
  gap: 0 6px;
  line-height: 0.95;
  padding: 12px 0;
}
.tags-cloud .tag-chip { padding: 0; margin: 0 2px; }
.tag-chip {
  display: inline-block;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), filter 0.3s, text-shadow 0.3s;
  user-select: none;
  white-space: nowrap;
}
.tag-chip:hover { transform: scale(1.08); filter: brightness(1.25); text-shadow: 0 0 18px currentColor; }
.tags-page-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.tags-page-header .count { color: var(--text-secondary); font-size: 13px; }

/* ===================== SNS LINKS ===================== */
.sns-links { display: flex; gap: 10px; align-items: center; }
.sns-links a { color: var(--text-secondary); font-size: 20px; transition: color 0.2s, transform 0.2s; display: flex; }
.sns-links a:hover { color: var(--text-primary); transform: scale(1.15); }

/* ===================== FORMS ===================== */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.form-control { width: 100%; background: var(--surface-color); border: 1px solid var(--divider); color: var(--text-primary); padding: 10px; border-radius: 4px; font-size: 14px; }
.form-control:focus { outline: none; border-color: var(--brand-color); }
.form-note { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.agreement-box { background: var(--surface-hover); padding: 14px; border-radius: 4px; font-size: 12px; color: var(--text-secondary); max-height: 140px; overflow-y: auto; margin-bottom: 10px; border: 1px solid var(--divider); line-height: 1.5; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.checkbox-label input { accent-color: var(--brand-color); width: 15px; height: 15px; }

.event-card { background: var(--surface-color); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.event-cover { width: 100%; height: 180px; object-fit: cover; }
.event-body { padding: 20px; }
.event-date { color: var(--brand-color); font-weight: 600; font-size: 13px; margin-bottom: 6px; }

/* Timetable */
.timetable { display: flex; flex-direction: column; border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; background: var(--surface-hover); margin-top: 14px; }
.tt-row { display: grid; grid-template-columns: 70px repeat(5, 1fr); border-bottom: 1px solid var(--divider); }
.tt-row:last-child { border-bottom: none; }
.tt-header { background: var(--surface-color); font-weight: 600; text-align: center; padding: 10px 4px; font-size: 12px; border-right: 1px solid var(--divider); color: var(--text-secondary); }
.tt-header:last-child { border-right: none; }
.tt-cell { padding: 6px 4px; text-align: center; font-size: 12px; border-right: 1px solid var(--divider); display: flex; align-items: center; justify-content: center; height: 42px; }
.tt-cell:last-child { border-right: none; }
.tt-time { font-weight: 600; color: var(--text-primary); background: var(--surface-color); }
.tt-slot { width: 100%; height: 100%; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tt-slot.booked { background: rgba(29,185,84,0.15); color: var(--brand-color); font-weight: 600; cursor: not-allowed; }
.tt-slot.open { color: var(--divider); }

/* Sub-pages padding */
.sub-page { padding: 32px; max-width: 1000px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.06s; }
.reveal.delay-2 { transition-delay: 0.12s; }
.reveal.delay-3 { transition-delay: 0.18s; }
.reveal.delay-4 { transition-delay: 0.24s; }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.5s, transform 0.5s; }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* Toast */
@keyframes toastFadeOut {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* Cover edit button (project owner only) */
.cover-edit-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #FFE500;
  border: 2px solid #FFE500;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
  z-index: 5;
}
.project-cover-wrap:hover .cover-edit-btn,
.project-cover-wrap:active .cover-edit-btn { opacity: 1; }
.cover-edit-btn:hover { background: #FFE500; color: #111; transform: scale(1.1); }

/* ===== Upload type toggle (새 vs 기존 프로젝트) ===== */
.upload-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 26px;
}
.upload-type-opt {
  position: relative;
  display: block;
  background: var(--surface-color);
  border: 2px solid var(--divider);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  text-align: center;
}
.upload-type-opt:hover { border-color: var(--brand-color); transform: translateY(-1px); }
.upload-type-opt.active {
  border-color: var(--brand-color);
  background: rgba(29,185,84,0.08);
}
.upload-type-opt input[type=radio] {
  position: absolute; opacity: 0; pointer-events: none;
}
.upload-type-icon {
  font-size: 28px; margin-bottom: 6px;
}
.upload-type-label {
  font-size: 14px; font-weight: 700; margin-bottom: 2px;
}
.upload-type-sub {
  font-size: 11px; color: var(--text-secondary);
}

/* ===== #함께만드는중 — Wadiz-style stage timeline ===== */
.stage-timeline {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(255, 107, 157, 0.08));
  border: 1.5px solid #111;
  border-radius: 10px;
  position: relative;
}
.stage-tag {
  display: inline-block;
  background: #FFE500;
  color: #111;
  border: 1.5px solid #111;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  border-radius: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.stage-track {
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap;
}
.stage-step {
  display: flex; flex-direction: column; align-items: center;
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
}
.stage-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-bottom: 4px;
  transition: background 0.3s, transform 0.3s;
  opacity: 0.5;
}
.stage-step.done .stage-dot {
  background: #6EE5A8;
  opacity: 1;
}
.stage-step.current .stage-dot {
  background: #FFE500;
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(255,229,0,0.3);
}
.stage-label {
  font-size: 11px; font-weight: 700;
  color: #111;
  opacity: 0.5;
}
.stage-step.done .stage-label,
.stage-step.current .stage-label { opacity: 1; }
.stage-line {
  flex: 1; min-width: 12px;
  height: 2px;
  background: #111;
  opacity: 0.2;
  margin-bottom: 18px;
}
.stage-line.done { opacity: 1; background: #6EE5A8; }
.stage-controls {
  margin-top: 10px;
}
.stage-pick {
  background: #fff;
  border: 1.5px solid #111;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}

/* ===== Backer strip (avatars + count under project) ===== */
.project-backer-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: rgba(107, 70, 193, 0.05);
  border: 1px dashed rgba(107, 70, 193, 0.4);
  border-radius: 8px;
  margin: 0 0 18px;
  font-size: 13px;
}
.backer-strip-label {
  color: #6B46C1;
  font-weight: 700;
  font-size: 13px;
}
.backer-strip-avatars {
  display: inline-flex;
}
.backer-strip-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  object-fit: cover;
  background: #ddd;
}
.backer-strip-avatar:first-child { margin-left: 0; }
.backer-strip-count {
  font-size: 12px;
  color: #6B46C1;
  font-weight: 600;
}

@media (max-width: 560px) {
  .stage-timeline { padding: 12px; }
  .stage-step { min-width: 56px; }
  .stage-dot { width: 30px; height: 30px; font-size: 13px; }
  .stage-label { font-size: 10px; }
}

/* 참여하기 (Backers) row on demo/master panels */
.join-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.join-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: #fff;
  color: #6B46C1;
  border: 2px solid #6B46C1;
  border-radius: 22px;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.join-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #6B46C1;
}
.join-btn.is-joined {
  background: #6B46C1; color: #fff;
  box-shadow: 2px 2px 0 #111;
}
.join-btn.is-joined:hover {
  box-shadow: 4px 4px 0 #111;
}
.join-btn i { font-size: 16px; }
.join-count {
  font-size: 13px; font-weight: 700;
  color: #6B46C1;
}
.join-count-mine {
  font-size: 13px; font-weight: 700;
  color: var(--text-secondary);
}
.join-hint {
  font-size: 11px; color: var(--text-secondary);
  font-style: italic;
}

/* Promote-to-final button */
.promote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #111;
  border: 2px solid #111;
  padding: 9px 18px;
  border-radius: 22px;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111;
  margin: 4px 0 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.promote-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111;
}
.promote-btn i { font-size: 16px; color: #c66; }

@media (max-width: 560px) {
  .upload-type-toggle { grid-template-columns: 1fr; }
}

/* ===== Wall v2 — compact header, floating FAB, collapsible controls ===== */
.wall-header-v2 {
  position: relative; z-index: 60;
  padding: 14px 24px 8px;
}
.wall-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.wall-title-row h1 {
  margin: 0; font-size: 22px;
  display: flex; align-items: center; gap: 8px;
}
.wall-hint {
  color: var(--text-secondary); font-size: 12px;
  margin: 4px 0 0;
}

.wall-toolbar-v2 {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--divider);
  padding: 5px 12px; border-radius: 18px;
  font-size: 12px;
}
.wall-count-v2 { color: var(--text-secondary); }
.wall-count-v2 strong { color: var(--text-primary); }
.wall-toolbtn {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 14px; padding: 0 4px; display: flex;
}
.wall-toolbtn:hover { color: var(--text-primary); }

.wall-advanced {
  position: relative; z-index: 60;
  margin: 8px 24px 0;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  animation: slideDown 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.wall-search-v2 {
  flex: 1; min-width: 200px;
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-color); border: 1px solid var(--divider);
  padding: 5px 10px 5px 12px; border-radius: 18px;
}
.wall-search-v2 input {
  flex: 1; background: transparent; border: none; outline: none;
  color: white; font-size: 13px; padding: 4px 0;
}
.wall-search-v2 .ri-search-line { color: var(--text-secondary); font-size: 14px; }
.wall-search-clear {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 16px; padding: 0; display: flex;
}
.wall-sort-v2 {
  display: flex; gap: 2px;
  background: var(--surface-color); border: 1px solid var(--divider);
  padding: 3px; border-radius: 18px;
}
.wall-sort-v2 .wall-sort-btn {
  background: transparent; border: none; padding: 5px 12px;
  font-size: 12px; color: var(--text-secondary); border-radius: 14px;
  cursor: pointer; font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.wall-sort-v2 .wall-sort-btn:hover { color: var(--text-primary); }
.wall-sort-v2 .wall-sort-btn.active { background: var(--brand-color); color: white; }

/* Floating Action Button for composing */
.wall-fab {
  position: fixed;
  bottom: calc(var(--player-height) + 22px);
  right: 22px;
  z-index: 500;
  background: var(--brand-color); color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 28px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(29,185,84,0.45);
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s;
}
.wall-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 30px rgba(29,185,84,0.6); }
.wall-fab i { font-size: 18px; }

/* Compose panel (popover above FAB) */
.wall-compose-panel {
  position: fixed;
  bottom: calc(var(--player-height) + 82px);
  right: 22px;
  z-index: 501;
  width: 320px;
  max-width: calc(100vw - 44px);
  background: rgba(15,15,15,0.96);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  animation: composePop 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes composePop {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .wall-header-v2 { padding: 12px 14px 6px; }
  .wall-title-row h1 { font-size: 18px; }
  .wall-toolbar-v2 { padding: 4px 10px; font-size: 11px; }
  .wall-advanced { margin: 6px 14px 0; }
  .wall-search-v2 { min-width: 100%; }
  .wall-sort-v2 { width: 100%; justify-content: space-between; }
  .wall-sort-v2 .wall-sort-btn { flex: 1; padding: 5px 6px; font-size: 11px; }
  .wall-fab { bottom: calc(var(--player-height) + 16px); right: 16px; padding: 10px 18px; font-size: 13px; }
  .wall-compose-panel { bottom: calc(var(--player-height) + 72px); right: 16px; width: auto; left: 16px; }
}

/* Wall toolbar — search + sort + count */
.wall-toolbar {
  position: relative; z-index: 60;
  margin: 14px 28px 10px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.wall-search {
  flex: 1; min-width: 220px;
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-color);
  border: 1px solid var(--divider);
  padding: 6px 12px 6px 14px; border-radius: 22px;
  transition: border-color 0.2s;
}
.wall-search:focus-within { border-color: var(--brand-color); }
.wall-search i { color: var(--text-secondary); font-size: 16px; }
.wall-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: white; font-size: 14px; padding: 6px 0;
}
.wall-search-clear {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 18px; padding: 2px; display: flex;
}
.wall-search-clear:hover { color: white; }
.wall-sort { display: flex; gap: 4px; background: var(--surface-color); border: 1px solid var(--divider); border-radius: 20px; padding: 3px; }
.wall-sort-btn {
  background: transparent; border: none; padding: 6px 12px;
  font-size: 12px; color: var(--text-secondary); border-radius: 16px; cursor: pointer;
  font-weight: 600; transition: background 0.2s, color 0.2s;
}
.wall-sort-btn:hover { color: var(--text-primary); }
.wall-sort-btn.active {
  background: var(--brand-color); color: white;
}
.wall-count {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap;
}
.wall-count strong { color: var(--text-primary); }

.wall-load-more {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wall-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-secondary); text-align: center;
  font-size: 15px; padding: 20px;
}

@media (max-width: 560px) {
  /* Hide search & sort on mobile — keep only the count clean */
  .wall-search, .wall-sort { display: none; }
  .wall-toolbar {
    margin: 10px 14px 4px;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
  }
  .wall-count { width: auto; text-align: center; font-size: 12px; }
}

/* ===================== WALL (STICKY NOTES) ===================== */
.wall-board {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--player-height));
  overflow: hidden;
  background: #111;
}
.wall-note {
  position: absolute;
  width: 160px;
  min-height: 120px;
  padding: 16px 14px 12px;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1.45;
  transform: rotate(var(--rot));
  box-shadow: 3px 4px 14px rgba(0,0,0,0.45);
  cursor: grab;
  z-index: 1;
  transition: box-shadow 0.3s;
  user-select: none;
  touch-action: none;
}
.wall-note:hover {
  box-shadow: 5px 8px 28px rgba(0,0,0,0.55);
  z-index: 10;
}
.wall-note.dragging {
  cursor: grabbing;
  box-shadow: 8px 12px 36px rgba(0,0,0,0.6);
  z-index: 50 !important;
  transform: rotate(0deg) scale(1.06) !important;
}
/* Tape effect on top */
.wall-note::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 12px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
}
.note-body { word-break: break-word; }
.note-author { margin-top: 10px; font-size: 12px; opacity: 0.6; text-align: right; font-style: italic; }
.note-delete {
  position: absolute; top: 6px; right: 6px;
  background: none; border: none; color: inherit; opacity: 0; font-size: 16px; cursor: pointer;
  transition: opacity 0.2s;
}
.wall-note:hover .note-delete { opacity: 0.5; }
.note-delete:hover { opacity: 1 !important; }

/* STO portfolio empty state */
.sto-empty {
  background: linear-gradient(135deg, rgba(156,39,176,0.08), rgba(255,107,157,0.05));
  border: 1.5px dashed rgba(156,39,176,0.4);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
}
.sto-empty-icon { font-size: 36px; margin-bottom: 8px; }
.sto-empty-msg {
  color: #111;
  font-size: 14px; font-weight: 700;
  line-height: 1.6;
}

/* Playlist grid */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.playlist-card {
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 3px 3px 0 #111;
}
.playlist-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.playlist-card-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-bottom: 1.5px solid #111;
}
.playlist-card-title {
  padding: 8px 12px 2px;
  font-weight: 800;
  color: #111;
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playlist-card-meta {
  padding: 0 12px 10px;
  color: #6B46C1;
  font-size: 12px;
  font-weight: 600;
}

/* Bookmark (수집) button */
.note-bookmark {
  position: absolute; top: 6px; left: 6px;
  background: none; border: none; color: inherit;
  opacity: 0; font-size: 18px; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 3;
}
.wall-note:hover .note-bookmark { opacity: 0.55; }
.note-bookmark.is-bookmarked { opacity: 1 !important; color: #6B46C1; }
.note-bookmark:hover { opacity: 1 !important; transform: scale(1.15); }
.note-bookmark.in-modal {
  position: absolute; top: 8px; right: 8px; left: auto;
  opacity: 0.7; font-size: 22px;
}
.note-bookmark.in-modal:hover { opacity: 1; }

/* Favorite (좋아요 — 공개) button — 북마크 옆에 나란히 */
.note-favorite {
  position: absolute; top: 6px; left: 34px;
  background: none; border: none; color: inherit;
  opacity: 0; font-size: 18px; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
  z-index: 3;
}
.wall-note:hover .note-favorite { opacity: 0.55; }
.note-favorite.is-favorited { opacity: 1 !important; color: #E91E63; }
.note-favorite:hover { opacity: 1 !important; transform: scale(1.15); }
.note-favorite.in-modal {
  position: absolute; top: 8px; right: 44px; left: auto;
  opacity: 0.7; font-size: 22px;
}
.note-favorite.in-modal:hover { opacity: 1; }
.wall-header {
  position: relative; z-index: 60;
  padding: 24px 28px 16px;
}
.wall-write {
  position: relative; z-index: 60;
  background: rgba(17,17,17,0.92); border-radius: 10px; padding: 18px;
  margin: 0 28px 0; border: 1px solid var(--divider);
  backdrop-filter: blur(12px);
}
.color-dot {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { transform: scale(1.2); box-shadow: 0 0 0 3px var(--brand-color); }

/* ===================== NOTE DETAIL — HANDWRITTEN FEEL ===================== */
.note-detail-modal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  animation: fadeIn 0.25s ease;
}
.note-detail-content {
  background: transparent;
  max-width: 460px; width: 100%;
  padding: 0;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.22,1,0.36,1);
}
.note-detail-close {
  position: absolute; top: -6px; right: -6px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  transition: background 0.2s;
  z-index: 5;
}
.note-detail-close:hover { background: rgba(255,255,255,0.2); }

.note-detail-postit {
  padding: 26px 22px 20px;
  border-radius: 3px;
  font-family: var(--font-hand);
  font-size: 22px; line-height: 1.5;
  box-shadow: 3px 6px 20px rgba(0,0,0,0.55);
  margin: 10px 0 6px;
  position: relative;
}
.note-detail-postit::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 14px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}
.note-author-line {
  margin-top: 14px; text-align: right;
  font-size: 15px; font-style: italic; opacity: 0.8;
}
.author-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.author-link:hover { opacity: 1; }

/* All-handwritten scribble area — no boxes, no rounded UI */
.comments-scribble {
  padding: 18px 8px 8px;
  font-family: var(--font-hand);
  color: #e8e8e8;
}
.scribble-title {
  font-family: var(--font-hand);
  font-size: 18px; color: #FFD54F;
  margin-bottom: 10px;
  opacity: 0.75;
  letter-spacing: 0.5px;
}
.comment-line {
  font-size: 20px; line-height: 1.5;
  color: #fafafa;
  padding: 1px 0;
  animation: fadeInUp 0.4s cubic-bezier(0.22,1,0.36,1);
  text-shadow: 0 0 1px rgba(255,255,255,0.15);
}
.comment-arrow {
  color: #FFD54F;
  margin-right: 8px;
  font-weight: 700;
  display: inline-block;
  transform: translateY(1px);
}
.comment-text { color: #fafafa; }
.comment-author {
  margin-left: 10px; font-size: 15px;
  color: #FFD54F;
  opacity: 0.55;
  font-style: italic;
}
.no-comments {
  font-family: var(--font-hand);
  font-size: 19px; color: rgba(255,255,255,0.35);
  padding: 14px 0 10px;
  line-height: 1.5;
}

/* Scribble-style input — just ink lines, no boxes */
.scribble-input-row {
  margin-top: 14px;
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-hand);
}
.scribble-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px dashed rgba(255,213,79,0.35) !important;
  color: #fafafa !important;
  padding: 6px 4px 8px !important;
  font-size: 20px !important;
  font-family: var(--font-hand) !important;
  outline: none !important;
  border-radius: 0 !important;
  transition: border-color 0.25s;
  width: 100%;
}
.scribble-input::placeholder {
  color: rgba(255,255,255,0.25);
  font-style: italic;
}
.scribble-input:focus {
  border-bottom-color: #FFD54F !important;
}
.scribble-name-input {
  font-size: 15px !important;
  color: #FFD54F !important;
  opacity: 0.85;
}
.scribble-send {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: #FFD54F;
  font-family: var(--font-hand);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 0;
  transition: transform 0.2s, color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.scribble-send:hover { color: #fff; transform: translateX(3px); }
.scribble-send::before { content: '✎'; font-size: 16px; }

/* ===================== ARTIST PROFILE ===================== */
.artist-page { max-width: 900px; }
.artist-header {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(135deg, rgba(29,185,84,0.08), rgba(17,17,17,0.6));
  border: 1px solid var(--divider);
  border-radius: 14px; padding: 24px;
}
.artist-avatar {
  width: 110px; height: 110px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--brand-color);
  box-shadow: 0 6px 20px rgba(29,185,84,0.2);
}
.artist-notes-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 10px 4px 20px;
  scrollbar-width: thin;
}
.artist-note {
  flex: 0 0 auto;
  width: 180px; min-height: 130px;
  padding: 16px 14px 12px;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 16px; line-height: 1.45;
  transform: rotate(var(--rot));
  box-shadow: 3px 4px 14px rgba(0,0,0,0.45);
  position: relative;
}
.artist-note::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 10px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
}

/* Project box — philo-electro-ray style */
.artist-canvas .project-box {
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 2px;
  overflow: visible;
  margin-bottom: 24px;
  padding: 22px 24px 28px;
  box-shadow: none;
  transition: transform 0.25s;
}
.artist-canvas .project-box:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #111;
  border-color: #111;
}
.artist-canvas .project-header {
  display: block;
  padding: 0 0 18px;
  border-bottom: 1.5px dashed #111;
  background: transparent;
  margin-bottom: 22px;
}
.artist-canvas .project-title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  color: #111;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 0.2s, transform 0.2s;
}
/* Project header layout: cover on left, info on right */
.artist-canvas .project-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 18px;
  border-bottom: 1.5px dashed #111;
  background: transparent;
  margin-bottom: 20px;
}
.project-cover-wrap {
  position: relative;
  width: 130px; height: 130px;
  flex-shrink: 0;
  border: 1.5px solid #111;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
  box-shadow: 3px 3px 0 #111;
}
.project-cover-wrap:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.project-cover-wrap.no-master { cursor: default; }
.project-cover-wrap.no-master:hover { transform: none; box-shadow: 3px 3px 0 #111; }
.project-cover-large {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.project-cover-wrap:hover .project-cover-large { transform: scale(1.06); }

.project-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.project-cover-wrap:hover .project-play-overlay,
.project-cover-wrap:active .project-play-overlay { opacity: 1; }
.project-play-overlay i {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #FFE500;
  color: #111;
  border: 2px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 3px 3px 0 #111;
  transform: scale(0.85);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.project-cover-wrap:hover .project-play-overlay i { transform: scale(1); }

.project-master-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #6EE5A8;
  color: #111;
  border: 1.5px solid #111;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 2px;
}
.project-wip-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #FFE500;
  color: #111;
  border: 1.5px solid #111;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 2px;
}

.project-header-info { flex: 1; min-width: 0; }
.project-master-date {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #6EE5A8;
  background: #111;
  padding: 3px 10px;
  border-radius: 2px;
  margin-top: 8px;
}

/* Mobile: smaller cover */
@media (max-width: 560px) {
  .project-cover-wrap { width: 100px; height: 100px; box-shadow: 2px 2px 0 #111; }
  .project-cover-wrap:hover { box-shadow: 3px 3px 0 #111; }
  .project-play-overlay i { width: 42px; height: 42px; font-size: 22px; }
  .project-master-badge, .project-wip-badge { font-size: 8px; padding: 1px 6px; }
}
@media (max-width: 420px) {
  .artist-canvas .project-header { gap: 12px; }
  .project-cover-wrap { width: 88px; height: 88px; }
}
.artist-canvas .project-sub {
  font-family: var(--font-family);
  color: #2a2240;
  font-size: 12px; font-weight: 700;
  opacity: 0.7;
  letter-spacing: 0.3px;
}

/* Snake grid of demo cards */
.demo-path {
  display: grid;
  gap: 38px 44px;
  padding: 6px 0 12px;
  margin-bottom: 20px;
  overflow: hidden;  /* clip any arrow that tries to escape the box */
}
.demo-card {
  position: relative;
  background: #FFE500;
  border: 1.5px solid #111;
  border-radius: 2px;
  padding: 10px 12px 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  user-select: none;
  color: #111;
}
.demo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111;
}
.demo-card.is-master {
  background: #6EE5A8;
}
.demo-card.is-selected {
  background: #111;
  color: #FFE500;
  box-shadow: 4px 4px 0 #FFE500;
  transform: translate(-2px, -2px);
}
.demo-card.is-master.is-selected {
  background: #111;
  color: #6EE5A8;
  box-shadow: 4px 4px 0 #6EE5A8;
}
.demo-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 8px;
}
.demo-tag {
  font-weight: 900; font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.demo-play-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #111; color: inherit;
  border: 1.5px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
  color: #FFE500;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.demo-card.is-master .demo-play-btn { color: #6EE5A8; }
.demo-card.is-selected .demo-play-btn {
  background: #FFE500; color: #111; border-color: #FFE500;
}
.demo-card.is-master.is-selected .demo-play-btn {
  background: #6EE5A8; color: #111; border-color: #6EE5A8;
}
.demo-play-btn:hover { transform: scale(1.1); }
.demo-card-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.demo-card-date {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.3px;
}

/* Snake arrows (→ ← ↓) */
.demo-card::after {
  position: absolute;
  font-size: 28px; font-weight: 900;
  color: #111;
  line-height: 1;
  pointer-events: none;
}
.demo-card.arrow-right::after {
  content: '→';
  right: -34px; top: 50%;
  transform: translateY(-55%);
}
.demo-card.arrow-left::after {
  content: '←';
  left: -34px; top: 50%;
  transform: translateY(-55%);
}
.demo-card.arrow-down::after {
  content: '↓';
  bottom: -34px; left: 50%;
  transform: translateX(-50%);
}

/* Version panel — shown below the grid for selected card */
.version-panels {
  border-top: 1.5px dashed #111;
  padding-top: 18px;
}
.version-panel { display: none; }
.version-panel.active { display: block; animation: fadeInUp 0.35s ease; }

/* Artist postit grid — full section, many notes visible */
.artist-postit-section {
  margin-top: 32px;
}
.artist-postit-section .section-title { position: relative; }
.section-count {
  display: inline-block;
  background: #FFE500;
  color: #111;
  border: 1.5px solid #111;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 900;
  border-radius: 2px;
  margin-left: 2px;
}
.artist-postit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px 20px;
  padding: 18px 4px 8px;
}
.artist-postit {
  position: relative;
  min-height: 160px;
  padding: 22px 18px 16px;
  border: 2px solid #111;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 19px; line-height: 1.45;
  font-weight: 600;
  color: #111;
  transform: rotate(var(--rot, 0));
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
  overflow: hidden;
}
.artist-postit::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 10px;
  background: rgba(0,0,0,0.18);
  border-radius: 1px;
}
.artist-postit:hover {
  transform: rotate(0deg) translate(-2px, -4px) scale(1.04);
  box-shadow: 6px 8px 0 #111;
  z-index: 5;
}
.artist-postit-body {
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .artist-postit-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px 16px;
  }
  .artist-postit { min-height: 140px; font-size: 17px; padding: 18px 14px 14px; }
}
@media (max-width: 420px) {
  .artist-postit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .artist-postit { min-height: 130px; font-size: 15px; padding: 16px 12px 12px; }
}

/* Legacy stacked postits (kept in case referenced elsewhere) */
.artist-canvas .notes-stack {
  position: relative;
  width: 320px; height: 210px;
  flex-shrink: 0;
  align-self: center;
  margin-right: 10px;
}
.artist-canvas .stack-note {
  position: absolute;
  top: var(--oy, 0);
  left: var(--ox, 0);
  width: 200px; height: 170px;
  padding: 18px 16px 14px;
  border: 2px solid #111;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 18px; line-height: 1.4;
  font-weight: 600;
  color: #111;
  transform: rotate(var(--rot, 0));
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s, z-index 0s;
  overflow: hidden;
  box-shadow: 4px 4px 0 #111;
}
.artist-canvas .stack-note::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 7px;
  background: rgba(0,0,0,0.2);
  border-radius: 1px;
}
.artist-canvas .stack-note:hover {
  transform: rotate(0deg) translate(-3px, -6px) scale(1.06) !important;
  box-shadow: 6px 8px 0 #111;
  z-index: 99 !important;
}
.artist-canvas .stack-note-body {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-weight: 600;
}
.artist-canvas .stack-more {
  position: absolute;
  right: 0; bottom: -10px;
  font-family: var(--font-family);
  color: #111;
  font-size: 13px;
  font-weight: 900;
  z-index: 100;
  background: #FFE500;
  border: 1.5px solid #111;
  padding: 2px 10px;
  border-radius: 2px;
}

/* Timeline list inside artist-canvas — adapt to light theme */
.artist-canvas .timeline-list {
  border-left-color: #111;
  padding-left: 4px;
}
.artist-canvas .timeline-item {
  color: #111;
}
.artist-canvas .timeline-item:hover { background: rgba(255,229,0,0.25); }
.artist-canvas .timeline-meta { color: #6B46C1; opacity: 0.85; }
.artist-canvas .timeline-text { color: #111; }
.artist-canvas .timeline-icon { background: #fff; border-color: #111; }
.artist-canvas .note-icon { color: #6B46C1; background: #FFE500; }
.artist-canvas .demo-icon { color: #fff; background: #111; }
.artist-canvas .master-icon { color: #111; background: #6EE5A8; box-shadow: none; }

/* Chips & stats inside artist-canvas */
.artist-canvas .demo-chip {
  background: #111; color: #FFE500;
  padding: 3px 10px; border-radius: 2px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.8px;
  border: none;
}
.artist-canvas .final-chip {
  background: #6EE5A8; color: #111;
  padding: 3px 10px; border-radius: 2px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.8px;
  border: 1.5px solid #111;
  text-shadow: none; background-image: none;
}

/* ===== MOBILE (<=720) — compact layout ===== */
@media (max-width: 720px) {
  .artist-canvas .sub-page { padding: 18px 14px 40px; }
  .artist-id-text h1 { font-size: 42px; letter-spacing: -1.3px; text-shadow: 2px 2px 0 rgba(0,0,0,0.12); }
  .artist-avatar { width: 80px; height: 80px; border-width: 2px; }
  .artist-strip { flex-direction: column; gap: 18px; align-items: stretch; padding-bottom: 12px; }
  .artist-id { gap: 14px; }
  .artist-canvas .notes-stack {
    width: 100%; height: 210px;
    align-self: flex-start;
    margin-right: 0;
  }
  .artist-canvas .stack-note {
    width: 170px; height: 150px;
    font-size: 16px;
    padding: 14px 12px 12px;
    box-shadow: 3px 3px 0 #111;
  }
  .artist-canvas .stack-note:hover {
    box-shadow: 5px 6px 0 #111;
  }

  /* Project box & demo cards */
  .artist-canvas .project-box { padding: 16px 14px 22px; }
  .artist-canvas .project-title { font-size: 20px; }
  .project-master-strip { padding: 8px 12px; gap: 10px; box-shadow: 2px 2px 0 #111; }
  .project-master-strip:hover { box-shadow: 3px 3px 0 #111; }
  .master-play-btn { width: 32px; height: 32px; font-size: 14px; }
  .master-tag { font-size: 12px; letter-spacing: 1px; }

  .demo-path { gap: 28px 26px; padding: 4px 0 8px; }
  .demo-card { padding: 8px 10px 10px; }
  .demo-card-title { font-size: 12px; }
  .demo-card-date { font-size: 10px; }
  .demo-tag { font-size: 9px; }
  .demo-play-btn { width: 22px; height: 22px; font-size: 10px; }
  .demo-card.arrow-right::after { right: -20px; font-size: 20px; }
  .demo-card.arrow-left::after { left: -20px; font-size: 20px; }
  .demo-card.arrow-down::after { bottom: -22px; font-size: 20px; }

  /* Section titles smaller */
  .section-title, .section-title-hand { font-size: 15px; padding: 6px 14px; }
  .section-music { font-size: 16px; }

  /* Diary & scribble smaller */
  .artist-canvas .demo-diary { padding: 14px 14px 12px; font-size: 14px; box-shadow: 2px 2px 0 #111; }
  .artist-canvas .scribble-input { font-size: 17px !important; }
  .artist-canvas .scribble-name-input { font-size: 13px !important; }
  .artist-canvas .comment-line { font-size: 17px; }

  /* Floating shape universe on mobile (home) — kept compact earlier */
  .floating-shape { padding: 14px; }
  .floating-shape .shape-text { font-size: 17px; max-width: 160px; }

  /* Wall — compact header area */
  .wall-header { padding: 16px 16px 10px; }
  .wall-header h1 { font-size: 22px; }
  .wall-write { margin: 0 16px; padding: 14px; }

  /* Hamburger button smaller offset to avoid player */
  .hamburger-btn { width: 44px; height: 44px; font-size: 22px; }
}

/* ===== SMALL PHONE (<=420) ===== */
@media (max-width: 420px) {
  .artist-canvas .sub-page { padding: 14px 12px 60px; }
  .artist-id-text h1 { font-size: 36px; letter-spacing: -1px; }
  .artist-avatar { width: 70px; height: 70px; }
  .artist-id { flex-direction: column; align-items: flex-start; gap: 10px; }
  .artist-canvas .notes-stack { height: 190px; }
  .artist-canvas .stack-note { width: 150px; height: 130px; font-size: 14px; padding: 12px 10px 10px; }

  .artist-canvas .project-box { padding: 14px 12px 20px; }
  .artist-canvas .project-title { font-size: 18px; }
  .demo-path { gap: 26px 22px; }
  .demo-card-title { font-size: 11px; }
  .demo-card.arrow-right::after { right: -16px; font-size: 18px; }
  .demo-card.arrow-left::after { left: -16px; font-size: 18px; }
  .demo-card.arrow-down::after { bottom: -20px; font-size: 18px; }

  body { padding-bottom: calc(var(--player-height) + 10px); }
  .upload-fab { width: 46px; height: 46px; right: 14px; bottom: calc(var(--player-height) + 12px); }
  .floating-shape.shuffle-shape {
    width: 96px !important; height: 92px !important;
    right: 12px; bottom: calc(var(--player-height) + 70px);
  }
  .floating-shape.shuffle-shape .shape-text { font-size: 19px !important; max-width: 80px; }
  .hamburger-btn { left: 12px; bottom: calc(var(--player-height) + 12px); }

  /* Sub-pages reduce padding */
  .sub-page { padding: 18px 14px; }

  /* Player — compress for tiny screens */
  .player-controls { width: auto; gap: 10px; }
  .player-track-info { width: auto; flex: 1; min-width: 0; }
  .player-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
  .player-artist { font-size: 10px; }
  .progress-container { display: none; }

  /* Playlist modal adapt */
  .playlist-modal-content { width: 100%; max-width: 95vw; }

  /* Note detail modal */
  .note-detail-postit { font-size: 19px; padding: 20px 18px 16px; }
  .note-detail-content { max-width: 100%; }
}

/* Global horizontal overflow safety */
html, body { overflow-x: hidden; max-width: 100%; }
.artist-canvas, .shapes-universe, .wall-board, .sub-page { max-width: 100%; }
.project-versions { padding: 8px 12px 12px; }
.version-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 10px;
  cursor: pointer; transition: background 0.25s;
  position: relative;
}
.version-row:hover { background: rgba(255,255,255,0.04); }
.version-wrap.open > .version-row { background: rgba(255,255,255,0.04); }

/* Timeline dots connecting demo → master */
.version-timeline {
  position: relative;
  width: 14px; flex-shrink: 0;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
}
.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 16px; z-index: 2; flex-shrink: 0;
}
.demo-dot {
  background: #FFB74D;
  box-shadow: 0 0 0 3px rgba(255,183,77,0.2);
}
.final-dot {
  background: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(29,185,84,0.25), 0 0 12px rgba(29,185,84,0.5);
}
.timeline-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, rgba(255,183,77,0.4), rgba(29,185,84,0.4));
  margin-top: 2px;
}

.version-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-color); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  transition: transform 0.2s;
}
.version-row:hover .version-play { transform: scale(1.08); }

/* Demo rows feel lighter / work-in-progress */
.demo-row .version-play {
  background: transparent;
  border: 1.5px dashed #FFB74D;
  color: #FFB74D;
}
.demo-row .version-title { color: #e0e0e0; font-style: italic; }

.final-row {
  background: linear-gradient(90deg, rgba(29,185,84,0.07), transparent);
}
.final-row .version-title { font-size: 15px; font-weight: 700; }

.version-meta { flex: 1; min-width: 0; }
.version-label { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.version-title { font-size: 14px; font-weight: 600; }
.version-stats {
  color: var(--text-secondary); font-size: 12px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.version-date {
  font-family: var(--font-hand);
  font-size: 15px; color: #FFD54F;
  opacity: 0.9;
  letter-spacing: 0.5px;
}
.version-dot { opacity: 0.4; }

.demo-chip {
  background: rgba(255, 152, 0, 0.18); color: #FFB74D;
  padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
}
.final-chip {
  background: linear-gradient(135deg, rgba(29,185,84,0.25), rgba(29,185,84,0.1));
  color: var(--brand-color);
  padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-shadow: 0 0 8px rgba(29,185,84,0.4);
}

.artist-note { cursor: pointer; }
.artist-note:hover { transform: rotate(0deg) scale(1.04); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }

/* ===================== DISCOVER UNIVERSE (floating mix) ===================== */
.discover-universe {
  background: #0a0a0a;
}
.discover-universe .univ-artist,
.discover-universe .univ-album,
.discover-universe .univ-note,
.discover-universe .univ-tag,
.discover-universe .univ-shape {
  position: absolute;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), filter 0.3s;
  z-index: 1;
}
/* Shapes on discover are the same styling as main shapes page (already defined) */
.discover-universe .univ-shape:hover {
  transform: scale(1.12) !important;
  filter: brightness(1.2) drop-shadow(0 0 24px currentColor);
  z-index: 20;
}

/* Artist floating — BIG circular avatar + name below */
.univ-artist {
  width: 180px;
  text-align: center;
}
.univ-artist-avatar {
  width: 170px; height: 170px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #FFE500;
  display: block;
  margin: 0 auto 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  pointer-events: none;
}
.univ-artist-name {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid #FFE500;
  padding: 4px 14px;
  border-radius: 2px;
  display: inline-block;
  pointer-events: none;
  letter-spacing: -0.2px;
}
.univ-artist:hover {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 28px #FFE500);
  z-index: 20;
}
.univ-artist:hover .univ-artist-avatar { border-color: #fff; }

/* Album floating — big square cover + title/artist */
.univ-album {
  width: 170px;
  text-align: center;
}
.univ-album-cover {
  width: 160px; height: 160px;
  object-fit: cover;
  border: 3px solid #fff;
  display: block;
  margin: 0 auto 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6);
  pointer-events: none;
}
.univ-album-play {
  position: absolute;
  top: 68px; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #FFE500;
  color: #111;
  border: 2.5px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  box-shadow: 3px 3px 0 #111;
}
.univ-album:hover .univ-album-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
.univ-album-title {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  pointer-events: none;
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.univ-album-artist {
  font-size: 12px;
  color: #FFE500;
  font-weight: 700;
  margin-top: 4px;
  pointer-events: none;
}
.univ-album:hover {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 24px #fff);
  z-index: 20;
}
.univ-album:hover .univ-album-cover { border-color: #FFE500; }

/* Floating postit */
.univ-note {
  width: 200px;
  min-height: 150px;
  padding: 20px 16px 14px;
  border: 2px solid #111;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  box-shadow: 4px 4px 0 #111;
  overflow: hidden;
}
.univ-note::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 1px;
}
.univ-note-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.univ-note-sig {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.65;
  text-align: right;
  font-style: italic;
}
.univ-note:hover {
  transform: scale(1.08) !important;
  box-shadow: 6px 8px 0 #111;
  z-index: 20;
}

/* Floating tag */
.univ-tag {
  font-family: var(--font-family);
  font-weight: 900;
  letter-spacing: -0.5px;
  padding: 4px 10px;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.univ-tag:hover {
  transform: scale(1.15) !important;
  filter: brightness(1.3);
  text-shadow: 0 0 20px currentColor;
  z-index: 20;
}

@media (max-width: 560px) {
  .univ-artist { width: 140px; }
  .univ-artist-avatar { width: 130px; height: 130px; border-width: 3px; }
  .univ-artist-name { font-size: 14px; padding: 3px 10px; }
  .univ-album { width: 140px; }
  .univ-album-cover { width: 130px; height: 130px; border-width: 2.5px; }
  .univ-album-play { width: 46px; height: 46px; font-size: 20px; top: 58px; }
  .univ-album-title { font-size: 13px; max-width: 130px; }
  .univ-album-artist { font-size: 11px; }
  .univ-note { width: 180px; min-height: 140px; font-size: 17px; padding: 18px 14px 12px; line-height: 1.35; font-weight: 700; }
  .univ-note-body { -webkit-line-clamp: 4; }
  .univ-tag { font-size: 1em; padding: 5px 12px; }
}

/* ===================== DISCOVER PAGE (grid version — unused) ===================== */
.discover-canvas {
  position: relative;
  min-height: calc(100vh - var(--player-height));
  background: linear-gradient(180deg, #B9A5F0 0%, #C8B8F5 60%, #D4C5F7 100%);
  color: #111;
}
.discover-canvas .artist-bg-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 300px at 85% 10%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(ellipse 500px 200px at 10% 85%, rgba(255,255,255,0.18), transparent 60%);
  z-index: 0;
}
.discover-page {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
}
.discover-section {
  margin-bottom: 48px;
}
.discover-section .section-title {
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.section-more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #6B46C1 !important;
  text-decoration: none;
  padding: 4px 10px;
  border: 1.5px solid #6B46C1;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.section-more:hover {
  background: #6B46C1;
  color: #fff !important;
}

/* Master tracks grid — 3 rows */
.discover-masters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
}

/* Postit grid — wider, many */
.discover-postit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px 20px;
  padding: 4px 4px 8px;
}
.discover-postit-grid .artist-postit {
  background: #FFF9C4;
}
.artist-postit-sig {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.6;
  text-align: right;
  font-style: italic;
}

/* Tag cloud on discover — match philo aesthetic */
.discover-tag-cloud {
  background: rgba(255,255,255,0.45);
  border: 1.5px solid #111;
  border-radius: 2px;
  padding: 18px 20px;
  min-height: 80px;
}
.discover-canvas .tag-chip {
  color: #111 !important;
}

/* Artist chip grid */
.artist-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}
.artist-chip {
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 2px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
  box-shadow: 3px 3px 0 #111;
}
.artist-chip:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.artist-chip-avatar {
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #111;
  display: block;
  margin: 0 auto 10px;
}
.artist-chip-name {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artist-chip-sub {
  font-size: 12px;
  color: #6B46C1;
  font-weight: 700;
}

@media (max-width: 720px) {
  .discover-page { padding: 20px 16px 40px; }
  .discover-section { margin-bottom: 36px; }
  .discover-masters-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .discover-postit-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px; }
  .artist-chip-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
  .artist-chip { padding: 14px 10px; }
  .artist-chip-avatar { width: 56px; height: 56px; }
  .artist-chip-name { font-size: 13px; }
}
@media (max-width: 420px) {
  .discover-masters-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .discover-postit-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .artist-chip-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* Tag track grid — album art + title + artist */
.tag-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
.tag-track-card {
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s;
}
.tag-track-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 #111;
}
.tag-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1.5px solid #111;
}
.tag-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.tag-cover-wrap:hover .tag-cover { transform: scale(1.06); }
.tag-play-overlay {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FFE500;
  color: #111;
  border: 1.5px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 2px 2px 0 #111;
}
.tag-cover-wrap:hover .tag-play-overlay {
  opacity: 1; transform: translateY(0);
}
.tag-track-meta {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.tag-track-title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: #111;
  cursor: pointer;
  line-height: 1.3;
  word-break: keep-all;
  transition: color 0.2s;
}
.tag-track-title:hover { color: #6B46C1; }
.tag-track-artist {
  font-size: 13px;
  font-weight: 700;
  color: #6B46C1;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px;
  width: fit-content;
  transition: color 0.2s, transform 0.2s;
  padding: 2px 0;
}
.tag-track-artist:hover {
  color: #111;
  transform: translateX(2px);
}
.tag-track-artist i { font-size: 12px; opacity: 0.7; }
.tag-track-date {
  font-size: 11px;
  color: #2a2240;
  opacity: 0.55;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 3px;
}

@media (max-width: 560px) {
  .tag-track-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
  }
  .tag-track-meta { padding: 10px 12px 12px; }
  .tag-track-title { font-size: 13px; }
  .tag-track-artist { font-size: 12px; }
  .tag-play-overlay { width: 36px; height: 36px; font-size: 18px; bottom: 8px; right: 8px; }
}

/* Tag detail hero — same philo aesthetic */
.tag-hero {
  padding: 10px 0 16px;
  border-bottom: 1.5px dashed #111;
  margin-bottom: 12px;
}
.tag-hero-title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 80px);
  line-height: 1;
  letter-spacing: -2px;
  color: #FFE500;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
  margin-bottom: 12px;
  word-break: keep-all;
}
.tag-hero-stats {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1.5px solid #111;
  padding: 6px 14px; border-radius: 2px;
  color: #111; font-size: 13px; font-weight: 700;
}
.tag-count { color: #111; font-weight: 700; }

/* Admin dashboard */
.admin-section { margin-top: 24px; }
.admin-section-title {
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.admin-count {
  background: var(--brand-color); color: white;
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
}
.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-color); border: 1px solid var(--divider);
  padding: 12px 16px; border-radius: 8px;
}
.admin-row-cover {
  width: 50px; height: 50px; border-radius: 4px; object-fit: cover;
  background: #222;
}
.admin-row-body { flex: 1; min-width: 0; }
.admin-row-title {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-row-meta {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
.admin-note-preview {
  font-family: var(--font-hand);
  padding: 8px 10px; border-radius: 4px;
  min-width: 180px; max-width: 260px;
  font-size: 14px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-del-btn {
  background: rgba(255, 82, 82, 0.1);
  color: #ff5252; border: 1px solid rgba(255,82,82,0.3);
  padding: 6px 12px; border-radius: 16px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 0.2s;
}
.admin-del-btn:hover { background: rgba(255,82,82,0.25); }
.admin-empty {
  text-align: center; color: var(--text-secondary);
  padding: 30px 0;
}

/* Fan count + follow button (Supabase-backed) */
.fan-count-inline { color: #FF6B9D; font-weight: 700; }
.fan-count-inline strong { color: #FF6B9D; }
.follow-btn-v2 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: #FFE500;
  color: #111;
  border: 2px solid #111;
  border-radius: 2px;
  font-weight: 800; font-size: 13px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #111;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.follow-btn-v2:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.follow-btn-v2.is-following {
  background: #111; color: #FFE500;
  box-shadow: 3px 3px 0 #FFE500;
}
.follow-btn-v2.is-following:hover {
  box-shadow: 5px 5px 0 #FFE500;
}

/* Artist canvas — philo-electro-ray aesthetic: lavender bg + thin black borders + flat color blocks */
.artist-canvas {
  position: relative;
  min-height: calc(100vh - var(--player-height));
  background: linear-gradient(180deg, #B9A5F0 0%, #C8B8F5 60%, #D4C5F7 100%);
  color: #111;
}
.artist-bg-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 700px 300px at 85% 10%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(ellipse 500px 200px at 10% 85%, rgba(255,255,255,0.18), transparent 60%);
  z-index: 0;
}
.artist-canvas .sub-page { position: relative; z-index: 1; padding: 20px 26px; }
.album-page .album-tracks-section,
.album-page .artist-tracks-section,
.album-page .artist-comment-section { margin-top: 20px !important; }
.artist-canvas .artist-tracks-section { margin-top: 18px !important; }
.artist-canvas .artist-comment-section { margin-top: 24px !important; }
.artist-canvas a[href="#"] { color: #2a2240 !important; font-weight: 700; }
.artist-canvas a[href="#"]:hover { color: #6B46C1 !important; }
.artist-canvas .btn-primary {
  background: #FFE500; color: #111;
  border: 1.5px solid #111; border-radius: 2px;
  box-shadow: 2px 2px 0 #111;
  font-weight: 800;
}
.artist-canvas .btn-primary:hover {
  background: #111; color: #FFE500;
  box-shadow: 3px 3px 0 #FFE500;
  transform: translate(-1px,-1px);
}

/* Section titles — bold box style */
.section-title {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid #111;
  background: #fff;
  padding: 8px 18px;
  border-radius: 2px;
  font-size: 18px; font-weight: 800;
  color: #111;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}
.section-music {
  font-size: 22px;
}
.section-title i { color: #111 !important; }
.section-title-hand {
  font-family: var(--font-family);
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  font-weight: 800; letter-spacing: -0.3px;
  font-size: 18px;
  padding: 8px 18px;
  border-radius: 2px;
}
.section-title-hand i { color: #111 !important; }

.artist-stats {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: #2a2240; font-size: 13px; font-weight: 600;
}
.stat-dot { opacity: 0.3; }

.artist-strip {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 0 20px;
  position: relative;
}
.artist-id {
  display: flex; align-items: center; gap: 22px;
  min-width: 0; flex: 1;
}
.artist-id-text { min-width: 0; flex: 1; }
.artist-id-text h1 {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 1;
  letter-spacing: -2px;
  color: #FFE500;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
  margin-bottom: 10px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.artist-id-text .artist-stats {
  background: #fff; color: #111;
  display: inline-flex;
  border: 1.5px solid #111;
  border-radius: 2px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 700;
}
.artist-avatar {
  width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #111;
  box-shadow: none;
  background: #fff;
}

/* Version row wrapper for expand/collapse */
.version-wrap { position: relative; }
.version-expand-caret {
  margin-left: auto; margin-right: 4px;
  color: var(--text-secondary); font-size: 20px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  flex-shrink: 0;
}
.version-wrap.open .version-expand-caret { transform: rotate(180deg); }

.version-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.35s, padding 0.3s;
  padding: 0 14px 0 30px;
}
.version-wrap.open .version-expanded {
  max-height: 2000px;
  opacity: 1;
  padding: 6px 14px 18px 30px;
}

/* Artist diary box — flat, thin black border */
.artist-canvas .demo-diary {
  position: relative;
  padding: 16px 18px 14px;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 2px;
  font-family: var(--font-family);
  color: #111;
  font-size: 15px; line-height: 1.6;
  margin: 4px 0 18px;
  box-shadow: 3px 3px 0 #111;
}
.artist-canvas .diary-label {
  display: inline-block;
  background: #FFE500;
  border: 1.5px solid #111;
  padding: 2px 10px;
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  border-radius: 2px;
}
.artist-canvas .diary-body { word-break: break-word; font-weight: 500; }
.artist-canvas .diary-edit {
  position: absolute;
  top: 8px; right: 8px;
  background: #FFE500;
  color: #111;
  width: 28px; height: 28px;
  border: 1.5px solid #111;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s;
}
.artist-canvas .diary-edit:hover { transform: scale(1.12); }

.artist-canvas .demo-diary-empty {
  background: transparent;
  color: #2a2240;
  font-weight: 700;
  padding: 12px 16px;
  border: 1.5px dashed #111;
  border-radius: 2px;
  margin: 4px 0 18px;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-family);
}
.artist-canvas .demo-diary-empty:hover {
  background: #FFE500;
}
.artist-canvas .demo-diary-empty-silent {
  font-size: 13px; color: #2a2240;
  opacity: 0.55;
  margin: 4px 0 16px;
  font-weight: 600;
}

.artist-canvas .demo-comments { padding: 6px 0 2px; }
.artist-canvas .scribble-title {
  font-family: var(--font-family);
  display: inline-block;
  background: #111; color: #FFE500;
  padding: 4px 12px;
  font-size: 11px; font-weight: 900; letter-spacing: 1px;
  margin-bottom: 12px;
  border-radius: 2px;
}
.artist-canvas .comment-line {
  font-family: var(--font-hand);
  font-size: 20px; color: #111;
  text-shadow: none;
}
.artist-canvas .comment-arrow { color: #6B46C1; }
.artist-canvas .comment-author { color: #6B46C1; }
.artist-canvas .no-comments {
  font-family: var(--font-hand);
  color: #2a2240; opacity: 0.5;
  font-size: 18px; padding: 10px 0;
}
.artist-canvas .scribble-input-row {
  margin-top: 14px; padding-top: 12px;
  border-top: 1.5px dashed #111;
}
.artist-canvas .scribble-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid #111 !important;
  color: #111 !important;
  font-family: var(--font-hand) !important;
  font-size: 20px !important;
  padding: 4px 2px 6px !important;
  border-radius: 0 !important;
}
.artist-canvas .scribble-input::placeholder {
  color: #2a2240; opacity: 0.35;
  font-style: italic;
}
.artist-canvas .scribble-input:focus {
  border-bottom-color: #6B46C1 !important;
}
.artist-canvas .scribble-name-input {
  font-size: 14px !important;
  color: #6B46C1 !important;
  opacity: 0.9;
}
.artist-canvas .scribble-send {
  color: #111;
  background: #FFE500;
  border: 1.5px solid #111;
  padding: 4px 14px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 13px;
  border-radius: 2px;
  margin-top: 4px;
}
.artist-canvas .scribble-send::before { content: '✎ '; font-size: 13px; }
.artist-canvas .scribble-send:hover {
  background: #111; color: #FFE500;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 #FFE500;
}

/* Activity timeline */
.timeline-list {
  display: flex; flex-direction: column;
  border-left: 2px dashed rgba(255,213,79,0.3);
  padding-left: 0;
  margin-left: 12px;
}
.timeline-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; margin-left: -13px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.25s;
  position: relative;
}
.timeline-item:hover { background: var(--surface-hover); }
.timeline-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  background: #222; border: 2px solid var(--bg-color);
  margin-top: 2px;
}
.note-icon { color: #FFD54F; background: #3a2f00; }
.demo-icon { color: #FFB74D; background: #3a2200; }
.master-icon { color: var(--brand-color); background: #0d3a1d; box-shadow: 0 0 12px rgba(29,185,84,0.4); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-meta {
  font-family: var(--font-hand); font-size: 14px;
  color: #FFD54F; opacity: 0.85; margin-bottom: 2px;
}
.timeline-text {
  font-size: 14px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fan letters wall */
.fan-letter-write {
  background: rgba(248,187,208,0.06);
  border: 1px dashed rgba(248,187,208,0.3);
  border-radius: 12px; padding: 16px;
  margin-bottom: 20px;
}
.fan-letters-wall {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 10px 4px 20px;
}
.fan-letter {
  position: relative;
  width: 180px; min-height: 130px;
  padding: 18px 14px 14px;
  border-radius: 2px;
  font-family: var(--font-hand);
  font-size: 17px; line-height: 1.45;
  transform: rotate(var(--rot));
  box-shadow: 3px 5px 14px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s;
}
.fan-letter::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 12px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}
.fan-letter:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 5px 10px 28px rgba(0,0,0,0.55);
  z-index: 5;
}
.fan-letter-body { word-break: break-word; }
.fan-letter-sig { margin-top: 10px; font-size: 13px; opacity: 0.65; text-align: right; font-style: italic; }
.fan-letters-empty {
  font-family: var(--font-hand); font-size: 18px;
  color: var(--text-secondary);
  text-align: center; padding: 40px 20px;
  width: 100%;
}

/* Toast */
.os-toast {
  position: fixed; bottom: calc(var(--player-height) + 90px);
  left: 50%; transform: translateX(-50%);
  background: rgba(20,20,20,0.95);
  color: white;
  padding: 12px 22px;
  border-radius: 24px;
  font-size: 14px; font-weight: 600;
  z-index: 4000;
  backdrop-filter: blur(12px);
  border: 1px solid var(--divider);
  animation: toastFadeOut 2.2s ease forwards;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .floating-shape { padding: 14px; }
  .floating-shape .shape-text { font-size: 18px; max-width: 170px; line-height: 1.32; font-weight: 700; }
  .shape-circle { width: 228px; height: 228px; }
  .shape-oval { width: 210px; height: 140px; }
  .shape-rect { width: 256px; height: 190px; }
  .shape-triangle {
    border-left-width: 100px; border-right-width: 100px; border-bottom-width: 180px;
  }
  .shape-triangle .shape-text { bottom: -170px; width: 170px; }
  .shape-star { width: 240px; height: 240px; }
  .shape-star .shape-text { max-width: 84px; font-size: 12px; line-height: 1.15; }
  .shape-diamond { width: 218px; height: 218px; }
  .shape-hexagon { width: 242px; height: 218px; }
  .shape-parallelogram { width: 210px; height: 135px; }
  .shape-resize-handle { width: 26px; height: 26px; font-size: 14px; }
  .upload-fab { right: 16px; bottom: calc(var(--player-height) + 16px); width: 48px; height: 48px; font-size: 24px; }
  .hamburger-btn { width: 42px; height: 42px; font-size: 20px; }
}

/* Small phones */
@media (max-width: 420px) {
  .floating-shape { padding: 12px; }
  .floating-shape .shape-text { font-size: 16px; max-width: 145px; line-height: 1.28; }
  .shape-circle { width: 190px; height: 190px; }
  .shape-oval { width: 175px; height: 118px; }
  .shape-rect { width: 210px; height: 159px; }
  .shape-triangle {
    border-left-width: 82px; border-right-width: 82px; border-bottom-width: 148px;
  }
  .shape-triangle .shape-text { bottom: -138px; width: 138px; }
  .shape-star { width: 200px; height: 200px; }
  .shape-star .shape-text { max-width: 70px; font-size: 11px; line-height: 1.12; }
  .shape-diamond { width: 180px; height: 180px; }
  .shape-hexagon { width: 202px; height: 181px; }
  .shape-parallelogram { width: 175px; height: 118px; }
}

/* ===== 다마고치 / 포켓몬 카드 — 함께 만드는 아티스트 컬렉션 ===== */
.tama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.tama-card {
  position: relative;
  background: #fff;
  border: 2px solid #111;
  border-radius: 12px;
  padding: 0;
  box-shadow: 4px 4px 0 #111;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
}
.tama-card:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 7px 0 #111;
}
.tama-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--tama-color, #FFE500), var(--tama-color-2, #FFD54F));
  border-bottom: 2px solid #111;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.2px;
  color: #111;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.tama-card-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.tama-card-stage-emoji {
  font-size: 22px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15));
}
.tama-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f3ec;
  border-bottom: 2px solid #111;
}
.tama-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tama-card:hover .tama-card-photo img {
  transform: scale(1.06);
}
.tama-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.25), transparent 45%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
}
.tama-card-info {
  padding: 10px 12px 4px;
  text-align: left;
}
.tama-card-name {
  font-weight: 900;
  font-size: 16px;
  color: #111;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tama-card-sub {
  font-size: 11px;
  color: #6B46C1;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.tama-card-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 12px 0;
  font-size: 11px;
  font-weight: 800;
  color: #2a2240;
  letter-spacing: 0.2px;
}
.tama-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.05);
  padding: 2px 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.15);
}
.tama-stat i { font-size: 12px; }
.tama-card[data-tier="0"] .tama-stat { opacity: 0.7; }

.tama-card-progress {
  margin: 8px 12px 4px;
  height: 8px;
  background: #f0eae0;
  border: 1.5px solid #111;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.tama-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tama-color, #FFE500), var(--tama-color-2, #FFD54F));
  border-right: 1.5px solid #111;
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.tama-card-next {
  font-size: 10px;
  color: #6e6478;
  padding: 4px 12px 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tama-card-next .tama-next-emoji {
  font-size: 14px;
}
.tama-card-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.tama-card:hover .tama-card-shimmer {
  transform: translateX(100%);
}
/* Sample / preview cards — show with reduced saturation + corner badge */
.tama-card-sample {
  position: relative;
  filter: saturate(0.85);
}
.tama-card-sample::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.08) 0,
    rgba(255,255,255,0.08) 6px,
    transparent 6px,
    transparent 14px
  );
  z-index: 5;
}
.tama-card-sample-badge {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 10;
  background: #111;
  color: #FFE500;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1.5px solid #fff;
  box-shadow: 1px 1px 0 #fff;
}

/* Special star-tier: holographic-ish look */
.tama-card[data-tier="4"] .tama-card-header {
  background: linear-gradient(135deg, #FFE500, #FF6B9D, #6B46C1, #4ECDC4);
  background-size: 300% 300%;
  animation: tamaHolo 6s ease infinite;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
@keyframes tamaHolo {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.tama-empty {
  border: 2px dashed #111;
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  color: #2a2240;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.4);
}
.tama-empty-emoji {
  font-size: 32px;
  margin-bottom: 6px;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.15));
}
@media (max-width: 720px) {
  .tama-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .tama-card-name { font-size: 14px; }
  .tama-card-stage-emoji { font-size: 18px; }
}

/* ===== 폴더 카드 — Spotify-style 음악 폴더 ===== */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.folder-card {
  background: #fff;
  border: 2px solid #111;
  border-radius: 10px;
  padding: 12px 12px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #111;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-family);
}
.folder-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.folder-card-cover-stack {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid #111;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #f2ecdf;
}
.folder-card-cover-stack img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.folder-card-cover-template {
  background: linear-gradient(135deg, var(--folder-color, #FFE082), var(--folder-color-2, #FFD54F));
  display: flex; align-items: center; justify-content: center;
}
.folder-card-template-emoji {
  font-size: 56px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.18));
}
.folder-card-cover-new {
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0) 10px,
    rgba(0,0,0,0) 20px
  ), #fff;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  font-size: 56px;
}
.folder-card-cover-new i { font-size: 56px; opacity: 0.8; }
.folder-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.folder-card-title {
  font-weight: 900;
  font-size: 15px;
  color: #111;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-card-meta {
  font-size: 11px;
  color: #6e6478;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.folder-card-meta-template {
  font-size: 10px;
  color: #2a2240;
  font-weight: 700;
  opacity: 0.75;
  letter-spacing: 0.2px;
}
.folder-card-template { background: #fff; }
.folder-card-new { border-style: dashed; }
.folder-card-new:hover .folder-card-cover-new { background-color: #fff8d4; }
@media (max-width: 720px) {
  .folder-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .folder-card-template-emoji, .folder-card-cover-new i { font-size: 40px; }
}

/* ===== 다마고치 카드 모달 — 포켓몬 카드 펼치기 ===== */
.tama-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(circle at center, rgba(40, 30, 70, 0.85), rgba(10, 5, 25, 0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tamaModalFadeIn 0.25s ease-out;
}
@keyframes tamaModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tama-modal-content {
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  animation: tamaModalCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}
@keyframes tamaModalCardIn {
  0% { opacity: 0; transform: scale(0.4) rotateY(180deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotateY(0); }
}
.tama-modal-close {
  position: absolute;
  top: -6px; right: -6px;
  z-index: 100;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #111;
  color: #FFE500;
  border: 2px solid #FFE500;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 3px 3px 0 #fff;
  display: flex; align-items: center; justify-content: center;
}
.tama-modal-close:hover {
  transform: rotate(90deg) scale(1.05);
  background: #FFE500;
  color: #111;
  transition: transform 0.2s ease, background 0.2s, color 0.2s;
}

/* Big card body — mirrors tama-card style but expanded */
.tama-big-card {
  background: #fff;
  border: 3px solid #111;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #111, 0 0 30px rgba(255,229,0,0.3);
  overflow: hidden;
  position: relative;
}
.tama-big-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--tama-color, #FFE500), var(--tama-color-2, #FFD54F));
  border-bottom: 3px solid #111;
  color: #111;
  font-weight: 900;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.tama-big-card[data-tier="4"] .tama-big-card-header {
  background: linear-gradient(135deg, #FFE500, #FF6B9D, #6B46C1, #4ECDC4);
  background-size: 300% 300%;
  animation: tamaHolo 6s ease infinite;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.tama-big-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.tama-big-emoji {
  font-size: 36px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
}

.tama-big-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;
  border-bottom: 3px solid #111;
  background: #f7f3ec;
}
.tama-big-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tama-big-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.2), transparent 50%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3) 100%);
}
.tama-big-name-overlay {
  position: absolute;
  bottom: 12px; left: 16px; right: 16px;
  z-index: 5;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.8px;
  display: flex;
  flex-direction: column;
}
.tama-big-name-overlay-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 2px;
}

.tama-big-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-family);
  color: #111;
}

.tama-big-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tama-big-stat {
  background: #f5f0e3;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.tama-big-stat-icon { font-size: 18px; }
.tama-big-stat-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #111;
}
.tama-big-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #6e6478;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.tama-big-stat-weight {
  font-size: 9px;
  font-weight: 800;
  color: #6B46C1;
  letter-spacing: 0.2px;
}

.tama-big-progress-block {
  background: #f5f0e3;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 10px 12px;
}
.tama-big-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #111;
}
.tama-big-progress-bar {
  height: 12px;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 6px;
  overflow: hidden;
}
.tama-big-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tama-color, #FFE500), var(--tama-color-2, #FFD54F));
  border-right: 1.5px solid #111;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.tama-big-progress-next {
  font-size: 10px;
  font-weight: 700;
  color: #6e6478;
  margin-top: 4px;
  text-align: right;
}

.tama-big-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tama-big-section-title {
  font-size: 11px;
  font-weight: 900;
  color: #2a2240;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid #111;
  padding-bottom: 4px;
}
.tama-big-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tama-big-track-row:hover {
  transform: translateX(2px);
  box-shadow: 2px 2px 0 #111;
}
.tama-big-track-cover {
  width: 36px; height: 36px;
  border-radius: 4px;
  border: 1px solid #111;
  object-fit: cover;
  flex-shrink: 0;
}
.tama-big-track-info {
  flex: 1;
  min-width: 0;
}
.tama-big-track-title {
  font-size: 13px;
  font-weight: 800;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tama-big-track-meta {
  font-size: 10px;
  color: #6e6478;
  font-weight: 700;
}
.tama-big-track-play {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #FFE500;
  border: 1.5px solid #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #111;
  flex-shrink: 0;
}

.tama-big-actions {
  display: flex;
  gap: 8px;
}
.tama-big-actions button {
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid #111;
}
.tama-big-action-follow {
  background: #FFE500;
  color: #111;
  box-shadow: 3px 3px 0 #111;
}
.tama-big-action-follow:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111;
}
.tama-big-action-follow.is-following {
  background: #111;
  color: #FFE500;
}
.tama-big-action-profile {
  background: #fff;
  color: #111;
  box-shadow: 3px 3px 0 #111;
}
.tama-big-action-profile:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111;
  background: #f8f4e8;
}

.tama-big-empty-row {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: #6e6478;
  font-weight: 700;
  background: #f5f0e3;
  border: 1.5px dashed #111;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .tama-modal-content { max-width: 96vw; }
  .tama-big-name-overlay { font-size: 22px; }
  .tama-big-stat-num { font-size: 18px; }
}

/* ===== PLAYLIST UNIVERSE — 4섹션 페이지 ===== */
.pl-page {
  background: linear-gradient(180deg, #1a0d2e 0%, #0e0822 60%, #07041a 100%);
  min-height: calc(100vh - var(--player-height));
  color: #fff;
  padding: 28px 24px 60px;
}
.pl-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto 28px;
}
.pl-back {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.18);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.18s;
}
.pl-back:hover {
  background: rgba(255,229,0,0.25);
  transform: translateX(-2px);
}
.pl-title-block { flex: 1; min-width: 0; }
.pl-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FFE500;
  text-transform: uppercase;
}
.pl-title {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: -1px;
  margin: 4px 0 6px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.pl-meta {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.4px;
}

.pl-section {
  max-width: 1100px;
  margin: 0 auto 36px;
  position: relative;
}
.pl-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFE500;
  color: #111;
  border: 2px solid #111;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
  box-shadow: 3px 3px 0 #111;
  margin-bottom: 8px;
}
.pl-section-title i { color: #111 !important; }
.pl-count {
  background: #111;
  color: #FFE500;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
}
.pl-section-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: 0.3px;
}
.pl-section-empty {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  padding: 18px 14px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  text-align: center;
}

/* Section 1: 마스터 universe — clean dark canvas */
.pl-universe {
  position: relative;
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,229,0,0.05), transparent 50%),
              rgba(0,0,0,0.25);
  overflow: hidden;
}

/* Section 2: 데모 universe — with subtle paper-like background */
.pl-demo-universe {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 38px,
      rgba(255,255,255,0.03) 38px,
      rgba(255,255,255,0.03) 39px
    ),
    rgba(0,0,0,0.2);
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.pl-demo {
  filter: contrast(1.05);
}
.pl-demo .shape-text {
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 16px;
}

/* Section 3: 포스트잇 grid */
.pl-postit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.pl-postit {
  position: relative;
  padding: 16px 14px;
  border: 1.5px solid #111;
  border-radius: 4px;
  font-family: var(--font-hand, 'Caveat', cursive);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pl-postit:hover {
  transform: rotate(0deg) translate(-2px, -3px) scale(1.04);
  box-shadow: 7px 7px 0 rgba(0,0,0,0.45);
  z-index: 10;
}
.pl-postit-body {
  flex: 1;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-postit-sig {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.7;
  margin-top: 8px;
  letter-spacing: -0.2px;
}

/* Section 4: TAG cloud */
.pl-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.08);
  min-height: 180px;
}
.pl-tag-bubble {
  display: inline-block;
  font-family: var(--font-family);
  font-weight: 900;
  letter-spacing: -0.5px;
  cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  transition: transform 0.2s, text-shadow 0.2s;
}
.pl-tag-bubble:hover {
  transform: rotate(0deg) scale(1.12);
  text-shadow: 3px 3px 0 rgba(255,229,0,0.4);
}

.pl-empty-page {
  text-align: center;
  padding: 80px 20px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  font-size: 14px;
  background: rgba(255,255,255,0.03);
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 16px;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .pl-page { padding: 18px 14px 40px; }
  .pl-section { margin-bottom: 28px; }
  .pl-section-title { font-size: 15px; padding: 6px 14px; }
  .pl-postit-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .pl-postit { font-size: 15px; min-height: 110px; padding: 12px 11px; }
}

/* ===== STO MINI 함께 만들기 BUTTON (데모 패널 안) ===== */
.sto-mini-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #9C27B0, #6B46C1);
  color: #fff;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  box-shadow: 3px 3px 0 #111;
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 12px;
  width: 100%;
  max-width: 360px;
}
.sto-mini-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.sto-mini-icon { font-size: 22px; }
.sto-mini-label { font-size: 14px; letter-spacing: -0.3px; }
.sto-mini-sub { font-size: 10px; font-weight: 600; opacity: 0.85; margin-left: auto; letter-spacing: 0.3px; }

/* ===== STO MINI MODAL ===== */
.sto-mini-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 8, 30, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tamaModalFadeIn 0.2s ease-out;
}
.sto-mini-content {
  width: 100%;
  max-width: 460px;
  position: relative;
  animation: stoMiniSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes stoMiniSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sto-mini-close {
  position: absolute;
  top: -10px; right: -10px;
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: 2px solid #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sto-mini-card {
  background: #fff;
  border: 2.5px solid #111;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 5px 5px 0 #9C27B0;
  font-family: var(--font-family);
}
.sto-mini-banner {
  background: linear-gradient(135deg, #9C27B0, #6B46C1, #4ECDC4);
  background-size: 200% 200%;
  animation: tamaHolo 8s ease infinite;
  color: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2.5px solid #111;
}
.sto-mini-banner-emoji {
  font-size: 32px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
}
.sto-mini-eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.85;
}
.sto-mini-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.sto-mini-desc {
  padding: 16px 20px 8px;
  color: #2a2240;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}
.sto-mini-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 16px 12px;
}
.sto-mini-amount {
  position: relative;
  background: #fff;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 14px 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  box-shadow: 2px 2px 0 #111;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.sto-mini-amount:hover {
  background: #FFE500;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111;
}
.sto-mini-amount.sto-amount-recommended {
  background: linear-gradient(135deg, #FFE500, #FFD600);
}
.sto-mini-amount.is-active {
  background: linear-gradient(135deg, #FF4081, #E91E63);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111;
}
.sto-mini-amount.is-active .sto-amt-sub { color: rgba(255,255,255,0.85); }
.sto-mini-amount.is-active .sto-amt-badge { background: #fff; color: #E91E63; }

/* 메시지 입력 박스 */
.sto-mini-message-row {
  margin-top: 14px;
}
.sto-mini-message-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.sto-mini-message-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #111;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  font-family: var(--font-hand);
  box-shadow: 2px 2px 0 #111;
  transition: box-shadow .15s;
  color: #111;
}
.sto-mini-message-input:focus {
  outline: none;
  box-shadow: 3px 3px 0 #111;
}
.sto-mini-message-input::placeholder { color: rgba(0,0,0,0.4); }
.sto-mini-message-counter {
  text-align: right;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

/* 통합 submit 버튼 */
.sto-mini-submit-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FF4081, #7C4DFF);
  color: #fff;
  border: 2px solid #111;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 #111;
  transition: transform .15s, box-shadow .15s, filter .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sto-mini-submit-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111;
  filter: brightness(1.1);
}
.sto-mini-submit-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111;
}
.sto-amt-badge {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: #FF1744;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1.5px solid #111;
  letter-spacing: 0.5px;
}
.sto-amt-num {
  font-size: 18px;
  font-weight: 900;
  color: #111;
  letter-spacing: -0.5px;
}
.sto-amt-sub {
  font-size: 10px;
  font-weight: 700;
  color: #6e6478;
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.sto-mini-custom-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}
.sto-mini-custom-input {
  flex: 1;
  border: 2px solid #111;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}
.sto-mini-custom-input:focus {
  outline: none;
  background: #fffae0;
}
.sto-mini-custom-btn {
  background: #111;
  color: #FFE500;
  border: 2px solid #111;
  border-radius: 6px;
  padding: 10px 16px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}
.sto-mini-custom-btn:hover {
  background: #FFE500;
  color: #111;
}
.sto-mini-footer {
  padding: 10px 16px 14px;
  font-size: 11px;
  color: #6e6478;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-top: 1.5px dashed rgba(0,0,0,0.15);
  margin-top: 4px;
}

/* ===== STO PORTFOLIO IN PROFILE ===== */
.sto-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.sto-summary-block {
  background: linear-gradient(135deg, #9C27B0, #6B46C1);
  border: 2px solid #111;
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  color: #fff;
  box-shadow: 2px 2px 0 #111;
}
.sto-summary-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.9;
  text-transform: uppercase;
}
.sto-summary-value {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.4px;
  margin-top: 2px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.sto-backings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sto-backing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 6px;
  font-family: var(--font-family);
}
.sto-backing-emoji { font-size: 18px; }
.sto-backing-info { flex: 1; min-width: 0; }
.sto-backing-artist {
  font-size: 13px;
  font-weight: 900;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sto-backing-track {
  font-size: 11px;
  color: #6e6478;
  font-weight: 700;
}
.sto-backing-amt { text-align: right; }
.sto-backing-amt-num {
  font-size: 14px;
  font-weight: 900;
  color: #9C27B0;
}
.sto-backing-amt-date {
  font-size: 10px;
  color: #6e6478;
  font-weight: 700;
}
@media (max-width: 720px) {
  .sto-summary-value { font-size: 14px; }
  .sto-summary-label { font-size: 9px; }
  .sto-mini-amounts { grid-template-columns: 1fr; }
}

/* ===================== ALBUM PAGE — same lavender canvas as artist page ===================== */
.album-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  /* uses .artist-canvas lavender background + .artist-bg-deco radials (composed via classes) */
}
.album-banner-content {
  position: relative; z-index: 1;
  padding: 24px 28px 40px;
}
/* Cover-on-right banner layout (SoundCloud single-track absorption) */
.album-hero {
  display: flex; gap: 20px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.album-hero-cover {
  width: 180px; height: 180px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  flex: 0 0 auto;
  order: 2;
}
.album-hero-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 320px;
  order: 1;
}
.album-hero-text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.album-hero-play-circle {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border: none; cursor: pointer;
  font-size: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  padding: 0 0 0 3px;
  transition: transform 0.2s, background 0.2s;
}
.album-hero-play-circle:hover { background: var(--brand-color); transform: scale(1.06); color: #000; }
.album-hero-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #6B46C1;
}
.album-hero-title {
  font-size: clamp(22px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  color: #2a2240;
  margin: 0;
  word-break: keep-all;
}
.album-hero-artist {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700;
  color: #2a2240;
  cursor: pointer;
  transition: color 0.2s;
  width: fit-content;
}
.album-hero-artist:hover { color: #6B46C1; }
.album-hero-meta {
  font-size: 12px; color: #6B46C1;
}
.album-hero-play {
  margin-top: 8px;
  background: var(--brand-color);
  color: #000;
  font-weight: 700;
  border: none;
  padding: 8px 18px;
  border-radius: 18px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px;
  width: fit-content;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.album-hero-play:hover {
  background: var(--brand-hover, #1ed760);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(29,185,84,0.35);
}

.album-body {
  position: relative; z-index: 1;
  margin-top: 12px;
}
.album-banner-content { padding: 18px 22px 20px !important; }

/* Two-column layout: main feed on the left, sidebar with related on the right */
.album-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: start;
}
.album-main { min-width: 0; }
.album-sidebar { display: flex; flex-direction: column; gap: 12px; }
.album-sidebar-block {
  background: var(--surface-color, #1a1a1a);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 10px 12px;
}
.album-sidebar-title {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
}
.album-sidebar-list { display: flex; flex-direction: column; gap: 6px; }
.album-sidebar-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  transition: background 0.2s;
}
.album-sidebar-item:hover { background: rgba(255,255,255,0.05); }
.album-sidebar-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; }
.album-sidebar-meta { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.album-sidebar-track-title {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-sidebar-track-artist { font-size: 10px; color: var(--text-secondary); margin-top: 1px; }

@media (max-width: 900px) {
  .album-layout { grid-template-columns: 1fr; }
  .album-sidebar { order: 2; }
}

/* Force the album page's project box to look "naked" — banner is the cover already.
   We hide the project-header and just show the body (demo rows). */
.album-tracks .project-box .project-header { display: none; }
.album-tracks .project-box {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.album-tracks .project-body { max-height: none !important; opacity: 1 !important; }

/* Related tracks grid */
.album-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.album-related-item {
  background: var(--surface-color, #1a1a1a);
  border: 1px solid var(--divider);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.2s, box-shadow 0.25s;
}
.album-related-item:hover {
  transform: translateY(-4px);
  background: var(--surface-hover, #232323);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.album-related-item img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; display: block;
}
.album-related-meta {
  padding: 10px 12px 12px;
}
.album-related-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-related-artist {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 720px) {
  .album-hero-cover { width: 180px; height: 180px; order: 1; }
  .album-hero-info { order: 2; }
  .album-banner-content { padding: 18px 18px 30px; }
  .album-banner-bg { height: 360px; }
  .album-page::after { top: 260px; }
  .album-hero-play-circle { width: 56px; height: 56px; font-size: 28px; }
}

/* ===================== ARTIST PAGE — two-column body + stats sidebar ===================== */
.artist-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
  align-items: start;
  margin-top: 4px;
}
.artist-main { min-width: 0; }
.artist-sidebar { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.artist-sidebar-block {
  background: rgba(255,255,255,0.5);
  border: 1.5px solid #2a2240;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 3px 3px 0 #2a2240;
}
.artist-sidebar-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; text-align: center;
}
.artist-stat-num {
  font-size: 18px; font-weight: 800;
  color: #2a2240;
  font-family: var(--font-hand);
  line-height: 1.1;
}
.artist-stat-label {
  font-size: 10px; font-weight: 700;
  color: #6B46C1;
  margin-top: 2px;
}
.artist-sidebar-title {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: #6B46C1;
  margin-bottom: 4px;
}
.artist-sidebar-num {
  font-size: 22px; font-weight: 800;
  color: #2a2240;
  font-family: var(--font-hand);
  line-height: 1.1;
}
.artist-sidebar-num-unit {
  font-size: 12px; font-weight: 600;
  color: #6B46C1; margin-left: 3px;
}
.follow-btn-v2.sidebar-follow {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .artist-layout { grid-template-columns: 1fr; }
  .artist-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .artist-sidebar-block { flex: 1 1 200px; }
}

/* ===================== ARTIST PAGE — All tracks tab + collapsible projects ===================== */
.artist-tracks-tabs {
  display: flex; gap: 8px; margin-bottom: 18px;
  border-bottom: 1.5px solid var(--divider);
}
.artist-tab {
  background: none; border: none; color: var(--text-secondary);
  padding: 10px 4px; font-size: 15px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent; margin-bottom: -1.5px;
}
.artist-tab.is-active { color: var(--text-primary); border-bottom-color: var(--brand-color); }
.artist-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: var(--text-secondary);
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.artist-tab.is-active .artist-tab-count { background: var(--brand-color); color: #000; }

/* 탭 패널 — 활성화된 것만 표시 */
.artist-tab-panel { display: none; }
.artist-tab-panel.is-active { display: block; animation: artist-tab-fade 0.2s ease; }
@keyframes artist-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 포스트잇 탭 안 서브탭 (내가 올린 글 / 내가 모은 글) */
.artist-subtabs {
  display: flex; gap: 24px;
  margin: 4px 0 18px;
  border-bottom: 1px solid var(--divider);
}
.artist-subtab {
  background: none; border: none;
  color: var(--text-secondary);
  padding: 8px 0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.artist-subtab:hover { color: var(--text-primary); }
.artist-subtab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-color);
}
.artist-subpanel { display: none; }
.artist-subpanel.is-active { display: block; }

/* ============ 라이브러리 — 섹션 헤더 + 더보기 링크 ============ */
.library-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.library-section-head h2 {
  font-size: 20px; font-weight: 700; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.library-more-link {
  color: var(--brand-color);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 14px;
  transition: background .15s;
}
.library-more-link:hover {
  background: rgba(29,185,84,0.12);
}

/* ============ 코르크 보드 (라이브러리 — 내 포스트잇 모음) ============ */
.cork-board {
  position: relative;
  padding: 30px 18px 24px;
  border-radius: 10px;
  /* 따뜻한 코르크 베이지 + 입자 텍스처 (radial-gradient 반복) */
  background:
    radial-gradient(circle at 12% 18%, rgba(70,40,15,0.32) 1.2px, transparent 2px),
    radial-gradient(circle at 38% 42%, rgba(60,30,10,0.28) 1px,   transparent 2px),
    radial-gradient(circle at 67% 78%, rgba(80,45,18,0.30) 1.4px, transparent 2.4px),
    radial-gradient(circle at 88% 22%, rgba(70,35,12,0.26) 1px,   transparent 2px),
    radial-gradient(circle at 25% 65%, rgba(255,220,170,0.18) 1px, transparent 2px),
    radial-gradient(circle at 75% 35%, rgba(255,220,170,0.16) 1px, transparent 2px),
    linear-gradient(180deg, #c19770 0%, #b08560 100%);
  background-size: 80px 80px, 110px 110px, 90px 90px, 120px 120px,
                   100px 100px, 130px 130px, 100% 100%;
  /* 나무 프레임 느낌 */
  border: 6px solid #5d3a1a;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 0 18px rgba(70,30,10,0.35);
  /* postit들이 자유롭게 흩어진 느낌 — flex wrap with overlap allowed via margin */
  display: flex; flex-wrap: wrap; gap: 22px 18px;
  min-height: 220px;
}

.cork-board-legend {
  display: flex; gap: 20px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-pin {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.legend-pin-favorite { background: radial-gradient(circle at 30% 30%, #ff6b9d, #c2185b); }
.legend-pin-bookmark { background: radial-gradient(circle at 30% 30%, #b39ddb, #5e35b1); }

.cork-note {
  position: relative;
  width: 168px;
  min-height: 130px;
  padding: 20px 14px 12px;
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 1.45;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 3px 5px 14px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 2px;
  z-index: 1;
}
.cork-note:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.04);
  box-shadow: 5px 8px 22px rgba(0,0,0,0.5);
  z-index: 5;
}
.cork-note-body {
  word-break: keep-all;
  white-space: pre-wrap;
  font-weight: 600;
}
.cork-note-author {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.7;
}

/* 압정 — 좋아한 글은 핑크, 북마크는 보라 */
.cork-pin {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow:
    0 2px 3px rgba(0,0,0,0.5),
    inset -2px -2px 3px rgba(0,0,0,0.35),
    inset 2px 2px 2px rgba(255,255,255,0.4);
  z-index: 2;
}
.cork-note.pin-favorite .cork-pin {
  background: radial-gradient(circle at 30% 30%, #ff6b9d, #c2185b);
}
.cork-note.pin-bookmark .cork-pin {
  background: radial-gradient(circle at 30% 30%, #b39ddb, #5e35b1);
}
/* 둘 다 해당되면 핑크 + 그 옆에 보라 추가 */
.cork-pin.cork-pin-alt {
  left: calc(50% + 14px);
  background: radial-gradient(circle at 30% 30%, #b39ddb, #5e35b1) !important;
}

/* ============ 후원 폴라로이드 라이트박스 ============ */
.backing-lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 4, 12, 0.92);
  backdrop-filter: blur(14px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: bl-fade-in 0.25s ease;
}
@keyframes bl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bl-close {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.bl-close:hover { background: rgba(255,255,255,0.22); transform: scale(1.06); }

.bl-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  cursor: pointer;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.bl-nav:not([disabled]):hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); }
.bl-nav[disabled] { opacity: 0.25; cursor: not-allowed; }
.bl-prev { left: 24px; }
.bl-next { right: 24px; }

.bl-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  max-width: 540px;
  width: 100%;
}

/* 3D 뒤집기 컨테이너 — preserve-3d 는 wrap에, backface-visibility 는 face에 */
.bl-flip-wrap {
  position: relative;
  width: 380px; max-width: 100%;
  perspective: 1600px;
  cursor: pointer;
  animation: bl-pop 0.4s cubic-bezier(0.34,1.56,0.64,1);
  transform: rotate(var(--p-rot, 0deg));
}
.bl-face {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
.bl-face-front {
  /* 자연 flow — 높이 결정 */
  transform: rotateY(0deg);
}
.bl-face-back {
  /* 앞면 위에 겹쳐서 위치 */
  position: absolute; inset: 0;
  transform: rotateY(180deg);
}
.bl-flip-wrap.is-flipped .bl-face-front {
  transform: rotateY(180deg);
}
.bl-flip-wrap.is-flipped .bl-face-back {
  transform: rotateY(0deg);
}

.bl-polaroid {
  background: linear-gradient(180deg, #fafafa 0%, #f0ece4 100%);
  padding: 22px 22px 24px;
  width: 100%;
  box-shadow: 0 18px 48px rgba(0,0,0,0.65), 0 6px 18px rgba(0,0,0,0.4);
  border-radius: 2px;
}
@keyframes bl-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* 뒷면 — 종이 질감 + 손글씨 */
.bl-face-back .bl-polaroid {
  background:
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(120,90,40,0.08) 28px 29px),
    linear-gradient(180deg, #fdfaf0 0%, #f3ecd9 100%);
  min-height: 460px;
}
.bl-back-content {
  font-family: var(--font-hand);
  color: #2a1f08;
  padding: 8px 4px;
  height: 100%;
  display: flex; flex-direction: column;
}
.bl-back-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(120,90,40,0.3);
  margin-bottom: 18px;
}
.bl-back-eyebrow { font-size: 13px; color: #8b6f3f; font-weight: 700; }
.bl-back-amt {
  background: rgba(0,0,0,0.85); color: #FFD54F;
  padding: 4px 12px; border-radius: 16px;
  font-size: 14px; font-weight: 800;
}
.bl-back-message {
  flex: 1;
  font-size: 22px;
  line-height: 1.6;
  word-break: keep-all;
  white-space: pre-wrap;
  padding: 0 4px;
}
.bl-back-empty { color: rgba(60,40,10,0.45); font-style: italic; font-size: 16px; }
.bl-back-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(120,90,40,0.3);
  text-align: right;
}
.bl-back-date { font-size: 13px; color: #6b5a40; margin-bottom: 4px; }
.bl-back-sign { font-size: 15px; font-weight: 700; color: #2a1f08; }

/* 뒤집기 힌트 */
.bl-flip-hint {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 11px;
  color: rgba(60,40,10,0.6);
  background: rgba(255,255,255,0.6);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  font-family: var(--font-sans, inherit);
}

/* 키맵 안내 */
.bl-keymap {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ───── 꾸미기 (Decorations) ───── */
.bl-face-front { position: relative; }
.bl-photo { position: relative; }

.decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center;
}
.decor.is-editable { pointer-events: auto; cursor: grab; }
.decor.is-editable:active { cursor: grabbing; }
.decor.is-selected { outline: 2px dashed rgba(255,64,129,0.85); outline-offset: 4px; border-radius: 2px; }

.decor-sticker .decor-content {
  font-size: 36px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.decor-label .decor-content {
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
.decor-tape {
  width: 90px; height: 24px;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.25);
  /* 종이 테이프 너덜한 가장자리 */
  clip-path: polygon(2% 0%, 100% 4%, 98% 100%, 0% 96%);
}

/* 꾸미기 모드일 때 폴라로이드는 클릭/탭으로 뒤집기 비활성 */
.bl-flip-wrap.is-decor { cursor: default; }
.bl-flip-wrap.is-decor .bl-face-front { cursor: default; }

/* 도구 패널 */
.decor-panel {
  margin-top: 14px;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  width: 380px; max-width: 100%;
  color: #111;
  cursor: default;
}
.decor-tabs {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.decor-tab {
  flex: 1; background: rgba(0,0,0,0.06); border: none;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  color: #444;
  transition: background .15s, color .15s;
}
.decor-tab.is-active { background: #111; color: #fff; }
.decor-cats {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.decor-cat-btn {
  background: rgba(0,0,0,0.05); border: none;
  padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: #555;
}
.decor-cat-btn.is-active { background: #FF4081; color: #fff; }
.decor-sticker-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  max-height: 140px; overflow-y: auto;
}
.decor-sticker-pick {
  background: rgba(0,0,0,0.04); border: none;
  padding: 6px; border-radius: 6px;
  font-size: 20px; cursor: pointer;
  font-family: inherit;
  transition: background .12s, transform .12s;
}
.decor-sticker-pick:hover { background: rgba(255,64,129,0.15); transform: scale(1.1); }
.decor-tape-grid {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0;
}
.decor-tape-pick {
  width: 70px; height: 22px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 1px;
  clip-path: polygon(2% 0%, 100% 4%, 98% 100%, 0% 96%);
  cursor: pointer; padding: 0;
  transition: transform .12s;
}
.decor-tape-pick:hover { transform: scale(1.08) rotate(-3deg); }
.decor-label-form { display: flex; flex-direction: column; gap: 8px; }
.decor-label-form input[type="text"] {
  padding: 8px 10px; border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px; font-size: 14px;
  font-family: var(--font-hand);
}
.decor-color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.decor-color-pick {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  cursor: pointer; padding: 0;
}
.decor-color-pick:hover { transform: scale(1.15); }
.decor-add-label-btn {
  background: #111; color: #fff; border: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}

.decor-selected-actions {
  display: flex; gap: 4px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  flex-wrap: wrap; justify-content: center;
}
.decor-selected-actions button {
  background: rgba(0,0,0,0.06); border: none;
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; color: #333;
}
.decor-selected-actions button:hover { background: rgba(0,0,0,0.12); }
.decor-selected-actions .decor-delete-btn { background: #ffebee; color: #c62828; }
.decor-actions-empty {
  color: #888; font-size: 12px; text-align: center;
  padding: 8px 0; margin: 8px 0 0;
  border-top: 1px dashed rgba(0,0,0,0.1);
  border-bottom: none !important;
  font-style: italic;
  justify-content: center;
}

.decor-bottom-actions {
  display: flex; gap: 8px; margin-top: 14px;
  padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.08);
}
.decor-cancel {
  flex: 1; background: rgba(0,0,0,0.06); border: none;
  padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer; color: #555;
}
.decor-save {
  flex: 2; background: linear-gradient(135deg, #FF4081, #7C4DFF); color: #fff; border: none;
  padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.bl-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #222;
}
.bl-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bl-amt {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0,0,0,0.75);
  color: #FFD54F;
  font-size: 15px; font-weight: 800;
  padding: 6px 14px;
  border-radius: 18px;
  letter-spacing: 0.4px;
}
.bl-caption {
  padding: 20px 8px 4px;
  font-family: var(--font-hand);
  color: #2a1f08;
  text-align: center;
}
.bl-title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.bl-sub { font-size: 16px; color: #6b5a40; margin-top: 6px; }
.bl-date { font-size: 13px; color: #8b7a60; margin-top: 4px; }

.bl-actions {
  display: flex; gap: 12px; align-items: center;
}
.bl-action-link {
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .15s;
}
.bl-action-link:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }

.bl-counter {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

@media (max-width: 640px) {
  .backing-lightbox { padding: 16px; }
  .bl-polaroid { width: 88vw; padding: 16px 16px 18px; }
  .bl-title { font-size: 19px; }
  .bl-sub { font-size: 14px; }
  .bl-nav { width: 44px; height: 44px; font-size: 24px; }
  .bl-prev { left: 8px; }
  .bl-next { right: 8px; }
  .bl-close { top: 12px; right: 12px; }
}

/* ============ 함께 만들기 — 곡/사람 토글 ============ */
.backing-view-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.backing-toggle-btn {
  background: none; border: none;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s, transform .15s;
}
.backing-toggle-btn:hover { color: var(--text-primary); }
.backing-toggle-btn.is-active {
  background: var(--brand-color);
  color: #000;
}
.backing-view { display: none; }
.backing-view.is-active { display: block; animation: backing-view-fade 0.2s ease; }
@keyframes backing-view-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 폴라로이드 카드 (라이브러리 — 함께 만든 곡) ============ */
.polaroid-wall {
  display: flex; flex-wrap: wrap;
  gap: 28px 22px;
  padding: 20px 8px;
}
.polaroid {
  position: relative;
  background: #fafafa;
  padding: 12px 12px 14px;
  width: 178px;
  cursor: pointer;
  transform: rotate(var(--p-rot, 0deg));
  box-shadow: 3px 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border-radius: 2px;
  /* 약간 종이질감 */
  background-image: linear-gradient(180deg, #fafafa 0%, #f0ece4 100%);
}
.polaroid:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.06);
  box-shadow: 6px 12px 28px rgba(0,0,0,0.5);
  z-index: 5;
}
.polaroid-photo {
  position: relative;
  width: 154px; height: 154px;
  overflow: hidden;
  background: #222;
}
.polaroid-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-amt {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,0.7);
  color: #FFD54F;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}
.polaroid-caption {
  padding: 10px 4px 0;
  font-family: var(--font-hand);
  color: #2a1f08;
}
.polaroid-title {
  font-size: 15px; font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.polaroid-sub {
  font-size: 11px;
  color: #6b5a40;
  margin-top: 3px;
}

@media (max-width: 720px) {
  .cork-board { padding: 24px 12px 18px; gap: 18px 14px; }
  .cork-note { width: 152px; min-height: 118px; font-size: 15px; }
  .polaroid { width: 152px; padding: 10px 10px 12px; }
  .polaroid-photo { width: 132px; height: 132px; }
  .polaroid-title { font-size: 14px; }
}

/* About 탭 본문 */
.artist-about-body {
  font-size: 15px; line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: keep-all;
  padding: 8px 0;
  max-width: 720px;
}

/* Project collapse — keep the existing project-box visuals untouched, just hide the body */
.project-box .project-header { cursor: pointer; user-select: none; position: relative; }
.project-collapse-toggle {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.06); color: inherit;
  border: none; border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.2s;
  z-index: 5;
}
.project-collapse-toggle:hover { background: rgba(0,0,0,0.12); }
.project-box.is-collapsed .project-collapse-toggle { transform: rotate(-90deg); }
.project-box .project-body {
  max-height: none; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
  opacity: 1;
}
.project-box.is-collapsed .project-body {
  max-height: 0; opacity: 0; pointer-events: none;
}
.project-lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(124,77,255,0.18); color: #B39DFF;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; margin-left: 6px;
  vertical-align: middle;
}

/* Demo card — locked state (legacy, retained for safety) */
.demo-card.is-locked {
  opacity: 0.78;
  position: relative;
  cursor: pointer;
}
.demo-card.is-locked::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,0.0) 0 6px, rgba(0,0,0,0.05) 6px 12px);
  border-radius: inherit;
  pointer-events: none;
}
.demo-card.is-locked .demo-card-title { filter: blur(2px); }
.demo-play-btn.locked-play { background: rgba(124,77,255,0.25); color: #B39DFF; }

/* ==== Demo rows — each row is a beige notebook page with the journal post-it
   stuck on it. Vintage / 촌스러움 feel intentional; ruling lines + red margin. */
.demo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.demo-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 16px 1fr;
  grid-template-areas:
    "head arrow journal"
    "extras extras extras"
    "comments comments comments";
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  /* layered: red margin line + horizontal ruling + beige paper */
  background:
    linear-gradient(to right, transparent 0, transparent 28px, rgba(200,70,70,0.35) 28px, rgba(200,70,70,0.35) 29px, transparent 29px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(70,90,140,0.13) 23px, rgba(70,90,140,0.13) 24px),
    #f3e7c8;
  border: 1px solid #d4c08a;
  border-radius: 4px;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.18), 0 3px 10px rgba(0,0,0,0.12);
  padding: 10px 12px 10px 38px; /* compact + room for the red margin line */
  color: #2a2418;
}
.demo-row.is-master-row {
  /* warmer goldenrod paper for the master row */
  background:
    linear-gradient(to right, transparent 0, transparent 36px, rgba(200,70,70,0.35) 36px, rgba(200,70,70,0.35) 37px, transparent 37px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(120,80,40,0.14) 27px, rgba(120,80,40,0.14) 28px),
    linear-gradient(180deg, #f6dca5 0%, #f1e0b0 100%);
  border-color: #d4a64a;
}
.demo-row.is-locked-row {
  /* aged / yellowed page for locked entries */
  background:
    linear-gradient(to right, transparent 0, transparent 36px, rgba(124,77,255,0.35) 36px, rgba(124,77,255,0.35) 37px, transparent 37px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(120,90,40,0.18) 27px, rgba(120,90,40,0.18) 28px),
    /* subtle aged crosshatch */
    repeating-linear-gradient(135deg, rgba(0,0,0,0.0) 0 8px, rgba(0,0,0,0.025) 8px 16px),
    #e9dcb6;
  border-style: dashed;
  border-color: rgba(124,77,255,0.55);
}

/* Text inside the beige row needs to flip to dark/inked colors for readability */
.demo-row .demo-row-label { color: #2a2418; }
.demo-row .demo-row-date { color: #6b5b3a; }
.demo-row .demo-row-arrow { color: #6b5b3a; }
.demo-row .scribble-title { color: #4a3820; }
.demo-row .comment-line { color: #2a2418; }
.demo-row .comment-author { color: #6b5b3a; }
.demo-row .no-comments { color: rgba(60,40,20,0.55); }
/* Scribble inputs become darker on beige */
.demo-row .scribble-input {
  background: rgba(255,255,255,0.55);
  color: #2a2418;
  border: 1px solid rgba(60,40,20,0.25);
}
.demo-row .scribble-input::placeholder { color: rgba(60,40,20,0.45); }
.demo-row .scribble-input:focus { border-color: #6B46C1; background: #fff; }
/* Override the artist-canvas yellow scribble button so it pops on the beige paper */
.demo-row .scribble-send { background: #2a2418; color: #f3e7c8; }
.demo-row .scribble-send:hover { background: #4a3820; }
.demo-row .scribble-send::before { content: ''; }
.demo-row-head {
  grid-area: head;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.demo-row-head .demo-tag.is-free-tag { background: rgba(110,229,168,0.18); color: #6EE5A8; }
.demo-row-head .demo-tag.is-locked-tag { background: rgba(124,77,255,0.18); color: #B39DFF; }
.demo-row-head .demo-tag.master-tag { background: rgba(255,214,0,0.18); color: #FFD600; }
.demo-row-head .demo-play-btn {
  flex: 0 0 auto;
}
.demo-row-label {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  flex: 1 1 100%;
  min-width: 0;
  word-break: keep-all;
}
.demo-row-date { font-size: 11px; color: var(--text-secondary); }
.demo-row-arrow {
  grid-area: arrow;
  font-size: 22px;
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
  align-self: center;
  user-select: none;
}
/* Journal entry — rendered as a sticky-note (post-it). Picks up its color from
   inline --note-bg / --note-border / --note-text / --note-rot CSS vars set per
   demo, mirroring the wall-note look. */
.demo-row-journal {
  grid-area: journal;
  position: relative;
  font-family: var(--font-hand), 'Gaegu', 'Caveat', cursive;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: var(--note-text, #5D4037);
  background: var(--note-bg, #FFF9C4);
  border-radius: 2px;
  padding: 18px 16px 16px;
  transform: rotate(var(--note-rot, -1deg));
  box-shadow: 3px 4px 14px rgba(0,0,0,0.45);
  word-break: keep-all;
  white-space: normal;
  transition: box-shadow 0.3s, transform 0.3s;
}
.demo-row-journal:hover {
  box-shadow: 5px 8px 28px rgba(0,0,0,0.55);
  transform: rotate(0deg) translateY(-1px);
}
/* Tape strip on top — same as wall-note */
.demo-row-journal::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 13px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Empty state: pale post-it, dashed feel via lower opacity */
.demo-row-journal.is-empty {
  opacity: 0.78;
  cursor: pointer;
  font-style: italic;
}
.demo-row-journal.is-empty:hover { opacity: 1; }
/* Muted (visitor view, no journal) */
.demo-row-journal.is-muted {
  opacity: 0.65;
  font-style: italic;
}
/* Locked state — keep the post-it shape but mark it "locked": grey-out + lock CTA */
.demo-row-journal.is-locked {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #2a2138;
  color: #B39DFF;
  font-family: var(--font-hand);
  font-size: 17px;
  border: 1.5px dashed rgba(179,157,255,0.5);
  padding: 14px 16px;
  border-radius: 2px;
  transform: rotate(var(--note-rot, -1deg));
  box-shadow: 3px 4px 14px rgba(0,0,0,0.45);
  background-image:
    /* faint cross-hatch like locked-out paper */
    repeating-linear-gradient(135deg, rgba(255,255,255,0.0) 0 6px, rgba(255,255,255,0.04) 6px 12px);
}
.demo-row-journal.is-locked::before {
  background: rgba(179,157,255,0.35);
}
.demo-row-unlock {
  background: #6B46C1; color: #fff; border: none;
  padding: 6px 14px; border-radius: 16px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 0.2s, transform 0.2s;
  margin-left: auto;
}
.demo-row-unlock:hover { background: #7C5DD4; transform: translateY(-1px); }
.demo-row-journal-edit {
  position: absolute; top: 6px; right: 8px;
  background: rgba(0,0,0,0.06); border: none;
  color: #4a4030; cursor: pointer;
  font-size: 14px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.demo-row:hover .demo-row-journal-edit { opacity: 0.7; }
.demo-row-journal-edit:hover { background: rgba(0,0,0,0.12); opacity: 1; }
.demo-row-extras {
  grid-area: extras;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.demo-row .demo-comments {
  grid-area: comments;
  margin-top: 4px;
}

/* Mobile: stack head/arrow/journal vertically */
@media (max-width: 640px) {
  .demo-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "arrow"
      "journal"
      "extras"
      "comments";
  }
  .demo-row-arrow { text-align: left; transform: rotate(-90deg); width: fit-content; }
  .demo-row-journal { padding-right: 0; }
}

/* Locked version panel — replaces the whole journal/comments block until purchase */
.version-panel.is-locked-panel {
  background: linear-gradient(135deg, rgba(124,77,255,0.08), rgba(255,107,157,0.06));
  border: 1.5px dashed rgba(124,77,255,0.45);
  border-radius: 12px;
  padding: 26px 18px;
}
.locked-panel-content { text-align: center; }
.locked-panel-icon {
  font-size: 32px; color: #9C66FF; margin-bottom: 8px;
}
.locked-panel-title {
  font-size: 16px; font-weight: 800; color: #2a1a4a; margin-bottom: 6px;
}
.locked-panel-sub {
  font-size: 13px; color: #6B5B8A; margin-bottom: 14px; line-height: 1.5;
}
.locked-panel-cta {
  background: #6B46C1; color: #fff;
  padding: 10px 22px; border-radius: 22px;
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.locked-panel-cta:hover {
  background: #7C5DD4;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107,70,193,0.4);
}

/* ===================== ARTIST PAGE — bottom comments ===================== */
.artist-comment-section { padding-bottom: 40px; }
.artist-comment-compose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--surface-color);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.artist-comment-name {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--divider);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}
.artist-comment-name:focus { border-color: var(--brand-color); }
.artist-comment-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--divider);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  outline: none;
}
.artist-comment-textarea:focus { border-color: var(--brand-color); }
.artist-comment-submit {
  justify-self: end;
  background: var(--brand-color); color: #000;
  border: none; border-radius: 18px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s, transform 0.2s;
}
.artist-comment-submit:hover { background: var(--brand-hover); transform: translateY(-1px); }
.artist-comment-list { display: flex; flex-direction: column; gap: 10px; }
.artist-comment-item {
  background: var(--surface-color);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
}
.artist-comment-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.artist-comment-author {
  font-weight: 700; color: var(--text-primary); font-size: 13px;
}
.artist-comment-date {
  font-size: 11px; color: var(--text-secondary);
}
.artist-comment-del {
  margin-left: auto; background: none; border: none;
  color: var(--text-secondary); opacity: 0; cursor: pointer;
  font-size: 16px; transition: opacity 0.2s, color 0.2s;
}
.artist-comment-item:hover .artist-comment-del { opacity: 0.6; }
.artist-comment-del:hover { opacity: 1; color: #FF4081; }
.artist-comment-text {
  font-size: 14px; color: var(--text-primary); line-height: 1.55;
  word-break: break-word;
}

/* === DM Phase 2: unread 뱃지 + 읽음 표시 === */
.dm-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: #E91E63; color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  font-family: inherit;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.18);
  animation: dmBadgePulse 1.2s ease-out;
}
@keyframes dmBadgePulse {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.dm-msg-read {
  margin-left: 4px;
  color: rgba(60,40,10,0.55);
  font-size: 11px;
  font-weight: 600;
}

/* === DM (1:1 메시지) — 페이퍼 톤 통일 === */
.dm-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: #FFF6CE;
  color: #2a1f08;
  border: 1.5px solid rgba(120,90,40,0.35);
  border-radius: 999px;
  font-family: var(--font-hand);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.18);
  transition: transform .15s ease, background .15s ease;
}
.dm-open-btn:hover { transform: translateY(-2px); background: #FFE066; }
.dm-open-btn i { font-size: 17px; }

.dm-page { max-width: 720px; margin: 24px auto; padding: 0 20px; }
.dm-page-title {
  font-family: var(--font-hand); font-size: 28px; color: #2a2240;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.dm-page-title i { color: #6EE5A8; }
.dm-list { display: flex; flex-direction: column; gap: 10px; }
.dm-empty {
  background: rgba(255,251,230,0.7);
  border: 1.5px dashed rgba(120,90,40,0.35);
  border-radius: 6px;
  padding: 32px 18px;
  text-align: center;
  color: #4a3820;
  font-family: var(--font-hand); font-size: 17px;
}
.dm-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #FFFBE6;
  border: 1.5px solid rgba(120,90,40,0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.10);
}
.dm-row:hover {
  transform: translateY(-2px);
  box-shadow: 2px 3px 0 rgba(80,60,20,0.14), 3px 6px 12px rgba(60,40,10,0.12);
}
.dm-row-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(120,90,40,0.30);
}
.dm-row-body { flex: 1; min-width: 0; }
.dm-row-name {
  font-family: var(--font-hand); font-size: 18px; font-weight: 700;
  color: #2a1f08;
}
.dm-row-time {
  font-size: 12px; color: rgba(60,40,10,0.55); margin-top: 2px;
}
.dm-row-chevron { color: rgba(60,40,10,0.4); font-size: 22px; }

/* === DM thread (single conversation) === */
.dm-thread-page {
  max-width: 720px; margin: 18px auto;
  padding: 0 20px;
  display: flex; flex-direction: column;
  height: calc(100vh - 160px);
}
.dm-thread-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: #FFF6CE;
  border: 1.5px solid rgba(120,90,40,0.25);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
}
.dm-thread-back {
  color: #2a2240; font-size: 22px;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.dm-thread-back:hover { color: #6B46C1; }
.dm-thread-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(120,90,40,0.30);
}
.dm-thread-name {
  font-family: var(--font-hand); font-size: 18px; font-weight: 700;
  color: #2a1f08;
  cursor: pointer;
}
.dm-thread-name:hover { color: #6B46C1; }

.dm-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: rgba(255,251,230,0.5);
  border-left: 1.5px solid rgba(120,90,40,0.25);
  border-right: 1.5px solid rgba(120,90,40,0.25);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.dm-thread-empty {
  text-align: center;
  color: rgba(60,40,10,0.55);
  font-family: var(--font-hand);
  font-size: 16px;
  padding: 40px 0;
}
.dm-msg {
  display: flex; flex-direction: column;
  max-width: 70%;
}
.dm-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.dm-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.dm-msg-bubble {
  padding: 10px 14px;
  font-family: var(--font-hand);
  font-size: 17px; line-height: 1.4;
  color: #1a1208;
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 14px;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.10);
}
.dm-msg.is-mine .dm-msg-bubble {
  background: #FFE066;
  border: 1.5px solid rgba(140,90,0,0.35);
  border-bottom-right-radius: 4px;
}
.dm-msg.is-theirs .dm-msg-bubble {
  background: #BBDEFB;
  border: 1.5px solid rgba(20,80,160,0.30);
  color: #1A237E;
  border-bottom-left-radius: 4px;
}
.dm-msg-time {
  font-size: 11px; color: rgba(60,40,10,0.55); margin-top: 3px;
  font-family: inherit;
}

/* 본인 메시지에만 hover 시 노출되는 삭제 버튼 */
.dm-msg { position: relative; }
.dm-msg-delete {
  position: absolute;
  top: -4px;
  background: rgba(0,0,0,0.65); color: #fff;
  border: none; border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.dm-msg.is-mine .dm-msg-delete { left: -8px; }
.dm-msg.is-theirs .dm-msg-delete { display: none; }
.dm-msg:hover .dm-msg-delete { opacity: 1; }
.dm-msg-delete:hover { background: #c0392b; }

.dm-compose {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 14px;
  background: #FFF6CE;
  border: 1.5px solid rgba(120,90,40,0.25);
  border-top: 1.5px dashed rgba(120,90,40,0.25);
  border-radius: 0 0 6px 6px;
}
.dm-text {
  flex: 1;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(80,60,20,0.22);
  color: #2a1f08;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-hand);
  font-size: 16px;
  resize: none;
  outline: none;
  min-height: 40px; max-height: 140px;
}
.dm-text:focus { border-color: rgba(180,130,0,0.6); background: #fff; }
.dm-send-btn {
  background: #FFE066;
  color: #1a1208;
  border: 1.5px solid rgba(140,90,0,0.45);
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.18);
  display: flex; align-items: center; justify-content: center;
}
.dm-send-btn:hover { background: #FFD54F; transform: translateY(-1px); }
.dm-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
  .dm-thread-page { height: calc(100vh - 120px); padding: 0 10px; }
  .dm-msg { max-width: 85%; }
}

/* === Artist 페이지 — 와이드 hero 배너 (Spotify 스타일 + 빈티지 톤) === */
.artist-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2;
  max-height: 320px;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1.5px solid rgba(120,90,40,0.25);
  box-shadow: 2px 4px 0 rgba(80,60,20,0.16), 4px 8px 22px rgba(60,40,10,0.20);
  display: flex;
  align-items: flex-end;
  padding: 24px 28px;
  background: linear-gradient(135deg, #FFF6CE, #F8E0BB);
}
.artist-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(0.94) saturate(0.96);
}
.artist-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,15,10,0.62) 0%, rgba(20,15,10,0.15) 50%, transparent 100%);
}
.artist-banner-text {
  position: relative;
  z-index: 2;
  color: #FFE066;
}
.artist-banner.no-photo .artist-banner-text { color: #2a1f08; }
.artist-banner-name {
  font-family: var(--font-hand);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -1.5px;
  margin: 0;
  text-shadow: 3px 4px 0 rgba(0,0,0,0.45);
}
.artist-banner.no-photo .artist-banner-name {
  text-shadow: 2px 3px 0 rgba(80,60,20,0.18);
}
.artist-banner-stats {
  font-family: var(--font-hand);
  font-size: 17px;
  margin-top: 8px;
  opacity: 0.95;
  text-shadow: 1px 2px 0 rgba(0,0,0,0.30);
}
.artist-banner.no-photo .artist-banner-stats { text-shadow: none; }
.artist-banner-stats .fan-count-inline strong { color: inherit; }

.artist-banner-edit, .artist-banner-edit-empty {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  border: none;
  cursor: pointer;
}
.artist-banner-edit {
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.artist-banner-edit:hover { background: rgba(0,0,0,0.85); }
.artist-banner-edit-empty {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #FFE066;
  color: #1a1208;
  border: 1.5px solid rgba(140,90,0,0.45);
  border-radius: 999px;
  font-family: var(--font-hand);
  font-size: 14px; font-weight: 700;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.18);
}
.artist-banner-edit-empty:hover { background: #FFD54F; }

/* Action row 아래 — 미니 아바타 + SNS + 팔로우/DM */
.artist-action-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.artist-mini-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(120,90,40,0.30);
  box-shadow: 1px 2px 0 rgba(80,60,20,0.14);
}
.artist-action-sns { display: inline-flex; gap: 6px; align-items: center; }

/* 디스코그래피에서 점프해온 프로젝트 박스 — 1.8초 짧게 강조 */
.project-box.project-flash {
  animation: project-flash-pulse 1.8s ease-out;
}
@keyframes project-flash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,80,0); }
  20%  { box-shadow: 0 0 0 4px rgba(255,200,80,0.55), 0 0 32px rgba(255,200,80,0.45); }
  60%  { box-shadow: 0 0 0 2px rgba(255,200,80,0.3), 0 0 20px rgba(255,200,80,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(255,200,80,0); }
}

/* === 페이지 상단 뒤로가기 (아티스트/앨범 등 서브 페이지) === */
.page-back-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.page-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s;
}
.page-back-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  transform: translateX(-2px);
}
.page-back-btn:active { transform: translateX(-3px) scale(0.97); }
.page-back-btn i { font-size: 16px; }

.page-back-alt {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 18px;
  transition: color .15s, background .15s;
}
.page-back-alt:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* === 디스코그래피 스트립 (앨범/프로젝트/싱글) — Discogs/Bandcamp 풍 === */
.discography-section {
  margin: 6px 0 22px;
  padding: 14px 0 6px;
}
.discog-row {
  margin-bottom: 14px;
}
.discog-row:last-child { margin-bottom: 0; }
.discog-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.discog-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.75;
  letter-spacing: 0.3px;
}
.discog-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  /* hide scrollbar but keep scroll */
  scrollbar-width: thin;
}
.discog-strip::-webkit-scrollbar { height: 6px; }
.discog-strip::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 3px; }

.discog-item {
  flex: 0 0 auto;
  width: 92px;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.discog-item:hover {
  transform: translateY(-3px) scale(1.04);
}
.discog-item img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  display: block;
  background: rgba(128,128,128,0.15);
}
.discog-item-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 5px;
  line-height: 1.25;
  /* 2-line ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .discog-item { width: 80px; }
  .discog-item img { width: 80px; height: 80px; }
  .discog-item-title { font-size: 10px; }
  .discog-label { font-size: 14px; }
}

@media (max-width: 720px) {
  .artist-banner {
    aspect-ratio: 16/9;
    padding: 16px 18px;
    min-height: 160px;
  }
  .artist-banner-name { font-size: 44px; }
  .artist-banner-stats { font-size: 15px; }
}
@media (max-width: 480px) {
  .artist-banner-name { font-size: 36px; letter-spacing: -1px; }
}

/* 옛 strip-hero 슬롯 — 더 안 쓰지만 안전망으로 숨김 */
.artist-strip-hero { display: none; }

/* === Album page — cover 편집 오버레이 === */
.album-hero-cover-wrap {
  position: relative;
  display: inline-block;
}
.album-hero-cover-edit {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none; border-radius: 50%;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.album-hero-cover-wrap:hover .album-hero-cover-edit { opacity: 1; }
.album-hero-cover-edit:hover { background: rgba(0,0,0,0.85); }
.album-hero-cover-empty {
  width: 240px; height: 240px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,251,230,0.6);
  border: 2px dashed rgba(120,90,40,0.40);
  border-radius: 6px;
  color: #4a3820; font-family: var(--font-hand); font-size: 16px;
  cursor: pointer;
}
.album-hero-cover-empty:hover { background: rgba(255,251,230,0.9); border-color: rgba(120,90,40,0.7); }
.album-hero-cover-empty i { font-size: 36px; }

/* === Album hero — 좋아요 / 팔로우 버튼 (페이퍼 톤 통일) === */
.album-hero-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 14px;
}
.hero-like-btn, .hero-follow-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: #FFF6CE;
  color: #2a1f08;
  border: 1.5px solid rgba(120,90,40,0.35);
  border-radius: 999px;
  font-family: var(--font-hand);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.18);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.hero-like-btn:hover, .hero-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 3px 0 rgba(80,60,20,0.24);
}
.hero-like-btn.is-liked {
  background: #FFE0E6;
  color: #C2185B;
  border-color: #E91E63;
}
.hero-like-btn.is-liked i { color: #E91E63; }
.hero-like-btn i { font-size: 18px; line-height: 1; }
.hero-like-count { font-size: 14px; opacity: 0.85; }
.hero-follow-btn { background: #FFE066; }
.hero-follow-btn.is-following {
  background: #C8E6C9; color: #1B5E20; border-color: #66BB6A;
}

/* === Author 라벨 (이름 변경 불가 표시 — impersonation 차단) === */
.comment-author-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(80,60,20,0.22);
  border-radius: 12px;
  font-family: var(--font-hand);
  font-size: 14px;
  color: #2a1f08;
  cursor: default;
  user-select: none;
  width: fit-content;
}
.comment-author-tag.is-anonymous {
  background: rgba(255,255,255,0.30);
  color: rgba(60,40,10,0.65);
  font-style: italic;
}

/* === Album comment section — vintage 페이퍼 톤 (앨범 보라 bg에서 구분되게) === */
.album-comment-section { padding: 8px 0 4px; }
.album-comment-section .section-title {
  font-family: var(--font-hand);
  font-size: 22px;
  color: #2a1f08;
  margin-bottom: 12px;
}
.album-comment-section .artist-comment-compose {
  background: #FFF6CE;
  border: 1.5px solid rgba(120,90,40,0.25);
  border-radius: 4px;
  padding: 18px;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.14), 3px 6px 14px rgba(60,40,10,0.16);
  margin-bottom: 18px;
}
.album-comment-section .artist-comment-name,
.album-comment-section .artist-comment-textarea {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(80,60,20,0.22);
  color: #2a1f08;
  font-family: inherit;
}
.album-comment-section .artist-comment-name:focus,
.album-comment-section .artist-comment-textarea:focus {
  border-color: rgba(180,130,0,0.6);
  background: #fff;
}
.album-comment-section .artist-comment-submit {
  background: #FFE066;
  color: #1a1208;
  border: 1.5px solid rgba(140,90,0,0.45);
  border-radius: 4px;
  padding: 8px 20px;
  font-family: var(--font-hand);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.20);
}
.album-comment-section .artist-comment-submit:hover {
  background: #FFD54F;
  transform: translateY(-2px);
  box-shadow: 2px 3px 0 rgba(80,60,20,0.25);
}
.album-comment-section .artist-comment-list { gap: 14px; }
.album-comment-section .artist-comment-item {
  background: #FFFBE6;
  border: 1.5px solid rgba(120,90,40,0.20);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 1px 2px 0 rgba(80,60,20,0.10), 2px 4px 10px rgba(60,40,10,0.12);
  transform: rotate(-0.4deg);
}
.album-comment-section .artist-comment-item:nth-child(even) {
  transform: rotate(0.5deg);
  background: #FAEBC8;
}
.album-comment-section .artist-comment-item:nth-child(3n) {
  transform: rotate(-0.7deg);
  background: #F8E0BB;
}
.album-comment-section .artist-comment-author {
  color: #2a1f08;
  font-family: var(--font-hand);
  font-size: 16px;
  font-weight: 700;
}
.album-comment-section .artist-comment-date { color: rgba(60,40,10,0.55); }
.album-comment-section .artist-comment-text {
  color: #1a1208;
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1.5;
}
.album-comment-section .artist-comment-del { color: rgba(60,40,10,0.6); }
.album-comment-section .artist-comment-del:hover { color: #c0392b; }
.album-comment-section .artist-comment-empty {
  background: rgba(255,251,230,0.7) !important;
  border: 1.5px dashed rgba(120,90,40,0.35);
  border-radius: 4px;
  padding: 22px 18px !important;
  text-align: center;
  color: #4a3820 !important;
  font-family: var(--font-hand);
  font-size: 16px !important;
}

/* Player title/artist clickable affordance */
#global-player .player-title.is-clickable,
#global-player .player-artist.is-clickable {
  cursor: pointer;
  transition: color 0.2s, text-decoration-color 0.2s;
}
#global-player .player-title.is-clickable:hover,
#global-player .player-artist.is-clickable:hover {
  color: var(--brand-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}