/* choice-event CSS (Light & Dark Mode Support via html.dark-mode) */

/* 기본 라이트 테마 변수 */
:root {
    --ce-bg-main: #ffffff;
    --ce-bg-sub: #f8fafc;
    --ce-bg-accent: #edf2f7;
    --ce-border: #e2e8f0;
    --ce-text-main: #2d3748;
    --ce-text-title: #1a202c;
    --ce-text-muted: #718096;
    --ce-input-bg: #ffffff;
    --ce-input-border: #cbd5e0;
    --ce-input-text: #2d3748;
    
    --ce-progress-bg: #ebf8ff;
    --ce-progress-color: #2b6cb0;
    --ce-progress-border: #bee3f8;
    
    --ce-closed-bg: #fff5f5;
    --ce-closed-color: #c53030;
    --ce-closed-border: #fed7d7;
    
    --ce-settled-bg: #fefcbf;
    --ce-settled-color: #975a16;
    --ce-settled-border: #faf089;

    --ce-winner-card-bg: #fffdf5;
    --ce-winner-card-border: #ecc94b;
    --ce-winner-card-title: #975a16;

    --ce-modal-bg: #ffffff;
    --ce-modal-header-border: #e2e8f0;
}

/* 다크 모드 변수 오버라이드 (오직 html.dark-mode 로만 활성화) */
html.dark-mode {
    --ce-bg-main: #1e222d;
    --ce-bg-sub: #282e3e;
    --ce-bg-accent: #32394d;
    --ce-border: #3b4256;
    --ce-text-main: #e2e8f0;
    --ce-text-title: #f8fafc;
    --ce-text-muted: #94a3b8;
    --ce-input-bg: #1a1e29;
    --ce-input-border: #475569;
    --ce-input-text: #f1f5f9;
    
    --ce-progress-bg: #1e3a5f;
    --ce-progress-color: #63b3ed;
    --ce-progress-border: #2b6cb0;
    
    --ce-closed-bg: #4a1d24;
    --ce-closed-color: #feb2b2;
    --ce-closed-border: #742a2a;
    
    --ce-settled-bg: #4d3e18;
    --ce-settled-color: #f6e05e;
    --ce-settled-border: #744210;

    --ce-winner-card-bg: #272216;
    --ce-winner-card-border: #b7791f;
    --ce-winner-card-title: #f6e05e;

    --ce-modal-bg: #1e222d;
    --ce-modal-header-border: #3b4256;
}

/* =========================================================================
   이벤트 현황 컨테이너
========================================================================= */
.choice-event-container {
    background: var(--ce-bg-main);
    border: 1px solid var(--ce-border);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--ce-text-main);
}

.event-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--ce-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.event-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.event-status-progress { background: var(--ce-progress-bg); color: var(--ce-progress-color); border: 1px solid var(--ce-progress-border); }
.event-status-closed { background: var(--ce-closed-bg); color: var(--ce-closed-color); border: 1px solid var(--ce-closed-border); }
.event-status-settled { background: var(--ce-settled-bg); color: var(--ce-settled-color); border: 1px solid var(--ce-settled-border); }

/* 포인트 모드 안내 뱃지 */
.event-point-fixed-badge {
    background: #fefcbf;
    color: #744210;
    border: 1px solid #ecc94b;
}
.event-point-range-badge {
    background: #ebf8ff;
    color: #2b6cb0;
    border: 1px solid #bee3f8;
}
html.dark-mode .event-point-fixed-badge {
    background: #4d3e18;
    color: #f6e05e;
    border-color: #744210;
}
html.dark-mode .event-point-range-badge {
    background: #1e3a5f;
    color: #63b3ed;
    border-color: #2b6cb0;
}

