.beer-handle {
    background: #ffffff;
    border: 1px solid #000000;
    margin-left: -3px;
}
.beer-reveal {
    /*border-right: 6px solid #eee;*/
    border-width: 0 6px 0 0;
    /*border-right-width: 6px;*/
    border-style: solid;
    border-image: linear-gradient(to bottom, red, rgba(0, 0, 0, 0)) 1 100%;
}
.beer-reveal > img {
    filter: brightness(.97); 
}
.beer-reveal[data-beer-label]:after,
.beer-slider[data-beer-label]:after {
    /*width: 88px;*/
    font-size: 24px;
    font-weight: 500;
    top: 45%;
    background-color: #ff0000;
    color: #ffffff;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);
    -moz-box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);
    box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);

}
.beer-reveal[data-beer-label]:after {
    left: 0;
    text-align: center;
}
.beer-slider[data-beer-label]:after {
    right: 0;
    text-align: center;
    /*padding-left: 15px;*/
    /*padding-right: 15px;*/
}
img.after-image {
    filter: brightness(.97) /*invert(0.96)*/ sepia(.10) saturate(1.1);
    /*filter: invert(1.2);*/
    /*-webkit-filter: invert(1.2);*/
    /*filter: grayscale(0.4);*/
}
.carousel-inner {
    border-radius: 4px;
    /*margin-top: -40px;*/
    -webkit-box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
    box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
}
.carousel-thumbnails {
    
    /*border-radius: 25px;*/
}
/* Carousel indicator outside */
.carousel-item {
    /*height: 450px;*/
}
.carousel-indicators li:first-child {
    margin-left: 0px;
}
.carousel-indicators li:last-child {
    margin-right: 0px;
}
.carousel-indicators li {
    width: 150px;
    height: 100%;
    background-color: transparent;
    text-indent: 0;
    display: inline-block;
}
.carousel-indicators li img {
    border-radius: 0px;
    filter: grayscale(1.0);
    /*border: 1px solid #777777;*/
    border-radius: 4px;
}
.carousel-indicators li.active img {
    filter: grayscale(0.4);
}
.carousel-indicators {
    margin: 0;
    /*bottom: -80px;*/
    position: relative;
    /*display: inline-block;*/
}




/* Vertical Loop */
.trial {
    margin: 0px auto;
    /*max-width: 480px;*/
    /*width: 100%;*/
    height: 90px;
    overflow: hidden;
}

.trial ul {
    width: 100%
}

.trial ul li {
	list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30px
}

.trial a {
    text-decoration: none;
    color: #ffffff;
}


.rating-star-wrapper {
    align-items: center;
    color: #ffc300;
    display: inline-flex;
    vertical-align: middle;
}
.rating-star-line {
    display: flex;
}
.rating-star-fill {
    display: flex;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.rating-star {
    fill: currentColor;
    flex-shrink: 0;
}


/* 실시간 피드 스타일 */
/* Live Feed Styles */
.live-feed-wrapper {
    background: linear-gradient(to right, #0f172a, #1e293b);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 3rem;
    overflow: hidden;
    /*width: 100vw;*/
    /*margin-left: calc(-50vw + 50%);*/
    /*margin-right: calc(-50vw + 50%);*/
}

/* An <a>: the whole bar is one link to /live, so nothing inside a row is a
   link of its own. */
.live-feed {
    height: 100%;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

/* The hover cue is on the BAR, not on the domain. Underlining the domain made
   it look like the domain was the link and led to that site - which is exactly
   what this stopped doing when the whole bar became one link to /live. A wash
   across the strip says the strip is what you are clicking. */
.live-feed:hover {
    background: rgba(255, 255, 255, 0.04);
}

.feed-header {
    flex-shrink: 0;
    width: 100px;
    margin-right: 1.5rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
    display: flex;
    align-items: center;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    position: relative;
    animation: status-pulse 2s ease-in-out infinite;
}

.status-dot::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.3);
    animation: status-ring 2s ease-out infinite;
}

.status-text {
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feed-ticker {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

.ticker-track {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    padding: 0 0.5rem;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-item.visible {
    opacity: 1;
}

/* One row at a time, crossfading. The rows used to travel 18px on every
   change; a bar that changes every few seconds for as long as the page is
   open turns that into constant vertical motion at the top of the viewport,
   which is tiring to sit with. Opacity carries the change on its own - the
   eye still registers that the line was replaced, with nothing moving across
   it. Slower in than out, so the arriving row is what it settles on. */
.ticker-item.ticker-in {
    opacity: 1;
    animation: ticker-fade-in 0.6s ease;
}

.ticker-item.ticker-out {
    animation: ticker-fade-out 0.4s ease forwards;
}

@keyframes ticker-fade-in {
    from { opacity: 0; }
}

@keyframes ticker-fade-out {
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-item.ticker-in,
    .ticker-item.ticker-out { animation-duration: 0.01ms; }
}

/* baseline, not center. The domain and the country sit in one line at two
   different font sizes (16px inherited against 0.8125rem), and centring aligns
   their BOXES - so the smaller one's position depends on its own box height.
   Anything that changes that height while the page settles moves the country
   text on its own, next to a domain that stays put; measured, dropping the
   country from 13px to 11px drifts its baseline 1.5px upward under `center`
   and not at all under `baseline`. The row itself stays centred, so the line
   is still vertically centred in the bar - only the two texts inside it are
   pinned to a shared baseline. */
.item-content {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.item-domain {
    color: #e2e8f0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* City and country. Replaces the URL path, which described the page someone
   was on; where they are is the part that makes the bar feel worldwide. */
.item-where {
    color: #94a3b8;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.item-time {
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* A row that arrived WHILE you were looking. It is the only thing on this bar
   that means "now" - the walk through older rows deliberately stays muted, or
   the treatment would just mean "a row" and stop carrying anything.
   NOT the hot pink /live uses for a landing dot. That colour earns its place
   there by matching a dot landing on the map; on a page with no map it is a
   hue from nowhere, sitting on navy. This bar says "new" inside its own
   palette instead - the emerald it already uses, brightened, with the domain
   going to full white. Lightness does the work that hue does over there. */
.ticker-item.ticker-fresh .item-domain {
    color: #ffffff;
}

.ticker-item.ticker-fresh .item-time {
    color: #34d399;
}

/* Animation keyframes */
@keyframes status-pulse {
    0% {
        transform: scale(1);
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        transform: scale(1.2);
        background: #16a34a;
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(1);
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes status-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* Responsive styles */
@media (max-width: 991px) {
    .live-feed {
        padding: 0 1rem;
    }

    .feed-header {
        width: 120px;
        margin-right: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767px) {
    .feed-header {
        width: 100px;
        margin-right: 1rem;
        padding-right: 1rem;
    }

    .item-domain {
        max-width: none; /* 도메인은 제한 없음 */
    }

    .item-where {
        max-width: 140px; /* 모바일에서는 도시·나라를 짧게 제한 */
    }
}

@media (max-width: 576px) {
    .live-feed {
        padding: 0 0.75rem;
    }

    .feed-header {
        width: 90px;
        margin-right: 0.75rem;
        padding-right: 0.75rem;
    }

    .status-text {
        font-size: 0.8125rem;
    }

    .item-where {
        max-width: 90px; /* 더 작은 화면에서는 더욱 짧게 */
    }
}
/* 실시간 피드 스타일 - END */