/**
 * Block Skin CSS: hyetaek-live/rolling — 통합 LIVE 띠 (위로 올라가는 롤링)
 *
 * 자체 완결 CSS (.hy-roll 아래로만 스코프). 색은 코어 토큰 + 폴백.
 * 반응형 기준: 768px 이하 = 모바일 (한 번에 1건).
 */
.hy-roll {
    --hy-roll-accent: var(--hy-accent, #C4001A);
    --hy-roll-ink: var(--foreground, #111111);
    --hy-roll-sub: var(--muted-foreground, #555555);
    --hy-roll-faint: #8A8A8A;
    --hy-roll-line: var(--border, #E5E5E5);
    --hy-roll-bg: var(--background, #FFFFFF);
    --hy-roll-h: 52px;
    min-width: 0;
}

.hy-roll__bar {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    height: var(--hy-roll-h);
    padding: 0 10px 0 8px;
    border: 1px solid var(--hy-roll-line);
    border-radius: 999px;
    background: var(--hy-roll-bg);
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.35);
}

/* LIVE 표시 — 빨간 알약 + 퍼지는 점 */
.hy-roll__label {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    background: var(--hy-roll-accent);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.hy-roll__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
}
.hy-roll__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #FFFFFF;
    animation: hy-roll-pulse 1.8s ease-out infinite;
}

/* 롤링 창 — 활성 칸만 보인다 (PC 2칸, 모바일 1칸) */
.hy-roll__list {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.hy-roll__list:focus-visible {
    outline: 2px solid var(--hy-roll-accent);
    outline-offset: -2px;
    border-radius: 999px;
}

.hy-roll__item {
    display: none;
    min-width: 0;
    align-self: center;
}
.hy-roll__item.is-active {
    display: block;
}
/* PC 두 칸 사이 구분선 */
.hy-roll__item.is-active ~ .hy-roll__item.is-active {
    padding-left: 16px;
    border-left: 1px solid var(--hy-roll-line);
}
.hy-roll__item.is-entering {
    animation: hy-roll-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hy-roll__item.is-entering + .hy-roll__item.is-entering {
    animation-delay: 0.08s;
}

.hy-roll__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--hy-roll-sub);
    text-decoration: none;
    white-space: nowrap;
}
a.hy-roll__chip:hover .hy-roll__what {
    color: var(--hy-roll-accent);
    text-decoration: underline;
}

.hy-roll__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}
.hy-roll__badge--open    { background: #FDECEE; color: #B4001A; }
.hy-roll__badge--rental  { background: #E7F6EF; color: #067647; }
.hy-roll__badge--call    { background: #EEF2F6; color: #364152; }
.hy-roll__badge--order   { background: #EAF2FF; color: #1849A9; }
.hy-roll__badge--popular { background: #FFF4E0; color: #B54708; }

.hy-roll__who {
    flex: none;
    font-weight: 600;
    color: var(--hy-roll-ink);
}
.hy-roll__what {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    color: var(--hy-roll-ink);
}
.hy-roll__when {
    flex: none;
    font-size: 12px;
    color: var(--hy-roll-faint);
}

/* 모바일: 한 칸 */
@media (max-width: 768px) {
    .hy-roll { --hy-roll-h: 46px; }
    .hy-roll__bar { gap: 10px; padding: 0 12px 0 6px; }
    .hy-roll__label { height: 30px; padding: 0 11px 0 10px; font-size: 11px; }
    .hy-roll__list { grid-template-columns: minmax(0, 1fr); }
    /* 서버는 PC 기준 2칸을 켜 두므로, JS 전에도 모바일은 첫 칸만 */
    .hy-roll__item.is-active ~ .hy-roll__item.is-active { display: none; }
    .hy-roll__chip { gap: 6px; font-size: 13px; }
    .hy-roll__badge { height: 20px; padding: 0 6px; font-size: 11px; }
}

/* 아주 좁은 화면: 이름보다 상품명을 남긴다 */
@media (max-width: 480px) {
    .hy-roll__who { display: none; }
}

@keyframes hy-roll-up {
    from { opacity: 0; transform: translateY(70%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hy-roll-pulse {
    from { transform: scale(1); opacity: 0.7; }
    to   { transform: scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hy-roll__item.is-entering { animation: none; }
    .hy-roll__dot::after { animation: none; display: none; }
}