.event-timer-badge {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ce-text-main);
    background: var(--ce-bg-sub);
    border: 1px solid var(--ce-border);
    padding: 5px 13px;
    border-radius: 6px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.event-timer-badge i { color: #e53e3e; margin-right: 4px; }

/* =========================================================================
   선택지 투표 현황 리스트 (1열 기본 및 4개 이상 시 반응형 2열 그리드)
========================================================================= */
.choice-vote-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* 4개 이상 선택지 시 2열 그리드 활성화 */
.choice-vote-list.is-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.choice-vote-card {
    background: var(--ce-bg-sub);
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 12px 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.choice-vote-list.is-grid-layout .choice-vote-card {
    padding: 11px 14px;
}
.choice-vote-card.is-clickable {
    cursor: pointer;
}
.choice-vote-card.is-clickable:hover {
    transform: translateY(-2px);
    border-color: #3182ce;
    box-shadow: 0 5px 14px rgba(49, 130, 206, 0.15);
}
.choice-vote-card.is-clickable:active {
    transform: translateY(0);
}
.choice-vote-card.is-my-pick {
    border: 2px solid #3182ce;
    background: var(--ce-bg-main);
}
.choice-vote-card.is-winner {
    background: var(--ce-winner-card-bg);
    border: 2px solid var(--ce-winner-card-border);
    box-shadow: 0 2px 8px rgba(214, 158, 46, 0.15);
}

.choice-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    gap: 8px;
}

.choice-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ce-text-title);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    line-height: 1.35;
    word-break: break-word;
    flex-grow: 1;
}
.choice-vote-list.is-grid-layout .choice-card-title {
    font-size: 13.5px;
}
.choice-vote-card.is-winner .choice-card-title {
    color: var(--ce-winner-card-title);
}

.choice-card-stats {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ce-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.vote-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #3182ce;
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    padding: 2px 7px;
    border-radius: 10px;
    transition: all 0.2s ease;
    line-height: 1.2;
}
.choice-vote-card.is-clickable:hover .vote-action-btn {
}
html.dark-mode .vote-action-btn {
    background: #1e3a5f;
    color: #63b3ed;
    border-color: #2b6cb0;
}
html.dark-mode .choice-vote-card.is-clickable:hover .vote-action-btn {
    background: #3182ce;
    color: #ffffff;
    border-color: #3182ce;
}

.choice-vote-count {
    font-weight: 700;
    color: var(--ce-text-main);
}
.choice-vote-percent {
    color: #3182ce;
    font-weight: 700;
}
.choice-vote-card.is-winner .choice-vote-percent {
    color: #b7791f;
}
html.dark-mode .choice-vote-card.is-winner .choice-vote-percent {
    color: #f6e05e;
}

.vote-progress-track {
    width: 100%;
    height: 8px;
    background: var(--ce-bg-accent);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.vote-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #63b3ed, #3182ce);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.vote-progress-bar.is-winner-bar {
    background: linear-gradient(90deg, #ecc94b, #d69e2e);
}

.winner-crown-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ce-settled-bg);
    color: var(--ce-settled-color);
    border: 1px solid var(--ce-settled-border);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7.5px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.2;
}

.hot-lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #ff5757, #ff7a45);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7.5px;
    border-radius: 10px;
    margin-left: 4px;
    box-shadow: 0 2px 4px rgba(255, 87, 87, 0.25);
    letter-spacing: -0.3px;
    vertical-align: middle;
    line-height: 1.2;
}

.my-pick-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #3182ce;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7.5px;
    border-radius: 10px;
    margin-left: 4px;
    line-height: 1.2;
    vertical-align: middle;
}

/* =========================================================================
   모바일 화면 (767px 이하) & 쇼케이스 모바일 프레임(.is-mobile-frame) 반응형 전환
========================================================================= */
@media (max-width: 767px) {
    .choice-event-container {
        padding: 15px 12px;
        margin: 15px 0;
    }
    .event-header-card {
        padding-bottom: 12px;
        margin-bottom: 14px;
        gap: 8px;
    }
    .event-status-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
    .event-timer-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
    .choice-vote-list.is-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 9px;
    }
    .choice-vote-card, .choice-vote-list.is-grid-layout .choice-vote-card {
        padding: 10px 12px;
    }
    .choice-card-header {
        margin-bottom: 6px;
        gap: 6px;
    }
    .choice-card-title, .choice-vote-list.is-grid-layout .choice-card-title {
        font-size: 13.5px;
        gap: 4px;
    }
    .choice-card-stats {
        font-size: 12px;
        gap: 6px;
    }
    .vote-action-btn {
        font-size: 11px;
        padding: 2px 7px;
    }
    .hot-lead-badge, .my-pick-badge, .winner-crown-tag {
        font-size: 10px;
        padding: 1.5px 6px;
        margin-left: 3px;
    }
    .vote-progress-track {
        height: 7px;
    }
}

