/* ViFi web community (read-only): "최근 분위기" Stories, reviews, DJ chart and badges.
   Shared by the app detail dialog (/), /venue and /dj. Colors come from the ViFi tokens. */
.vifi-community {
  min-width: 0;
  margin: var(--vifi-space-xxl) 0;
  padding: var(--vifi-space-lg) var(--vifi-space-lg);
  border: 1px solid var(--vifi-divider);
  border-radius: var(--vifi-radius-lg);
  background: var(--vifi-surface);
  color: var(--vifi-text);
  line-height: 1.55;
}
.vifi-community h2,
.vifi-community h3 { margin: 0; font-size: var(--vifi-font-size-title); letter-spacing: -0.01em; }
.vifi-community h4 { margin: var(--vifi-space-lg) 0 var(--vifi-space-xxs); font-size: var(--vifi-font-size-label); color: var(--vifi-warning); }
.vc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vifi-space-xxs) var(--vifi-space-sm); margin-bottom: var(--vifi-space-sm); }
.vc-sub { margin: 0; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }
.vc-note { margin: var(--vifi-space-sm) 0 0; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); line-height: 1.6; }
.vc-empty, .vc-closed, .vc-few { margin: var(--vifi-space-xxs) 0 0; color: var(--vifi-text-secondary); font-size: var(--vifi-font-size-label); }
.vc-closed strong, .vc-few strong { color: var(--vifi-text); }
.vc-closed span, .vc-few span { color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }

/* Story rings: a horizontal strip that scrolls inside itself, never the page. */
.community-vibe-holder { min-width: 0; }
.vc-rings { min-width: 0; display: flex; gap: var(--vifi-space-sm); margin: 0; padding: var(--vifi-space-xxs) var(--vifi-space-xxs) var(--vifi-space-xs); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; max-width: 100%; }
.vc-ring-item { flex: none; }
.vc-ring { display: grid; justify-items: center; gap: var(--vifi-space-xxs); width: 84px; min-height: 44px; padding: var(--vifi-space-xxs) var(--vifi-space-xxs); border: 0; border-radius: var(--vifi-radius-lg); background: none; color: inherit; font: inherit; cursor: pointer; }
.vc-ring:hover .vc-ring-frame { outline: 2px solid var(--vifi-focus); }
.vc-ring:focus-visible { outline: 3px solid var(--vifi-focus); outline-offset: 2px; }
.vc-ring-frame { display: grid; place-items: center; width: 68px; height: 68px; padding: var(--vifi-space-xxs); border-radius: var(--vifi-radius-pill); background: conic-gradient(var(--vifi-pink), var(--vifi-warning), var(--vifi-pink)); overflow: hidden; }
.vc-ring.is-promo .vc-ring-frame { background: var(--vifi-warning); }
.vc-ring-frame.is-small { width: 44px; height: 44px; padding: var(--vifi-space-xxs); flex: none; }
.vc-thumb-media,
.vc-thumb-video { width: 100%; height: 100%; border-radius: var(--vifi-radius-pill); border: 2px solid var(--vifi-surface); object-fit: cover; background: var(--vifi-surface-raised); }
.vc-thumb-video { display: grid; place-items: center; align-content: center; gap: 0; color: var(--vifi-text); font-size: var(--vifi-font-size-caption); line-height: 1.2; text-align: center; background: linear-gradient(140deg, var(--vifi-tint-community-video-start), var(--vifi-tint-community-video-end)); }
.vc-play { font-size: var(--vifi-font-size-label); }
.vc-ring-frame.is-small .vc-thumb-video span:last-child { display: none; }
.vc-ring-handle { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--vifi-font-size-caption); font-weight: var(--vifi-font-weight-semibold); }
.vc-ring-left { color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); white-space: nowrap; }
.vc-app { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vifi-space-xxs) var(--vifi-space-xs); margin: var(--vifi-space-md) 0 0; }
.vc-app-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vifi-space-md); border: 1px solid var(--vifi-tint-pink-line); border-radius: var(--vifi-radius-pill); color: var(--vifi-focus); font-size: var(--vifi-font-size-label); text-decoration: none; }
.vc-app-link:hover { background: color-mix(in srgb,var(--vifi-pink) 8%,transparent); }
.vc-app .vc-note { margin: 0; }

