.detail-mana {
    width: 100%;
    padding: 40px 10px;
.de-mn-list-box ul li a .episode-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.de-mn-list-box ul li a .episode-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin-left: 16px;
    color: #666;
}

.de-mn-list-box ul li a .episode-stats svg {
    flex-shrink: 0;
}

.de-mn-list-box ul li a .view-count {
    margin-right: auto;
}

.de-mn-list-box ul li a .comment-count {
    margin-left: auto;
}

.detail-mana-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.d-m-t-img {
    width: 200px;
    height: 280px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.d-m-t-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.d-m-t-img a {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.d-m-t-img a svg {
    width: 20px;
    height: 20px;
}

.d-m-t-text {
    width: calc(100% - 220px);
}

.episode-info{
    display: flex;
    align-items: center;
}
.d-m-t-text h1 {
    font-size: 24px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}



.d-m-t-text p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    padding-bottom: 10px;
}


.d-m-t-b {
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .detail-mana-title {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .d-m-t-img {
        margin-bottom: 20px;
    }
    
    .d-m-t-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .d-m-t-b {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
}

.d-m-t-b a {
    display: inline-block;
    border-radius: 30px;
    padding: 5px 10px;
    background: #F5F5F5;
    font-size: 14px;
    color: #666;
    margin-right: 10px;
}


.detail-mana-btn {
    width: 100%;
    display: flex;    
    align-items: center;
    padding: 20px 0;
    gap: 10px;
}

.d-m-b-g {
    flex: 1;
    height: 50px;
    background-color: var(--brand-action);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.d-m-b-g svg {
    flex-shrink: 0;
}

.d-m-b-outline {
    flex: 1;
    height: 50px;
    background-color: #fff;
    color:var(--brand-text);
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid var(--brand-action);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.d-m-b-outline svg {
    flex-shrink: 0;
    fill: var(--brand-action); /* 재생 아이콘의 내부 색상 */
}

.d-m-b-w {
    flex: 1;
    height: 50px;
    background-color: #fff;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.d-m-b-w svg {
    margin-right: 0;
    flex-shrink: 0;
}

.d-m-b-w.subscribed {
    background-color: #4d4d4d;
    color: #fff;
    border-color: #4d4d4d;
}

.d-m-b-w.subscribed svg {
    color: #fff;
}

.de-mn-list {
    width: 100%;
}

.de-mn-list-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #E0E0E0;
}

.de-mn-list-title h1 {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.de-mn-list-title div a {
    font-size: 14px;
    color: #666;
    margin-left: 20px;
}

.de-mn-list-box {
    width: 100%;
}

.de-mn-list-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.de-mn-list-text p {
    font-size: 14px;
    color: #00C853;
}

.de-mn-list-text div {
    display: flex;
    align-items: center;
}

.de-mn-list-text div img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-left: 10px;
}

.de-mn-list-text div svg {
    margin-left: 10px;
}

.de-mn-list ul {
    width: 100%;
}

.de-mn-list ul li {
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
}

.de-mn-list ul li a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.de-mn-list ul li a img {
    width: 100px;
    margin-right: 10px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}



.de-mn-list ul li a div h1 {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    display: flex;
    align-items: center;
}

.de-mn-list ul li a div h1 span {
    font-size: 14px;
    color: #fff;
    background-color: var(--brand-action);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 10px;
}

.de-mn-list ul li a div p {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.de-mn-list ul li a div p svg {
    margin-right: 5px;
}
}

@media (max-width: 1200px) {
    .d-m-b-w,
    .d-m-b-g{
        width: 100% !important;
    }   
    
}
html[data-theme="dark"] .d-m-t-t h1{ color: #fff }
html[data-theme="dark"] .de-mn-list-title h1{ color: #fff }
html[data-theme="dark"] .d-m-t-b a{ background:#424242; color:#fff }
html[data-theme="dark"] .episode-info div h1{ color: #fff !important }
html[data-theme="dark"] .de-mn-list ul li{ border-bottom: 1px solid #424242 }

/* 버튼 다크모드 추가 */
html[data-theme="dark"] .d-m-b-outline {
    background-color: transparent;
    color:var(--brand-text);
    border-color: var(--brand-action);
}
html[data-theme="dark"] .d-m-b-outline svg {
    stroke: var(--brand-action);
}
html[data-theme="dark"] .d-m-b-w {
    background-color: #2a2a2a;
    color: #eee;
    border-color: #444;
}

/* White artwork/action panel, separate from the episode list. */
.detail-mana-summary { padding: 24px; margin-bottom: 24px; border-radius: 14px; background: #fff; color: #222; }
.detail-mana-summary .detail-mana-btn { padding-bottom: 0; }
.detail-mana-summary .episode-sort { flex: 0 0 140px; height: 50px; }
html[data-theme="dark"] .detail-mana-summary .d-m-t-t h1 { color: #222; }
html[data-theme="dark"] .detail-mana-summary .d-m-t-b a { background: #f5f5f5; color: #666; }
html[data-theme="dark"] .detail-mana-summary .d-m-b-outline { background: #fff; color:var(--brand-text); }
html[data-theme="dark"] .detail-mana-summary .d-m-b-w:not(.subscribed) { background: #fff; color: #222; border-color: #ddd; }
@media (max-width: 768px) {
    .detail-mana-summary { padding: 18px; }
    .detail-mana-summary .detail-mana-btn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-mana-summary .episode-sort { width: 100%; }
    .detail-mana-summary .detail-mana-btn > * { font-size: 14px; min-width: 0; }
}