/* preview.php의 모바일 뷰 시뮬레이터(.preview-container.is-mobile-frame) 완벽 지원 */
.preview-container.is-mobile-frame .choice-event-container {
    padding: 15px 12px;
    margin: 15px 0;
}
.preview-container.is-mobile-frame .event-header-card {
    padding-bottom: 12px;
    margin-bottom: 14px;
    gap: 8px;
}
.preview-container.is-mobile-frame .event-status-badge {
    font-size: 12px;
    padding: 4px 10px;
}
.preview-container.is-mobile-frame .event-timer-badge {
    font-size: 12px;
    padding: 4px 10px;
}
.preview-container.is-mobile-frame .choice-vote-list.is-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 9px;
}
.preview-container.is-mobile-frame .choice-vote-card,
.preview-container.is-mobile-frame .choice-vote-list.is-grid-layout .choice-vote-card {
    padding: 10px 12px;
}
.preview-container.is-mobile-frame .choice-card-header {
    margin-bottom: 6px;
    gap: 6px;
}
.preview-container.is-mobile-frame .choice-card-title,
.preview-container.is-mobile-frame .choice-vote-list.is-grid-layout .choice-card-title {
    font-size: 13.5px;
    gap: 4px;
}
.preview-container.is-mobile-frame .choice-card-stats {
    font-size: 12px;
    gap: 6px;
}
.preview-container.is-mobile-frame .vote-action-btn {
    font-size: 11px;
    padding: 2px 7px;
}
.preview-container.is-mobile-frame .hot-lead-badge,
.preview-container.is-mobile-frame .my-pick-badge,
.preview-container.is-mobile-frame .winner-crown-tag {
    font-size: 10px;
    padding: 1.5px 6px;
    margin-left: 3px;
}
.preview-container.is-mobile-frame .vote-progress-track {
    height: 7px;
}

/* 라디오 아이템 선택 펄스 애니메이션 */
@keyframes selectPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 0 14px rgba(49, 130, 206, 0.6); }
    100% { transform: scale(1); }
}
.choice-radio-item.flash-select {
    animation: selectPulse 0.5s ease-out;
}

/* =========================================================================
   관리자 제어 패널 (당첨 선택지 지정 및 관리자 액션)
========================================================================= */
.admin-event-panel {
    background: var(--ce-bg-sub);
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ce-text-muted);
}
.admin-panel-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.adm-select-winner {
    background: var(--ce-input-bg);
    color: var(--ce-input-text);
    border: 1px solid var(--ce-input-border);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
}
.adm-select-winner:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 1px #3182ce;
}
.adm-select-winner option {
    background: var(--ce-bg-main);
    color: var(--ce-text-main);
}
.btn-adm-act {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.btn-adm-act:hover {
    opacity: 0.9;
}
.btn-adm-act:active {
    transform: translateY(1px);
}
.btn-adm-winlist {
    background: #d69e2e !important;
    color: #ffffff !important;
}
.btn-adm-winlist:hover {
    background: #b7791f !important;
}

/* 다크모드 관리자 패널 */
html.dark-mode .admin-event-panel {
    background: #181b24;
    border-color: #3b4256;
}
html.dark-mode .adm-select-winner {
    background: #1a1e29;
    border-color: #475569;
    color: #f1f5f9;
}
html.dark-mode .adm-select-winner option {
    background: #1a1e29;
    color: #f1f5f9;
}

/* =========================================================================
   댓글 폼 라디오 선택기 & 댓글 목록
========================================================================= */
.comment-choice-selector {
    background: var(--ce-bg-sub);
    border: 1px solid var(--ce-border);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 12px;
}
.comment-choice-title {
    font-size: 13px;
    font-weight: 700;
    color: #3182ce;
    margin-bottom: 8px;
}
html.dark-mode .comment-choice-title {
    color: #63b3ed;
}

.choice-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choice-radio-item {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--ce-border);
    border-radius: 20px;
    background: var(--ce-bg-main);
    color: var(--ce-text-main);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
    user-select: none;
}
.choice-radio-item:hover {
    border-color: #3182ce;
    background: var(--ce-bg-accent);
    transform: translateY(-1px);
}
.choice-radio-item.selected {
    border-color: #3182ce;
    background: var(--ce-progress-bg);
    color: var(--ce-progress-color);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(49, 130, 206, 0.2);
}
.choice-radio-item input[type="radio"] {
    margin-right: 6px;
    cursor: pointer;
    accent-color: #3182ce;
}
html.dark-mode .choice-radio-item input[type="radio"]:checked + span {
    color: #63b3ed;
}

.comment-choice-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ce-progress-bg);
    color: var(--ce-progress-color);
    border: 1px solid var(--ce-progress-border);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
}
.comment-winner-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--ce-settled-bg);
    color: var(--ce-settled-color);
    border: 1px solid var(--ce-settled-border);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
}

.media.is-winner-comment {
    background: var(--ce-winner-card-bg) !important;
    border: 1px solid var(--ce-winner-card-border) !important;
    border-left: 4px solid #d69e2e !important;
    border-radius: 6px;
}
.media-content {
    color: var(--ce-text-main) !important;
}