/* Badges carry text and color together. */
.vc-badges { display: flex; flex-wrap: wrap; gap: var(--vifi-space-xs); margin: var(--vifi-space-xxs) 0 0; }
.vc-badge { display: inline-flex; align-items: center; gap: var(--vifi-space-xxs); padding: var(--vifi-space-xxs) var(--vifi-space-xs); border-radius: var(--vifi-radius-pill); font-size: var(--vifi-font-size-caption); font-weight: var(--vifi-font-weight-bold); line-height: 1.6; }
.vc-verified { color: var(--vifi-tint-community-verified-text); background: var(--vifi-truth-verified); }
.vc-promo { color: var(--vifi-tint-community-promo-text); background: var(--vifi-warning); }

/* Reviews */
.vc-averages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vifi-space-xs); margin: 0; }
.vc-average { min-width: 0; padding: var(--vifi-space-sm); border-radius: var(--vifi-radius-lg); background: var(--vifi-surface-raised); }
.vc-average dt { color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }
.vc-average dd { margin: var(--vifi-space-xxs) 0 0; display: grid; gap: var(--vifi-space-xs); }
.vc-num { font-size: var(--vifi-font-size-title); font-weight: var(--vifi-font-weight-bold); font-variant-numeric: tabular-nums; }
.vc-bar { display: block; height: 4px; border-radius: var(--vifi-radius-sm); background: var(--vifi-divider); overflow: hidden; }
.vc-bar span { display: block; height: 100%; background: var(--vifi-pink); }
.vc-review-list { display: grid; gap: var(--vifi-space-sm); margin: var(--vifi-space-md) 0 0; padding: 0; list-style: none; }
.vc-review { min-width: 0; padding: var(--vifi-space-sm) var(--vifi-space-md); border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-lg); background: var(--vifi-surface-raised); }
.vc-review p { margin: 0; }
.vc-scores { display: flex; flex-wrap: wrap; gap: var(--vifi-space-xxs) var(--vifi-space-sm); font-size: var(--vifi-font-size-label); color: var(--vifi-text-secondary); }
.vc-scores b { color: var(--vifi-text); font-variant-numeric: tabular-nums; }
.vc-review-line { margin-top: var(--vifi-space-xs) !important; font-size: var(--vifi-font-size-body); overflow-wrap: anywhere; }
.vc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--vifi-space-sm); margin-top: var(--vifi-space-xxs) !important; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }
.vc-takedown { display: inline-flex; align-items: center; min-height: 44px; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); text-decoration: underline; text-underline-offset: 3px; }
.vc-takedown:hover { color: var(--vifi-focus); }
.vc-reply { margin-top: var(--vifi-space-xs); padding: var(--vifi-space-sm) var(--vifi-space-sm); border-left: 3px solid var(--vifi-tint-pink-line); border-radius: 0 var(--vifi-radius-md) var(--vifi-radius-md) 0; background: var(--vifi-surface); font-size: var(--vifi-font-size-label); }
.vc-reply-label { color: var(--vifi-focus); font-size: var(--vifi-font-size-caption); font-weight: var(--vifi-font-weight-bold); }

/* Story viewer: a modal dialog. */
.vc-viewer { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-xl); background: var(--vifi-tint-community-viewer); color: var(--vifi-text); overflow: auto; }
.vc-viewer::backdrop { background: color-mix(in srgb,var(--vifi-black) 82%,transparent); }
.vc-viewer-inner { display: grid; gap: var(--vifi-space-sm); padding: var(--vifi-space-sm) var(--vifi-space-md) var(--vifi-space-md); }
.vc-progress { display: flex; gap: var(--vifi-space-xxs); margin: 0; padding: 0; list-style: none; }
.vc-progress li { flex: 1; height: 3px; border-radius: var(--vifi-radius-sm); background: color-mix(in srgb,var(--vifi-white) 22%,transparent); }
.vc-progress li.is-done, .vc-progress li.is-current { background: var(--vifi-text); }
.vc-viewer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vifi-space-sm); min-width: 0; }
.vc-viewer-id { min-width: 0; }
.vc-viewer-head h2 { margin: 0; font-size: var(--vifi-font-size-body); overflow-wrap: anywhere; }
.vc-close, .vc-control { flex: none; min-height: 44px; min-width: 44px; padding: var(--vifi-space-xs) var(--vifi-space-md); border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-pill); background: transparent; color: var(--vifi-text); font: inherit; font-size: var(--vifi-font-size-label); cursor: pointer; }
.vc-control:disabled { opacity: 0.45; cursor: default; }
.vc-close:focus-visible, .vc-control:focus-visible, .vc-takedown:focus-visible, .vc-card-vibe:focus-visible, .vc-app-link:focus-visible { outline: 3px solid var(--vifi-focus); outline-offset: 2px; }
.vc-stage { display: grid; place-items: center; min-height: 240px; border-radius: var(--vifi-radius-lg); background: var(--vifi-black); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vc-media { display: block; width: 100%; max-height: min(64dvh, 640px); object-fit: contain; }
.vc-viewer-meta { margin: 0; color: var(--vifi-text-secondary); font-size: var(--vifi-font-size-label); }
.vc-caption { margin: 0; font-size: var(--vifi-font-size-body); overflow-wrap: anywhere; }
.vc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vifi-space-xs); }
.vc-controls .vc-takedown { margin-left: auto; }
.vc-position { margin: 0; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }

