/* ============================================================
   LUV SOOP — 디자인 시스템 (design-system.css)
   ------------------------------------------------------------
   ★ LUV 전체 공통 디자인 토큰 + 컴포넌트.
     색·폰트·그림자를 바꾸려면 여기 :root 만 고치면 전부 반영됨.
     방송센터·댄스 등 모든 메뉴가 이 파일을 공유함.
   ============================================================ */

:root{
  /* ── 컬러 토큰 ─────────────────────────────────── */
  --luv-pink:        #ff8fb1;
  --luv-pink-deep:   #f26d97;
  --luv-pink-soft:   #ffd9e4;
  --luv-pink-bg:     #fff2f6;
  --luv-cream:       #fffaf3;
  --luv-paper:       #fff7ef;
  --luv-gold:        #e6b964;
  --luv-gold-soft:   #fdeecb;
  --luv-mint:        #8fd9c3;
  --luv-mint-soft:   #d8f3ec;
  --luv-sky:         #9ecbf0;
  --luv-ink:         #5b4a52;   /* 기본 글자 */
  --luv-ink-soft:    #9a8a92;   /* 흐린 글자 */
  --luv-line:        #f0e1e7;   /* 연한 선 */

  /* 상태색 (방송/휴방/특별) */
  --luv-on-bg:   #d8f3ec;  --luv-on-fg:   #2f8f70;
  --luv-rest-bg: #f0eef0;  --luv-rest-fg: #9a8a92;
  --luv-sp-bg:   #fdeecb;  --luv-sp-fg:   #b07d11;

  /* ── 타이포 토큰 ───────────────────────────────── */
  --luv-font:       'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --luv-font-round: 'Jua',var(--luv-font);     /* 동글 제목 */
  --luv-font-hand:  'Gaegu',var(--luv-font);   /* 손글씨 */

  /* ── 모양 토큰 ─────────────────────────────────── */
  --luv-radius-sm: 12px;
  --luv-radius:    18px;
  --luv-radius-lg: 24px;
  --luv-radius-pill: 999px;

  /* ── 그림자 토큰 ───────────────────────────────── */
  --luv-shadow-sm: 0 4px 12px rgba(214,138,164,.14);
  --luv-shadow:    0 8px 24px rgba(214,138,164,.18);
  --luv-shadow-lg: 0 14px 36px rgba(214,138,164,.26);

  /* ── 간격 토큰 ─────────────────────────────────── */
  --luv-gap-sm: 8px;
  --luv-gap:    14px;
  --luv-gap-lg: 22px;
}

/* ============================================================
   기본 바탕
   ============================================================ */
.luv-bg{
  background:
    radial-gradient(circle at 12% 16%, #fff0f5 0, transparent 38%),
    radial-gradient(circle at 88% 12%, #eafaf4 0, transparent 36%),
    radial-gradient(circle at 80% 90%, #fff6e6 0, transparent 42%),
    var(--luv-cream);
}
/* 종이 질감 (은은한 점) */
.luv-paper-texture{
  background-color:var(--luv-paper);
  background-image:radial-gradient(rgba(214,138,164,.06) 1px, transparent 1px);
  background-size:14px 14px;
}

/* ============================================================
   버튼
   ============================================================ */
.luv-btn{
  font-family:var(--luv-font); font-size:14px; color:var(--luv-ink);
  background:#fff; border:1.5px solid var(--luv-line); border-radius:var(--luv-radius-sm);
  padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.luv-btn:hover{ transform:translateY(-2px); box-shadow:var(--luv-shadow-sm); border-color:var(--luv-pink-soft); }
.luv-btn:active{ transform:translateY(0) scale(.98); }
.luv-btn--primary{ background:var(--luv-pink); border-color:var(--luv-pink); color:#fff; }
.luv-btn--primary:hover{ background:var(--luv-pink-deep); border-color:var(--luv-pink-deep); }
.luv-btn--ghost{ background:transparent; }

/* ============================================================
   카드 / 패널
   ============================================================ */
.luv-card{
  background:#fff; border:1.5px solid var(--luv-line); border-radius:var(--luv-radius);
  box-shadow:var(--luv-shadow-sm); padding:16px 18px;
}
.luv-card--lift{ transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; }
.luv-card--lift:hover{ transform:translateY(-3px); box-shadow:var(--luv-shadow); }

.luv-panel{
  background:rgba(255,255,255,.78); backdrop-filter:blur(6px);
  border:1px solid #fff; border-radius:var(--luv-radius-lg);
  box-shadow:var(--luv-shadow); padding:20px;
}

/* ============================================================
   배지 (방송 상태)
   ============================================================ */
.luv-badge{
  font-size:11px; font-weight:500; padding:3px 10px; border-radius:var(--luv-radius-pill);
  display:inline-flex; align-items:center; gap:4px;
}
.luv-badge--on{ background:var(--luv-on-bg); color:var(--luv-on-fg); }
.luv-badge--rest{ background:var(--luv-rest-bg); color:var(--luv-rest-fg); }
.luv-badge--special{ background:var(--luv-sp-bg); color:var(--luv-sp-fg); }

/* ============================================================
   칩 (필터)
   ============================================================ */
.luv-chip{
  font-size:13px; padding:6px 13px; border-radius:var(--luv-radius-pill); cursor:pointer;
  background:#fff; border:1.5px solid var(--luv-line); color:var(--luv-ink);
  display:inline-flex; align-items:center; gap:5px; transition:all .14s ease;
}
.luv-chip:hover{ border-color:var(--luv-pink-soft); }
.luv-chip--on{ background:var(--luv-pink); border-color:var(--luv-pink); color:#fff; box-shadow:var(--luv-shadow-sm); }

/* ============================================================
   제목 글자
   ============================================================ */
.luv-title{ font-family:var(--luv-font-round); font-weight:400; color:var(--luv-ink); }
.luv-hand{ font-family:var(--luv-font-hand); }

/* ============================================================
   데코레이션 (스티커 다이어리 요소)
   ============================================================ */
/* 스프링 노트 바인딩 (상단 링) */
.luv-spring{ display:flex; gap:18px; justify-content:center; padding:6px 0; }
.luv-spring i{ width:14px; height:14px; border-radius:var(--luv-radius-pill);
  background:var(--luv-pink-soft); border:2px solid #fff; box-shadow:inset 0 -2px 3px rgba(214,138,164,.3); }

/* 마스킹테이프 */
.luv-tape{ position:absolute; width:46px; height:18px; background:rgba(255,143,177,.32);
  transform:rotate(-6deg); border-radius:2px; }
.luv-tape--mint{ background:rgba(143,217,195,.34); }
.luv-tape--gold{ background:rgba(230,185,100,.32); }

/* 손그림 하트 / 별 (작은 포인트) */
.luv-heart-mini{ color:var(--luv-pink); }
.luv-star-mini{ color:var(--luv-gold); }

/* 리본 코너 */
.luv-ribbon{ position:absolute; top:-8px; right:14px; font-size:18px; }

/* ============================================================
   유틸
   ============================================================ */
.luv-lift{ transition:transform .15s ease, box-shadow .15s ease; }
.luv-lift:hover{ transform:translateY(-3px); box-shadow:var(--luv-shadow); }
.luv-shadow-sm{ box-shadow:var(--luv-shadow-sm); }
.luv-shadow{ box-shadow:var(--luv-shadow); }
.luv-shadow-lg{ box-shadow:var(--luv-shadow-lg); }