.comment-write textarea.form-control {
    background: var(--ce-bg-main);
    color: var(--ce-text-main);
    border: 1px solid var(--ce-border);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.comment-write textarea.form-control:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.18);
    outline: none;
}
html.dark-mode .comment-write textarea.form-control {
    background: #1a1e29;
    color: #f1f5f9;
    border-color: #475569;
}
html.dark-mode .comment-write textarea.form-control:focus {
    border-color: #63b3ed;
    box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.2);
}

/* 댓글/참여 폼 포인트 박스 (라이트 & 다크 완벽 지원) */
.participate-point-fixed-box {
    background: #fffdf5;
    border: 1px solid #f6ad55;
    border-radius: 6px;
    padding: 12px 15px;
}
.point-fixed-label {
    font-size: 13px;
    font-weight: bold;
    color: #c05621;
}
.point-fixed-desc {
    font-size: 11px;
    color: #718096;
    margin-top: 2px;
}
.point-user-balance-chip {
    font-size: 12px;
    font-weight: bold;
    color: #4a5568;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 20px;
}
.point-unit-addon {
    background: var(--ce-bg-accent);
    font-weight: bold;
    color: var(--ce-text-title);
    border-color: var(--ce-input-border);
}

html.dark-mode .participate-point-fixed-box {
    background: #272216 !important;
    border-color: #b7791f !important;
}
html.dark-mode .point-fixed-label {
    color: #f6e05e !important;
}
html.dark-mode .point-fixed-desc {
    color: #cbd5e0 !important;
}
html.dark-mode .point-user-balance-chip {
    background: #1a1e29 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
html.dark-mode .point-unit-addon {
    background: #242938 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* =========================================================================
   당첨자 모달
========================================================================= */
.winner-modal-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.winner-modal-box {
    background: var(--ce-modal-bg);
    color: var(--ce-text-main);
    border: 1px solid var(--ce-border);
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.winner-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--ce-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ce-text-title);
}
.winner-modal-body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
}
.winner-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ce-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--ce-bg-sub);
    border-radius: 0 0 10px 10px;
}
.winner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.winner-table th, .winner-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ce-border);
    text-align: left;
}
.winner-table th {
    background: var(--ce-bg-accent);
    font-weight: 700;
    color: var(--ce-text-title);
}
.winner-table td {
    color: var(--ce-text-main);
}

@media (max-width: 767px) {
    .winner-modal-box {
        width: 95%;
        max-height: 85vh;
    }
    .winner-modal-header {
        padding: 12px 15px;
        font-size: 14px;
    }
    .winner-modal-body {
        padding: 15px 12px;
    }
    .winner-table {
        min-width: 320px;
        font-size: 12px;
    }
    .winner-table th, .winner-table td {
        padding: 6px 8px;
    }
    .winner-modal-footer {
        padding: 10px 15px;
        flex-wrap: wrap;
    }
}