/* Map card thumbnail */
.vc-card-vibe { display: flex; align-items: center; gap: var(--vifi-space-sm); width: 100%; min-height: 52px; margin: 0 0 var(--vifi-space-sm); padding: var(--vifi-space-xxs) var(--vifi-space-xs) var(--vifi-space-xxs) var(--vifi-space-xxs); border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-lg); background: var(--vifi-surface-raised); color: var(--vifi-text); font: inherit; text-align: left; cursor: pointer; }
.vc-card-vibe:hover { border-color: var(--vifi-tint-pink-line); }
.vc-card-vibe-text { display: grid; min-width: 0; font-size: var(--vifi-font-size-caption); line-height: 1.4; }
.vc-card-vibe-text strong { font-size: var(--vifi-font-size-label); }
.vc-card-vibe-text span { color: var(--vifi-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Weekly chart and badge */
.vc-chart.is-compact { padding: var(--vifi-space-md) var(--vifi-space-md); }
.vc-chart-list { display: grid; gap: var(--vifi-space-xxs); margin: var(--vifi-space-sm) 0 0; padding: 0; list-style: none; }
.vc-chart-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--vifi-space-xxs) var(--vifi-space-sm); min-height: 44px; border-bottom: 1px solid var(--vifi-divider); }
.vc-rank { color: var(--vifi-focus); font-weight: var(--vifi-font-weight-bold); font-variant-numeric: tabular-nums; }
.vc-chart-name { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vifi-text); font-weight: var(--vifi-font-weight-semibold); }
.vc-points { font-variant-numeric: tabular-nums; color: var(--vifi-text-secondary); font-size: var(--vifi-font-size-label); }
.vc-low { grid-column: 2 / -1; margin-top: calc(-1 * var(--vifi-space-sm)); padding-bottom: var(--vifi-space-xs); color: var(--vifi-text-muted); font-size: var(--vifi-font-size-caption); }
.vc-dj-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--vifi-space-xxs) var(--vifi-space-xs); margin: var(--vifi-space-xs) 0 var(--vifi-space-sm); padding: var(--vifi-space-xs) var(--vifi-space-sm); border: 1px solid var(--vifi-tint-pink-line); border-radius: var(--vifi-radius-pill); color: var(--vifi-text); background: color-mix(in srgb,var(--vifi-pink) 10%,transparent); font-size: var(--vifi-font-size-label); }
.vc-dj-badge-mark { color: var(--vifi-pink); }
.vc-dj-badge span:last-child { color: var(--vifi-text-secondary); }

