@charset "utf-8";
/* ************************************** *
 * COMMENT RANKING PC VER
 * ************************************** */
/* 댓글왕 포디움 */
.serial-layout .cmt-king {/* background: var(--color-bg-box);*/ border-radius: 8px; padding: 1rem; margin-bottom: 16px; }
.cmt-king .cmt-king__header { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 0; /*border-bottom: 1px solid var(--color-border-default);*/ margin-bottom: 0; position:absolute; right:10px; top:0}
.cmt-king .cmt-king__label { color: var(--color-text-describe); font-size: var(--font-size-12px); font-weight: 500; }
.cmt-king .cmt-king__select { position: relative; min-width: 110px; }
.cmt-king .cmt-king__select-btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; background: transparent; border: 1px solid var(--color-border-default); border-radius: 4px; padding: 6px 10px 6px 14px; color: var(--color-text-title); font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; text-align: left; line-height: 1.4; }
.cmt-king .cmt-king__select-btn:hover { border-color: var(--color-text-subtitle); }
.cmt-king .cmt-king__select-arrow { color: #999; transition: transform 0.2s ease; flex-shrink: 0; }
.cmt-king .cmt-king__select-arrow.is-open { transform: rotate(180deg); }
.cmt-king .cmt-king__select-list { position: absolute; top: calc(100% + 4px); right: 0; left: 0; list-style: none; margin: 0; padding:0; background: var(--color-bg-box); border: 1px solid var(--color-border-default); border-radius:4px; /*box-shadow: 0 6px 18px rgba(0,0,0,0.3);*/ max-height: 240px; overflow-y: auto; z-index: 20; display: none; }
.cmt-king .cmt-king__select-list.is-open { display: block; }
.cmt-king .cmt-king__select-item { padding: 10px 12px; font-size: var(--font-size-xs); color: var(--color-text-subtitle); cursor: pointer; border-radius:0; transition: background 0.15s ease, color 0.15s ease; }
.cmt-king .cmt-king__select-item:hover { background: rgba(255,255,255,0.06); color: var(--color-text-title); }
.cmt-king .cmt-king__select-item.is-active { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--color-border-default); color: var(--color-text-title); font-weight: 600; }
.cmt-king .cmt-king__title-wrap { text-align: center; margin-bottom: 28px; }
.cmt-king .cmt-king__title { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-text-title); margin: 0 0 6px; padding-bottom: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; justify-content: center; min-height: 2.5rem; }
.cmt-king .cmt-king__title-word { display: inline-block; opacity: 0; transform: translateY(6px); }
.cmt-king .cmt-king__title-word--prefix { animation: cmtKingWordIn 0.4s ease forwards 0.15s; }
.cmt-king .cmt-king__title-word--suffix { position: relative; z-index: 1; display: inline-block; transform: translateX(-70px); animation: cmtKingSuffixSlide 0.55s cubic-bezier(0.25,0.8,0.3,1) forwards 1.6s; }
.cmt-king .cmt-king__title-box { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: flex-start; min-width:3rem; min-height: 2rem; padding: 2px 10px; background: #222; border:2px solid rgba(71, 61, 46,.5); border-radius: 6px; opacity: 0; transform: scale(0.9); animation: cmtKingBoxIn 0.45s cubic-bezier(0.2,0.8,0.2,1) forwards 0.55s; transition: min-width 0.45s cubic-bezier(0.4,0,0.2,1); }
.cmt-king .cmt-king__title-box.is-done { min-width: 0; }
.cmt-king .cmt-king__title-typed { display: inline-block; position: relative;/* padding-right: 7px;*/ min-height: 1.75rem; color: #F5B800; font-weight: var(--font-weight-bold); white-space: nowrap; letter-spacing: -0.5px; line-height: 1.75rem; vertical-align: middle; }
.cmt-king .cmt-king__title-typed::after { content: ""; position: absolute; right: 0; top: 50%; width: 2px; height: 1.4rem; margin-top: -0.7rem; background: #F5B800; animation: cmtKingCaret 0.6s step-end infinite; }
.cmt-king .cmt-king__title-typed.is-done::after { display: none; }
.cmt-king .cmt-king__title-trophy { position: absolute; top: -0.7rem; left: 94%; width: 2rem; height: auto; object-fit: contain; margin: 0; opacity: 0; transform: translateX(-50%) scale(0.5) rotate(35deg); animation: cmtKingTrophyIn 0.5s cubic-bezier(0.2,0.9,0.3,1.5) forwards 1.9s; pointer-events: none; z-index: 1; }
@keyframes cmtKingTrophyIn { to { opacity: 1; transform: translateX(-50%) scale(1) rotate(18deg); } }
@keyframes cmtKingWordIn { to { opacity: 1; transform: translateY(0); } }
@keyframes cmtKingSuffixSlide { to { opacity: 1; transform: translateX(0); } }
@keyframes cmtKingBoxIn { to { opacity: 1; transform: scale(1); } }
@keyframes cmtKingCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cmt-king .cmt-king__title-word, .cmt-king .cmt-king__title-box { opacity: 1; transform: none; animation: none; } .cmt-king .cmt-king__title-trophy { opacity: 1; transform: translateX(-50%) rotate(18deg); animation: none; } .cmt-king .cmt-king__title-typed::after { display: none; } }
.cmt-king .cmt-king__period { font-size:0.8rem; color: var(--color-text-describe); margin: 0; }
.cmt-king .cmt-king__podium { position: relative; background:#222; border: 1px solid var(--color-border-default); border-radius:8px; display: flex; justify-content: center; align-items: flex-end; gap: 7px; padding:3rem 14px 0; margin: 0 auto; color: var(--color-text-title); box-sizing: border-box; width: 100%; }
.cmt-king .cmt-king__podium-ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 1rem; background: linear-gradient(180deg, #FFD14A 0%, #F5B800 100%); color: #1a1410; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; border-radius: 100px; /*box-shadow: 0 6px 16px rgba(245,184,0,0.28), 0 0 0 1px rgba(245,184,0,0.4);*/ white-space: nowrap; }
.cmt-king .cmt-king__podium-ribbon-ico { flex-shrink: 0; }
.cmt-king .cmt-king__rank { position: relative; text-align: center; flex: 1; max-width:240px; display: flex; flex-direction: column; align-items: center; }
.cmt-king .cmt-king__rank--1::before { content: ""; position: absolute; top: 8%; left: 50%; width: 140%; height: 60%; background: radial-gradient(ellipse at center, rgba(245,184,0,0.55) 0%, rgba(245,184,0,0.2) 40%, transparent 65%); transform: translateX(-50%); pointer-events: none; z-index: 0; mix-blend-mode: soft-light; filter: blur(4px); }
.cmt-king .cmt-king__rank--2::before { content: ""; position: absolute; top: 14%; left: 50%; width: 130%; height: 55%; background: radial-gradient(ellipse at center, rgba(200,220,240,0.4) 0%, rgba(200,220,240,0.15) 40%, transparent 65%); transform: translateX(-50%); pointer-events: none; z-index: 0; mix-blend-mode: soft-light; filter: blur(4px); }
.cmt-king .cmt-king__rank--3::before { content: ""; position: absolute; top: 14%; left: 50%; width: 130%; height: 55%; background: radial-gradient(ellipse at center, rgba(255,165,114,0.45) 0%, rgba(255,165,114,0.18) 40%, transparent 65%); transform: translateX(-50%); pointer-events: none; z-index: 0; mix-blend-mode:soft-light; filter: blur(4px); }
.cmt-king .cmt-king__rank--1 > *, .cmt-king .cmt-king__rank--2 > *, .cmt-king .cmt-king__rank--3 > * { position: relative; z-index: 1; }
.cmt-king .cmt-king__rank-count { display: inline-block; font-size:11px; color: var(--color-text-subtitle); background: var(--color-btn-hover); padding: 3px 8px 2px; border-radius: 12px; margin: 0 0 0.5rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.2px;}
.cmt-king .cmt-king__rank-count--1 { color: #FFE58A; background: rgba(245,184,0,0.1);}
.cmt-king .cmt-king__rank-username { font-size: 0.85rem; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--font-weight-semibold); max-width: 100%; }
.cmt-king .cmt-king__rank-username--1 { color: #FFC635; }
.cmt-king .cmt-king__rank-username--2 { color: #D8E6F1; }
.cmt-king .cmt-king__rank-username--3 { color: #FFA572; }
.cmt-king .cmt-king__character { position: relative; height: 80px; display: flex; justify-content: center; margin-bottom:-2.5%;}
.cmt-king .cmt-king__character--1 { height: 110px; }
.cmt-king .cmt-king__character img { height: 100%; width: auto; object-fit: contain; display: block; }
.cmt-king .cmt-king__bar { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 0; color: var(--color-dark); border-radius: 0.75rem 0.75rem 0 0; box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.04); }
.cmt-king .cmt-king__bar::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; border-radius: 2px; }
.cmt-king .cmt-king__bar--1 { background: linear-gradient(180deg, #3c3222 0%, #2d2517 100%); height: 100px; }
.cmt-king .cmt-king__bar--1::before { background: linear-gradient(90deg, transparent, #F5B800 50%, transparent); }
.cmt-king .cmt-king__bar--2 { background: linear-gradient(180deg, #323338 0%, #25272a 100%); height: 76px; }
.cmt-king .cmt-king__bar--2::before { background: linear-gradient(90deg, transparent, #D8E6F1 50%, transparent); }
.cmt-king .cmt-king__bar--3 { background: linear-gradient(180deg, #4a3830 0%, #382821 100%); height: 62px; }
.cmt-king .cmt-king__bar--3::before { background: linear-gradient(90deg, transparent, #FFA572 50%, transparent); }
.cmt-king .cmt-king__bar-num { font-size: 1.6rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.cmt-king .cmt-king__bar-tier { font-size: var(--font-size-xs); letter-spacing: 0.5px; opacity: 0.75; margin-top: 3px; }
.cmt-king .cmt-king__bar-rank { display: inline-flex; align-items: baseline; font-size: 1.6rem; font-weight: var(--font-weight-bold); line-height: 1.1; letter-spacing: -0.5px; color: var(--color-dark); }
.cmt-king .cmt-king__bar-rank sup { font-size: 0.65em; font-weight: var(--font-weight-bold); margin-left: 1px; opacity: 0.85; }

/* 베스트 댓글 */
.serial-layout .cmt-best { /*background: var(--color-bg-box);*/ border-radius: 8px; padding: 1rem; }
.cmt-best .cmt-best__header { padding: 1rem 0 0 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border-default);}
.cmt-best .cmt-best__title { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-title); margin: 0; }
.cmt-best .cmt-best__sort-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--color-border-default); border-radius: 14px; padding: 4px 10px; color: var(--color-text-describe); font-size: var(--font-size-xs); cursor: pointer; }
.cmt-best .cmt-best__list { list-style: none; margin: 0; padding: 0; }
.cmt-best .cmt-best__item { display: flex; align-items: flex-start; gap: 0.4rem; padding: 15px 0; border-bottom: 1px solid var(--color-border-default); }
.cmt-best .cmt-best__item:last-child { border-bottom: 0; }
.cmt-best .cmt-best__avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-top: -2px; }
.cmt-best .cmt-best__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.cmt-best .cmt-best__cont { flex: 1; overflow: hidden; }
.cmt-best .cmt-best__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cmt-best .cmt-best__info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cmt-best .cmt-best__name { font-size: 0.85rem; color: var(--color-text-title); font-weight: var(--font-weight-semibold); }
.cmt-best .cmt-best__meta { font-size: var(--font-size-12px); color: var(--color-text-describe); }
.cmt-best .cmt-best__like-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; font-size: var(--font-size-12px); font-weight: 500; color: var(--color-text-describe); }
.cmt-best .cmt-best__like-btn.is-liked { color: var(--color-red-primary); }
.cmt-best .cmt-best__like-btn.is-liked svg { fill: currentColor; }
.cmt-best .cmt-best__like-btn svg { flex-shrink: 0; }
.cmt-best .cmt-best__work { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 8px; }
.cmt-best .cmt-best__work-title { font-size: var(--font-size-12px); color: var(--color-text-describe); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-best .cmt-best__work-ep { position: relative; padding-left: 7px; font-size: var(--font-size-12px); color: var(--color-text-describe); font-weight: var(--font-weight-regular); flex-shrink: 0; }
.cmt-best .cmt-best__work-ep::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: currentColor; opacity: 0.4; }
.cmt-best .cmt-best__text { font-size: 15px; color: var(--color-text-subtitle); line-height: 1.5; margin: 2px 0 12px; word-break: break-all; }
.cmt-best .cmt-best__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmt-best .cmt-best__cta { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-subtitle); font-size: var(--font-size-xs); font-weight: 500; padding: 6px 12px 6px 14px; border-radius:50px; text-decoration: none; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; }
.cmt-best .cmt-best__cta:hover { border-color: var(--color-text-subtitle); color: var(--color-text-title); }
.cmt-best .cmt-best__cta svg { opacity: 0.6; margin-left: 2px; }

/* 갱신 주기 안내 */
.cmt-king .cmt-king__notice { margin: 12px 0 0; text-align: center; color: var(--color-text-describe); font-size: 15px; }

/* 빈 데이터 placeholder */
.cmt-best .cmt-best__empty { padding: 2rem 0; text-align: center; color: var(--color-text-describe); font-size: var(--font-size-xs); }

/* ************************************** *
 * 테마 오버라이드 (변수로 커버 안 되는 톤만)
 * ************************************** */
[data-bs-theme=dark] .cmt-best .cmt-best__cta { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); }
[data-bs-theme=dark] .cmt-best .cmt-best__cta:hover { color: var(--color-dark); border-color: rgba(255,255,255,0.35); }
[data-bs-theme=light] .cmt-king .cmt-king__podium { background: #f5f5f5; }
[data-bs-theme=light] .cmt-king .cmt-king__title-box { background: #f5f5f5; }
[data-bs-theme=light] .cmt-king .cmt-king__rank-count { color: #444; background: #fff; border-color: #d5d5d5; }
[data-bs-theme=light] .cmt-king .cmt-king__rank-count--1 { color: #6B4E00; background: #FFF4CC; border-color: #E8C56A; }
[data-bs-theme=light] .cmt-king .cmt-king__rank-username--1 { color: #B8860B; }
[data-bs-theme=light] .cmt-king .cmt-king__rank-username--2 { color: #5A6A82; }
[data-bs-theme=light] .cmt-king .cmt-king__rank-username--3 { color: #B55E2A; }
[data-bs-theme=light] .cmt-king .cmt-king__bar--1 { background: linear-gradient(180deg, #FDE8A8 0%, #E8C96B 100%); }
[data-bs-theme=light] .cmt-king .cmt-king__bar--2 { background: linear-gradient(180deg, #DEE5EE 0%, #BFC9D6 100%); }
[data-bs-theme=light] .cmt-king .cmt-king__bar--3 { background: linear-gradient(180deg, #F1D6BB 0%, #D9AF8B 100%); }
[data-bs-theme=light] .cmt-king .cmt-king__rank--1::before { mix-blend-mode: multiply; background: radial-gradient(ellipse at center, rgba(245,184,0,0.5) 0%, rgba(245,184,0,0.2) 40%, transparent 65%); }
[data-bs-theme=light] .cmt-king .cmt-king__rank--2::before { mix-blend-mode: multiply; background: radial-gradient(ellipse at center, rgba(120,140,170,0.35) 0%, rgba(120,140,170,0.12) 40%, transparent 65%); }
[data-bs-theme=light] .cmt-king .cmt-king__rank--3::before { mix-blend-mode: multiply; background: radial-gradient(ellipse at center, rgba(200,110,60,0.4) 0%, rgba(200,110,60,0.15) 40%, transparent 65%); }
[data-bs-theme=light] .cmt-king .cmt-king__select-item.is-active { background: #f0f0f0; box-shadow: none; }
[data-bs-theme=light] .cmt-king .cmt-king__select-item:hover { background: rgba(0,0,0,0.04); }

/* ************************************** *
 * TABLET PC VER
 * ************************************** */
@media (min-width: 768px) and (max-width:1023px) {


}

/* ************************************** *
 * MOBILE VER
 * ************************************** */
@media (min-width: 0) and (max-width:767px) {
    .serial-layout .cmt-king{padding:2.5rem 0.5rem 0;}
    .serial-layout .cmt-best{padding:0.5rem 0.5rem 0;}
    .cmt-king .cmt-king__select { min-width: 80px; }
    .cmt-king .cmt-king__select-btn { font-size: var(--font-size-xs); padding: 5px 8px 5px 12px; }
    .cmt-king .cmt-king__podium { gap: 4px; }
    .cmt-king .cmt-king__rank { max-width: 120px; }
    .cmt-king .cmt-king__rank-username { font-size: 14px; margin: 0 0 6px; }
    .cmt-king .cmt-king__character { height: 60px; }
    .cmt-king .cmt-king__character--1 { height: 80px; }
    .cmt-king .cmt-king__rank-count { font-size: 11px; padding: 2px 8px;}
    .cmt-king .cmt-king__bar { padding: 10px 0; }
    .cmt-king .cmt-king__bar--1 { height: 72px; }
    .cmt-king .cmt-king__bar--2 { height: 54px; }
    .cmt-king .cmt-king__bar--3 { height: 44px; }
    .cmt-king .cmt-king__bar-num { font-size: 1.25rem; }
    .cmt-king .cmt-king__bar-tier { font-size: 11px; margin-top: 2px; }
    .cmt-king .cmt-king__bar-rank { font-size: 1.25rem; }
    .cmt-best .cmt-best__text { font-size: 14px; }
    .cmt-best .cmt-best__bottom { flex-wrap: wrap; }
    .cmt-king .cmt-king__notice { font-size: 13px; }

}