/* =========================================================================
   표준 뷰 헤더 및 프로필/레벨 스타일 (listiveiw 호환)
========================================================================= */
.view-wrap h1 span.talker-photo {
    margin-bottom: 6px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
.view-wrap h1 span.talker-photo img {
    border-radius: 50%;
    width: 38px !important;
    height: 38px !important;
    display: inline-block;
}
.view-wrap .view-head {
    border-left: 0px;
    border-right: 0px;
    margin-bottom: 20px;
    background: var(--ce-bg-sub);
    border-color: var(--ce-border);
}
.view-wrap .view-head.no-attach {
    border-bottom: 1px solid var(--ce-border);
}
.view-wrap .view-head .panel-heading {
    background: var(--ce-bg-sub);
    border-color: var(--ce-border);
    color: var(--ce-text-muted);
}
.view-wrap .view-head .sp {
    display: inline-block;
    width: 15px;
    text-align: center;
    font-size: 11px;
    color: var(--ce-text-muted);
}
.view-wrap .view-head .list-group-item {
    padding: 6px 15px;
    border-style: dotted;
    background: var(--ce-bg-main);
    border-color: var(--ce-border);
    color: var(--ce-text-main);
}

/* =========================================================================
   추천/비추천 원형 박스 (listiveiw 호환)
========================================================================= */
.view-good-box {
    text-align: center;
}
.view-good-box span {
    margin: 15px 6px;
    width: 80px;
    height: 80px;
    display: inline-block;
}
.view-good-box a {
    background: var(--ce-bg-accent);
    padding-top: 14px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    text-align: center;
    color: var(--ce-text-main);
    font-size: 22px;
    line-height: 26px;
    display: inline-block;
    border: 1px solid var(--ce-border);
    transition: all 0.2s ease;
}
.view-good-box .view-good a:hover {
    background: #e53e3e;
    color: #ffffff;
    border-color: #e53e3e;
}
.view-good-box .view-nogood a:hover {
    background: #4a5568;
    color: #ffffff;
    border-color: #4a5568;
}

/* 태그 및 아이콘 바 */
.view-tag {
    margin: 10px 0px;
    padding: 0px 15px;
    color: var(--ce-text-muted);
}
.view-tag a { color: var(--ce-text-muted); }
.view-tag a:hover { color: #e53e3e; }

.view-icon {
    margin-bottom: 15px;
}
.view-icon img {
    width: 34px;
    border-radius: 50%;
    margin-bottom: 5px;
}
.view-author-none {
    height: 1px;
    border-top: 1px solid var(--ce-border);
    margin: 12px 0px 20px;
}

/* =========================================================================
   이벤트 참여 결과 뱃지 (Template Badges - choice-badge-chip)
   ========================================================================= */
.choice-entry-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* 기본 선택지 픽 뱃지 (Default Pick Chip) */
.choice-badge-chip,
.choice-result-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ebf8ff;
    border: 1px solid #bee3f8;
    color: #2b6cb0;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.2s ease;
}
.choice-badge-chip .chip-num,
.choice-result-chip .chip-num {
    font-weight: 700;
    color: #2b6cb0;
}
.choice-badge-chip .chip-text,
.choice-result-chip .chip-title {
    color: inherit;
}

/* 당첨된 픽 뱃지 (Winner Pick Chip) */
.choice-badge-chip.is-win-chip,
.choice-badge-chip.is-winner-chip,
.choice-result-chip.is-winner-chip {
    background: #fefcbf;
    border-color: #ecc94b;
    color: #975a16;
    box-shadow: 0 1px 4px rgba(236, 201, 75, 0.25);
}
.choice-badge-chip.is-win-chip .chip-num,
.choice-badge-chip.is-winner-chip .chip-num,
.choice-result-chip.is-winner-chip .chip-num {
    color: #975a16;
}
.chip-win-tag {
    background: #d69e2e;
    color: #ffffff;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* 주관식 답변 뱃지 (Text Chip) */
.choice-badge-chip.is-text-chip,
.choice-text-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}
.choice-badge-chip.is-text-chip .chip-num,
.choice-text-chip .chip-label {
    font-weight: 700;
    color: #2d3748;
}

/* 포인트 베팅 뱃지 (Point Chip) */
.choice-badge-chip.is-point-chip,
.choice-point-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fffaf0;
    border: 1px solid #feebc8;
    color: #c05621;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}
.choice-badge-chip.is-point-chip .chip-num,
.choice-point-chip .chip-label {
    font-weight: 700;
    color: #9c4221;
}

/* =========================================================================
   뱃지 다크모드 대응 (html.dark-mode)
   ========================================================================= */
html.dark-mode .choice-badge-chip,
html.dark-mode .choice-result-chip {
    background: #1e3a5f;
    border-color: #2b6cb0;
    color: #90cdf4;
}
html.dark-mode .choice-badge-chip .chip-num,
html.dark-mode .choice-result-chip .chip-num {
    color: #63b3ed;
}

html.dark-mode .choice-badge-chip.is-win-chip,
html.dark-mode .choice-badge-chip.is-winner-chip,
html.dark-mode .choice-result-chip.is-winner-chip {
    background: #5f4800;
    border-color: #b7791f;
    color: #faf089;
}
html.dark-mode .choice-badge-chip.is-win-chip .chip-num,
html.dark-mode .choice-badge-chip.is-winner-chip .chip-num,
html.dark-mode .choice-result-chip.is-winner-chip .chip-num {
    color: #faf089;
}
html.dark-mode .chip-win-tag {
    background: #b7791f;
    color: #ffffff;
}

html.dark-mode .choice-badge-chip.is-text-chip,
html.dark-mode .choice-text-chip {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}
html.dark-mode .choice-badge-chip.is-text-chip .chip-num,
html.dark-mode .choice-text-chip .chip-label {
    color: #f7fafc;
}

html.dark-mode .choice-badge-chip.is-point-chip,
html.dark-mode .choice-point-chip {
    background: #4a2800;
    border-color: #7b341e;
    color: #fbd38d;
}
html.dark-mode .choice-badge-chip.is-point-chip .chip-num,
html.dark-mode .choice-point-chip .chip-label {
    color: #feebc8;
}