@media (max-width:767px) {
  .vifi-community { margin: var(--vifi-space-lg) 0; padding: var(--vifi-space-md); }
  .vc-averages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-viewer { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .vc-viewer-inner { padding: max(var(--vifi-space-sm), env(safe-area-inset-top)) var(--vifi-space-sm) max(var(--vifi-space-sm), env(safe-area-inset-bottom)); }
  .vc-media { max-height: 58dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-ring-frame, .vc-card-vibe { transition: none; }
}

/* /takedown form (legal.css page) */
.vc-next { margin: var(--vifi-space-xxl) 0 var(--vifi-space-xs); padding: var(--vifi-space-lg) var(--vifi-space-lg); border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-lg); background: var(--vifi-surface); }
.vc-next h2 { font-size: var(--vifi-font-size-title); }
.vc-next ol { padding-left: var(--vifi-space-xl); }
.vc-form { display: grid; gap: var(--vifi-space-lg); margin: var(--vifi-space-xxl) 0; max-width: 640px; }
.vc-target { margin: 0; color: var(--vifi-text-secondary); overflow-wrap: anywhere; }
.vc-fieldset { margin: 0; padding: var(--vifi-space-md) var(--vifi-space-md); border: 1px solid var(--vifi-divider); border-radius: var(--vifi-radius-lg); min-width: 0; }
.vc-fieldset legend { padding: 0 var(--vifi-space-xs); font-weight: var(--vifi-font-weight-bold); }
.vc-choice { display: flex; align-items: center; gap: var(--vifi-space-sm); min-height: 44px; cursor: pointer; }
.vc-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--vifi-pink); flex: none; }
.vc-field { display: grid; gap: var(--vifi-space-xs); min-width: 0; }
.vc-field label { font-weight: var(--vifi-font-weight-bold); }
.vc-hint { margin: 0; color: var(--vifi-text-muted); font-size: var(--vifi-font-size-label); }
.vc-field textarea, .vc-field input { width: 100%; min-height: 44px; padding: var(--vifi-space-sm) var(--vifi-space-sm); border: 1px solid var(--vifi-border); border-radius: var(--vifi-radius-lg); background: var(--vifi-surface); color: var(--vifi-text); font: inherit; }
.vc-field textarea { resize: vertical; }
.vc-field textarea:focus-visible, .vc-field input:focus-visible, .vc-choice input:focus-visible, .vc-submit:focus-visible { outline: 3px solid var(--vifi-focus); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--vifi-error) !important; }
.vc-field-error, .vc-form-errors p { margin: 0; color: var(--vifi-error); font-size: var(--vifi-font-size-label); font-weight: var(--vifi-font-weight-bold); }
.vc-form-errors { padding: var(--vifi-space-sm) var(--vifi-space-md); border: 1px solid var(--vifi-error); border-radius: var(--vifi-radius-lg); }
.vc-submit { justify-self: start; min-height: 48px; padding: var(--vifi-space-sm) var(--vifi-space-lg); border: 0; border-radius: var(--vifi-radius-pill); background: var(--vifi-pink); color: var(--vifi-action-label); font: inherit; font-weight: var(--vifi-font-weight-bold); cursor: pointer; }
.vc-submit:disabled { opacity: 0.6; cursor: progress; }
.vc-form-status { margin: 0; color: var(--vifi-text-secondary); }
.vc-received { margin: var(--vifi-space-xxl) 0; padding: var(--vifi-space-lg) var(--vifi-space-lg); border: 1px solid var(--vifi-truth-verified); border-radius: var(--vifi-radius-lg); background: color-mix(in srgb,var(--vifi-truth-verified) 8%,transparent); }
.vc-received h2 { margin-top: 0; }
.vc-form input, .vc-form textarea, .vc-form-errors { scroll-margin-top: 96px; }

/* RC8.7: desktop type inventory; mobile declarations above remain canonical. */
@media (min-width:1024px){
 .vifi-community h4,
 .vc-sub,
 .vc-note,
 .vc-empty,
 .vc-few,
 .vc-few span,
 .vc-thumb-video,
 .vc-ring-handle,
 .vc-ring-left,
 .vc-average dt,
 .vc-scores,
 .vc-meta,
 .vc-reply-label,
 .vc-viewer-meta,
 .vc-position,
 .vc-card-vibe-text,
 .vc-card-vibe-text strong,
 .vc-points,
 .vc-low,
 .vc-hint,
 .vc-field-error,
 .vc-form-errors p{font-size:var(--vifi-font-size-body);line-height:1.55}
 .vc-closed,
 .vc-closed span,
 .vc-app-link,
 .vc-takedown,
 .vc-close,
 .vc-control{font-size:var(--vifi-font-size-body);line-height:1.55}
 .vc-play,
 .vc-badge,
 .vc-dj-badge{font-size:var(--vifi-font-size-label);line-height:1.55}
 .vc-reply{font-size:var(--vifi-font-size-body);line-height:1.55}
}
@media (min-width:1024px){
 .vifi-community,.vc-viewer{font-size:var(--vifi-font-size-body);line-height:1.55}
 .vc-review-line,.vc-reply,.vc-caption{font-size:var(--vifi-font-size-body);line-height:1.55;max-width:75ch}
 .vc-badge,.vc-dj-badge{font-size:var(--vifi-font-size-label)}
 .vc-ring{width:104px}.vc-ring-handle{max-width:100px}.vc-ring-left{white-space:normal}
 .vc-viewer-head h2{font-size:var(--vifi-font-size-title)}
}