/* ═══════════════════════════════════════════════════════════════
   마골(마법 골렘) 팬페이지 - 메인 스타일시트
   assets/css/magol.css

   네이밍 규칙
   · class/id 구분자: _ (하이픈 금지)
   · 접두사: 앞글자 조합 축약  ex) magol_wrap → _mg_w
   · flex 우선 (grid 지양)
   · css var(:root) 금지 → 직접 값 명시
   · 상위 부모 → 하위 자식 순 작성
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   색상 팔레트 (Dark Fantasy / Diablo2 영감)
   메인 배경   : #0a0804  (심층 흑)
   서브 배경   : #120f0a  (짙은 갈흑)
   카드 배경   : #1a1510  (고대 석재)
   테두리      : #3d2e1e  (녹슨 청동)
   강조 테두리 : #7a4f1e  (오래된 금)
   주 텍스트   : #d4c4a0  (양피지 베이지)
   서브 텍스트 : #8a7a62  (색바랜 잉크)
   포인트      : #c41c1c  (핏빛 붉은)
   포인트 2    : #e8a020  (룬 황금)
   포인트 3    : #6a3fa0  (마법 보라)
   링크 Hover  : #ff4444  (화염 붉은)
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'NanumSquareRound', 'Pretendard', -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #d4c4a0;
    background-color: #0a0804;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Light Mode */
body._lm {
    color: #2a1e10;
    background-color: #f5f0e8;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT WRAPPER  (_mg_w)
   ═══════════════════════════════════════════════════════════════ */
._mg_w {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #0a0804;
    overflow-x: hidden;
}

._mg_w._lm {
    background-color: #f5f0e8;
}

._mg_w .inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
    margin: 0 auto;
}

/* 좌우 광고 여백 컨테이너 */
._mg_w ._ad_side_l,
._mg_w ._ad_side_r {
    position: fixed;
    top: 120px;
    width: calc((100vw - 1280px) / 2 - 10px);
    min-width: 120px;
    display: none;
}

._mg_w ._ad_side_l { left: 0; }
._mg_w ._ad_side_r { right: 0; }

/* ═══════════════════════════════════════════════════════════════
   HEADER  (_mg_hdr)
   ═══════════════════════════════════════════════════════════════ */
._mg_hdr {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: #0d0a06;
    border-bottom: 1px solid #3d2e1e;
}

._mg_hdr::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e8a020 50%, transparent);
    opacity: 0.4;
}

._mg_w._lm ._mg_hdr {
    background-color: #2a1e10;
    border-bottom-color: #7a4f1e;
}

._mg_hdr .inner {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

/* 로고 영역 */
._mg_hdr ._hdr_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

._mg_hdr ._hdr_logo > a {
    display: flex;
    align-items: center;
    gap: 10px;
}

._mg_hdr ._hdr_logo ._logo_img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

._mg_hdr ._hdr_logo ._logo_txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

._mg_hdr ._hdr_logo ._logo_txt ._lt_main {
    font-size: 18px;
    font-weight: 800;
    color: #e8a020;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

._mg_hdr ._hdr_logo ._logo_txt ._lt_sub {
    font-size: 10px;
    font-weight: 400;
    color: #8a7a62;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 네비게이션 */
._mg_hdr ._hdr_nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

._mg_hdr ._hdr_nav > ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 2px;
}

._mg_hdr ._hdr_nav > ul > li > a {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #8a7a62;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

._mg_hdr ._hdr_nav > ul > li > a:hover,
._mg_hdr ._hdr_nav > ul > li._active > a {
    color: #e8a020;
    background-color: rgba(232, 160, 32, 0.1);
}

._mg_w._lm ._mg_hdr ._hdr_nav > ul > li > a {
    color: #5a4a32;
}

._mg_w._lm ._mg_hdr ._hdr_nav > ul > li > a:hover,
._mg_w._lm ._mg_hdr ._hdr_nav > ul > li._active > a {
    color: #c41c1c;
    background-color: rgba(196, 28, 28, 0.1);
}

/* 헤더 우측 컨트롤 */
._mg_hdr ._hdr_ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
}

._mg_hdr ._hdr_ctrl ._hdr_search_btn,
._mg_hdr ._hdr_ctrl ._hdr_theme_btn,
._mg_hdr ._hdr_ctrl ._hdr_mob_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #3d2e1e;
    border-radius: 4px;
    background: transparent;
    color: #8a7a62;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

._mg_hdr ._hdr_ctrl ._hdr_search_btn:hover,
._mg_hdr ._hdr_ctrl ._hdr_theme_btn:hover,
._mg_hdr ._hdr_ctrl ._hdr_mob_btn:hover {
    border-color: #e8a020;
    color: #e8a020;
    background-color: rgba(232, 160, 32, 0.1);
}

._mg_hdr ._hdr_ctrl ._hdr_mob_btn {
    display: none;
}

/* 모바일 메뉴 */
._mg_hdr ._hdr_mob_nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    padding: 64px 20px 20px;
}

._mg_hdr ._hdr_mob_nav._open {
    display: flex;
}

._mg_hdr ._hdr_mob_nav > ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._mg_hdr ._hdr_mob_nav > ul > li > a {
    display: block;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #d4c4a0;
    border-bottom: 1px solid #3d2e1e;
    transition: color 0.2s;
}

._mg_hdr ._hdr_mob_nav > ul > li > a:hover {
    color: #e8a020;
}

._mg_hdr ._hdr_mob_nav ._mob_close {
    position: absolute;
    top: 14px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #d4c4a0;
    font-size: 24px;
    cursor: pointer;
}

/* 검색 드롭다운 */
._mg_hdr ._hdr_search_panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #120f0a;
    border-bottom: 1px solid #3d2e1e;
    padding: 16px 0;
    display: none;
}

._mg_hdr ._hdr_search_panel._open {
    display: block;
}

._mg_hdr ._hdr_search_panel .inner {
    display: flex;
    gap: 12px;
}

._mg_hdr ._hdr_search_panel ._sp_input {
    flex: 1;
    padding: 10px 16px;
    background-color: #1a1510;
    border: 1px solid #3d2e1e;
    border-radius: 4px;
    color: #d4c4a0;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

._mg_hdr ._hdr_search_panel ._sp_input:focus {
    border-color: #e8a020;
}

._mg_hdr ._hdr_search_panel ._sp_input::placeholder {
    color: #5a4a32;
}

._mg_hdr ._hdr_search_panel ._sp_btn {
    padding: 10px 20px;
    background-color: #c41c1c;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

._mg_hdr ._hdr_search_panel ._sp_btn:hover {
    background-color: #a01616;
}

/* ═══════════════════════════════════════════════════════════════
   HERO / 히어로 배너  (_mg_hero)
   ═══════════════════════════════════════════════════════════════ */
._mg_hero {
    position: relative;
    width: 100%;
    padding: 60px 0 40px;
    background-color: #0d0a06;
    overflow: hidden;
}

._mg_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 50% 120%, rgba(196, 28, 28, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 50% 100%, rgba(232, 160, 32, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

._mg_hero .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

._mg_hero ._hero_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background-color: rgba(196, 28, 28, 0.2);
    border: 1px solid rgba(196, 28, 28, 0.4);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #c41c1c;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

._mg_hero ._hero_title {
    font-size: 42px;
    font-weight: 900;
    color: #e8a020;
    line-height: 1.1;
    letter-spacing: -1px;
    text-shadow: 0 0 40px rgba(232, 160, 32, 0.3);
}

._mg_hero ._hero_sub {
    font-size: 16px;
    color: #8a7a62;
    max-width: 500px;
}

._mg_hero ._hero_stats {
    display: flex;
    flex-flow: row nowrap;
    gap: 32px;
    margin-top: 8px;
}

._mg_hero ._hero_stats ._hs_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

._mg_hero ._hero_stats ._hs_item ._hs_num {
    font-size: 28px;
    font-weight: 800;
    color: #e8a020;
}

._mg_hero ._hero_stats ._hs_item ._hs_label {
    font-size: 11px;
    color: #8a7a62;
    letter-spacing: 0.5px;
}

/* 장식선 */
._mg_hero ._hero_deco {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3d2e1e 30%, #7a4f1e 50%, #3d2e1e 70%, transparent);
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   오늘의 추천 영상  (_mg_feat)
   ═══════════════════════════════════════════════════════════════ */
._mg_feat {
    padding: 40px 0;
}

._mg_feat ._sec_ttl {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

._mg_feat ._sec_ttl ._st_deco {
    width: 3px;
    height: 22px;
    background-color: #c41c1c;
    border-radius: 2px;
    flex-shrink: 0;
}

._mg_feat ._sec_ttl ._st_txt {
    font-size: 20px;
    font-weight: 800;
    color: #d4c4a0;
}

._mg_feat ._feat_card {
    display: flex;
    flex-flow: row nowrap;
    gap: 24px;
    background-color: #120f0a;
    border: 1px solid #3d2e1e;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}

._mg_feat ._feat_card:hover {
    border-color: #7a4f1e;
}

._mg_feat ._feat_card ._fc_thumb {
    position: relative;
    width: 480px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

._mg_feat ._feat_card ._fc_thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

._mg_feat ._feat_card:hover ._fc_thumb > img {
    transform: scale(1.03);
}

._mg_feat ._feat_card ._fc_thumb ._fc_overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

._mg_feat ._feat_card:hover ._fc_thumb ._fc_overlay {
    opacity: 1;
}

._mg_feat ._feat_card ._fc_thumb ._fc_overlay ._play_icon {
    width: 60px;
    height: 60px;
    background-color: rgba(196, 28, 28, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform 0.2s;
}

._mg_feat ._feat_card:hover ._fc_thumb ._fc_overlay ._play_icon {
    transform: scale(1);
}

._mg_feat ._feat_card ._fc_info {
    flex: 1;
    padding: 28px 28px 28px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._mg_feat ._feat_card ._fc_info ._fi_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background-color: rgba(106, 63, 160, 0.2);
    border: 1px solid rgba(106, 63, 160, 0.4);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #a06ad4;
    letter-spacing: 0.5px;
    width: fit-content;
}

._mg_feat ._feat_card ._fc_info ._fi_title {
    font-size: 22px;
    font-weight: 800;
    color: #d4c4a0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._mg_feat ._feat_card ._fc_info ._fi_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

._mg_feat ._feat_card ._fc_info ._fi_tags ._tag {
    padding: 3px 10px;
    background-color: rgba(196, 28, 28, 0.15);
    border: 1px solid rgba(196, 28, 28, 0.3);
    border-radius: 4px;
    font-size: 11px;
    color: #c06060;
    font-weight: 600;
}

._mg_feat ._feat_card ._fc_info ._fi_meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #5a4a32;
}

._mg_feat ._feat_card ._fc_info ._fi_meta ._fm_item {
    display: flex;
    align-items: center;
    gap: 4px;
}

._mg_feat ._feat_card ._fc_info ._fi_btns {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_yt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background-color: #c41c1c;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_yt:hover {
    background-color: #a01616;
}

._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_req {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #3d2e1e;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #8a7a62;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_req:hover {
    border-color: #7a4f1e;
    color: #d4c4a0;
}

/* ═══════════════════════════════════════════════════════════════
   검색 필터  (_mg_srch)
   ═══════════════════════════════════════════════════════════════ */
._mg_srch {
    padding: 32px 0;
    background-color: #0d0a06;
    border-top: 1px solid #1e1810;
    border-bottom: 1px solid #1e1810;
}

._mg_srch .inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

._mg_srch ._srch_row {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 16px;
}

._mg_srch ._srch_row ._sr_label {
    flex-shrink: 0;
    width: 60px;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #8a7a62;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

._mg_srch ._srch_row ._sr_options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

._mg_srch ._srch_row ._sr_options ._opt_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background-color: #1a1510;
    border: 1px solid #3d2e1e;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #8a7a62;
    cursor: pointer;
    transition: all 0.2s;
}

._mg_srch ._srch_row ._sr_options ._opt_btn:hover {
    border-color: #7a4f1e;
    color: #d4c4a0;
}

._mg_srch ._srch_row ._sr_options ._opt_btn._sel {
    background-color: rgba(196, 28, 28, 0.2);
    border-color: #c41c1c;
    color: #ff8080;
}

/* 직업 버튼 (선택 시 직업별 색상) */
._mg_srch ._srch_row ._sr_options ._opt_btn._job_sel {
    background-color: rgba(232, 160, 32, 0.15);
    border-color: #e8a020;
    color: #e8a020;
}

._mg_srch ._srch_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #1e1810;
}

._mg_srch ._srch_bottom ._sb_result {
    font-size: 13px;
    color: #5a4a32;
}

._mg_srch ._srch_bottom ._sb_result span {
    color: #e8a020;
    font-weight: 700;
}

._mg_srch ._srch_bottom ._sb_reset {
    padding: 6px 16px;
    background-color: transparent;
    border: 1px solid #3d2e1e;
    border-radius: 4px;
    font-size: 12px;
    color: #5a4a32;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

._mg_srch ._srch_bottom ._sb_reset:hover {
    border-color: #7a4f1e;
    color: #8a7a62;
}

/* ═══════════════════════════════════════════════════════════════
   섹션 공통  (_mg_sec)
   ═══════════════════════════════════════════════════════════════ */
._mg_sec {
    padding: 48px 0;
}

._mg_sec ._sec_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

._mg_sec ._sec_head ._sh_left {
    display: flex;
    align-items: center;
    gap: 10px;
}

._mg_sec ._sec_head ._sh_left ._sh_deco {
    width: 3px;
    height: 22px;
    background-color: #e8a020;
    border-radius: 2px;
}

._mg_sec ._sec_head ._sh_left ._sh_txt {
    font-size: 20px;
    font-weight: 800;
    color: #d4c4a0;
}

._mg_sec ._sec_head ._sh_left ._sh_cnt {
    font-size: 13px;
    color: #5a4a32;
}

._mg_sec ._sec_head ._sh_more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #5a4a32;
    transition: color 0.2s;
}

._mg_sec ._sec_head ._sh_more:hover {
    color: #e8a020;
}

/* ═══════════════════════════════════════════════════════════════
   영상 카드 그리드  (_mg_vg)
   ═══════════════════════════════════════════════════════════════ */
._mg_vg {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

._mg_vg ._vg_item {
    width: calc((100% - 40px) / 3);
    min-width: 0;
}

/* 영상 카드  (_vc) */
._mg_vg ._vg_item ._vc {
    display: flex;
    flex-direction: column;
    background-color: #120f0a;
    border: 1px solid #2a1e10;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    cursor: pointer;
}

._mg_vg ._vg_item ._vc:hover {
    border-color: #7a4f1e;
    transform: translateY(-4px);
}

/* 썸네일 */
._mg_vg ._vg_item ._vc ._vc_thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0a0804;
}

._mg_vg ._vg_item ._vc ._vc_thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

._mg_vg ._vg_item ._vc:hover ._vc_thumb > img {
    transform: scale(1.06);
}

/* 썸네일 오버레이 */
._mg_vg ._vg_item ._vc ._vc_thumb ._vt_overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

._mg_vg ._vg_item ._vc:hover ._vc_thumb ._vt_overlay {
    opacity: 1;
}

._mg_vg ._vg_item ._vc ._vc_thumb ._vt_overlay ._vto_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

._mg_vg ._vg_item ._vc ._vc_thumb ._vt_overlay ._vto_inner ._btn_yt_sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background-color: #c41c1c;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    transition: background-color 0.2s;
}

._mg_vg ._vg_item ._vc ._vc_thumb ._vt_overlay ._vto_inner ._btn_yt_sm:hover {
    background-color: #a01616;
}

._mg_vg ._vg_item ._vc ._vc_thumb ._vt_overlay ._vto_inner ._btn_req_sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    gap: 5px;
    padding: 7px 14px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
    transition: background-color 0.2s;
    cursor: pointer;
}

/* 직업 뱃지 (썸네일 좌상단) */
._mg_vg ._vg_item ._vc ._vc_thumb ._vt_job {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(232, 160, 32, 0.4);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #e8a020;
    letter-spacing: 0.3px;
}

/* 즐겨찾기 버튼 (썸네일 우상단) */
._mg_vg ._vg_item ._vc ._vc_thumb ._vt_fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    opacity: 0;
    z-index: 2;
}

._mg_vg ._vg_item ._vc:hover ._vc_thumb ._vt_fav {
    opacity: 1;
}

._mg_vg ._vg_item ._vc ._vc_thumb ._vt_fav._faved {
    opacity: 1;
    border-color: #c41c1c;
    background-color: rgba(196, 28, 28, 0.3);
}

/* 카드 정보 영역 */
._mg_vg ._vg_item ._vc ._vc_info {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

._mg_vg ._vg_item ._vc ._vc_info ._vi_title {
    font-size: 14px;
    font-weight: 700;
    color: #d4c4a0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._mg_vg ._vg_item ._vc ._vc_info ._vi_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

._mg_vg ._vg_item ._vc ._vc_info ._vi_tags ._tag {
    padding: 2px 7px;
    background-color: rgba(196, 28, 28, 0.12);
    border: 1px solid rgba(196, 28, 28, 0.25);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #a05050;
}

._mg_vg ._vg_item ._vc ._vc_info ._vi_meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #5a4a32;
    margin-top: auto;
}

._mg_vg ._vg_item ._vc ._vc_info ._vi_meta ._vm_item {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Skeleton 로딩 */
._mg_vg ._vg_item ._vc._skeleton ._vc_thumb {
    background: linear-gradient(90deg, #1a1510 25%, #2a1e10 50%, #1a1510 75%);
    background-size: 200% 100%;
    animation: _skeleton_shine 1.5s infinite;
}

._mg_vg ._vg_item ._vc._skeleton ._vi_title {
    height: 14px;
    width: 80%;
    background: linear-gradient(90deg, #1a1510 25%, #2a1e10 50%, #1a1510 75%);
    background-size: 200% 100%;
    animation: _skeleton_shine 1.5s infinite;
    border-radius: 3px;
    color: transparent;
}

@keyframes _skeleton_shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   탭 헤더 (인기/최신)  (_mg_tab)
   ═══════════════════════════════════════════════════════════════ */
._mg_tab {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: 1px solid #2a1e10;
    margin-bottom: 24px;
}

._mg_tab ._tab_btn {
    padding: 12px 20px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 700;
    color: #5a4a32;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

._mg_tab ._tab_btn:hover {
    color: #8a7a62;
}

._mg_tab ._tab_btn._active {
    color: #e8a020;
    border-bottom-color: #e8a020;
}

/* ═══════════════════════════════════════════════════════════════
   페이지네이션  (_mg_paging)
   ═══════════════════════════════════════════════════════════════ */
._mg_paging {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

._mg_paging > ul {
    display: flex;
    flex-flow: row nowrap;
    gap: 4px;
    align-items: center;
}

._mg_paging > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background-color: #1a1510;
    border: 1px solid #2a1e10;
    border-radius: 4px;
    font-size: 13px;
    color: #8a7a62;
    transition: all 0.2s;
}

._mg_paging > ul > li > a:hover,
._mg_paging > ul > li._active > a {
    background-color: rgba(196, 28, 28, 0.2);
    border-color: #c41c1c;
    color: #ff8080;
}

._mg_paging > ul > li._ellipsis {
    color: #3d2e1e;
    font-size: 14px;
    width: 24px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   링크 섹션  (_mg_links)
   ═══════════════════════════════════════════════════════════════ */
._mg_links {
    padding: 40px 0;
    border-top: 1px solid #1e1810;
}

._mg_links .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

._mg_links ._lk_title {
    font-size: 18px;
    font-weight: 800;
    color: #d4c4a0;
    display: flex;
    align-items: center;
    gap: 10px;
}

._mg_links ._lk_title::before {
    content: '';
    display: block;
    width: 3px;
    height: 20px;
    background-color: #6a3fa0;
    border-radius: 2px;
}

._mg_links ._lk_grid {
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
}

._mg_links ._lk_grid ._lk_item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: #120f0a;
    border: 1px solid #2a1e10;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #8a7a62;
    transition: all 0.2s;
}

._mg_links ._lk_grid ._lk_item:hover {
    border-color: #6a3fa0;
    color: #c09ad4;
    background-color: rgba(106, 63, 160, 0.1);
}

._mg_links ._lk_grid ._lk_item ._lk_icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

._mg_links ._lk_grid ._lk_item:hover ._lk_icon {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   광고 슬롯  (_mg_ad)
   ═══════════════════════════════════════════════════════════════ */
._mg_ad {
    display: block;
    width: 100%;
    min-height: 90px;
    background-color: #0d0a06;
    border: 1px dashed #2a1e10;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
}

._mg_ad._ad_top      { margin: 0 0 24px; }
._mg_ad._ad_mid      { margin: 24px 0; }
._mg_ad._ad_bottom   { margin: 24px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   푸터  (_mg_ftr)
   ═══════════════════════════════════════════════════════════════ */
._mg_ftr {
    background-color: #060402;
    border-top: 1px solid #1e1810;
    padding: 32px 0;
    margin-top: 48px;
}

._mg_ftr .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

._mg_ftr ._ftr_top {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

._mg_ftr ._ftr_top ._ft_logo {
    font-size: 16px;
    font-weight: 800;
    color: #e8a020;
}

._mg_ftr ._ftr_top ._ft_desc {
    font-size: 12px;
    color: #3d2e1e;
    max-width: 400px;
    line-height: 1.8;
}

._mg_ftr ._ftr_top ._ft_links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._mg_ftr ._ftr_top ._ft_links > a {
    font-size: 12px;
    color: #5a4a32;
    transition: color 0.2s;
}

._mg_ftr ._ftr_top ._ft_links > a:hover {
    color: #8a7a62;
}

._mg_ftr ._ftr_bottom {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid #1e1810;
    font-size: 11px;
    color: #3d2e1e;
}

._mg_ftr ._ftr_bottom ._fb_copy {
    line-height: 1.6;
}

._mg_ftr ._ftr_bottom ._fb_disclaimer {
    font-size: 10px;
    text-align: right;
    max-width: 300px;
}

/* ═══════════════════════════════════════════════════════════════
   TOP 버튼  (_mg_top)
   ═══════════════════════════════════════════════════════════════ */
._mg_top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #c41c1c;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s, background-color 0.2s;
}

._mg_top._visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

._mg_top:hover {
    background-color: #a01616;
}

/* ═══════════════════════════════════════════════════════════════
   모달 (수정 요청)  (_mg_modal)
   ═══════════════════════════════════════════════════════════════ */
._mg_modal_bg {
    position: fixed;
    inset: 0;
    z-index: 300;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

._mg_modal_bg._open {
    opacity: 1;
    pointer-events: auto;
}

._mg_modal_bg ._modal_box {
    width: 100%;
    max-width: 480px;
    background-color: #1a1510;
    border: 1px solid #3d2e1e;
    border-radius: 8px;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform 0.25s;
}

._mg_modal_bg._open ._modal_box {
    transform: translateY(0);
}

._mg_modal_bg ._modal_box ._mb_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #2a1e10;
}

._mg_modal_bg ._modal_box ._mb_head ._mbh_title {
    font-size: 16px;
    font-weight: 700;
    color: #d4c4a0;
}

._mg_modal_bg ._modal_box ._mb_head ._mbh_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #5a4a32;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

._mg_modal_bg ._modal_box ._mb_head ._mbh_close:hover {
    color: #d4c4a0;
}

._mg_modal_bg ._modal_box ._mb_body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

._mg_modal_bg ._modal_box ._mb_body ._mbb_label {
    font-size: 12px;
    font-weight: 700;
    color: #8a7a62;
    letter-spacing: 0.5px;
}

._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 14px;
    background-color: #120f0a;
    border: 1px solid #2a1e10;
    border-radius: 4px;
    color: #d4c4a0;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea:focus {
    border-color: #e8a020;
}

._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea::placeholder {
    color: #3d2e1e;
}

._mg_modal_bg ._modal_box ._mb_foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #2a1e10;
}

._mg_modal_bg ._modal_box ._mb_foot ._mf_cancel {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid #2a1e10;
    border-radius: 4px;
    font-size: 13px;
    color: #5a4a32;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

._mg_modal_bg ._modal_box ._mb_foot ._mf_cancel:hover {
    border-color: #3d2e1e;
    color: #8a7a62;
}

._mg_modal_bg ._modal_box ._mb_foot ._mf_submit {
    padding: 8px 20px;
    background-color: #c41c1c;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

._mg_modal_bg ._modal_box ._mb_foot ._mf_submit:hover {
    background-color: #a01616;
}

/* ═══════════════════════════════════════════════════════════════
   다크모드 전환 트랜지션
   ═══════════════════════════════════════════════════════════════ */
._mg_w,
._mg_hdr,
._mg_hero,
._mg_srch,
._mg_sec,
._mg_ftr,
._mg_vg ._vg_item ._vc,
._mg_feat ._feat_card {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* 사이드 광고: 1600px 이상 */
@media (min-width: 1600px) {
    ._mg_w ._ad_side_l,
    ._mg_w ._ad_side_r {
        display: block;
    }
}

/* 1024px 이하 */
@media (max-width: 1024px) {
    ._mg_vg ._vg_item {
        width: calc((100% - 20px) / 2);
    }

    ._mg_feat ._feat_card {
        flex-direction: column;
    }

    ._mg_feat ._feat_card ._fc_thumb {
        width: 100%;
    }

    ._mg_feat ._feat_card ._fc_info {
        padding: 20px;
    }
}

/* 768px 이하 */
@media (max-width: 768px) {
    ._mg_hdr ._hdr_nav {
        display: none;
    }

    ._mg_hdr ._hdr_ctrl ._hdr_mob_btn {
        display: flex;
    }

    ._mg_hero ._hero_title {
        font-size: 28px;
    }

    ._mg_hero ._hero_stats {
        gap: 20px;
    }

    ._mg_hero ._hero_stats ._hs_item ._hs_num {
        font-size: 22px;
    }

    ._mg_vg ._vg_item {
        width: calc((100% - 12px) / 2);
    }

    ._mg_vg {
        gap: 12px;
    }

    ._mg_srch ._srch_row {
        flex-direction: column;
        gap: 10px;
    }

    ._mg_srch ._srch_row ._sr_label {
        width: auto;
        padding-top: 0;
    }

    ._mg_ftr ._ftr_top {
        flex-direction: column;
    }

    ._mg_ftr ._ftr_bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    ._mg_ftr ._ftr_bottom ._fb_disclaimer {
        text-align: center;
        max-width: none;
    }
}

/* 480px 이하 */
@media (max-width: 480px) {
    ._mg_w .inner {
        padding: 0 14px;
    }

    ._mg_vg ._vg_item {
        width: 100%;
    }

    ._mg_hero ._hero_title {
        font-size: 24px;
    }

    ._mg_hdr .inner {
        height: 56px;
    }

    ._mg_tab ._tab_btn {
        padding: 10px 14px;
        font-size: 14px;
    }
}
/* ═══════════════════════════════════════════════════════════════
   마골 팬페이지 - 테마 CSS (다크/라이트 명확 구분)
   assets/css/magol_theme.css

   다크(기본) : 디아블로2 Dark Fantasy
   라이트     : sir.kr 스타일 - 밝고 깔끔한 회색 베이스
   ═══════════════════════════════════════════════════════════════

   라이트모드 색상
   페이지 배경  : #eef0f4  (밝은 청회색)
   헤더 배경    : #ffffff
   카드 배경    : #ffffff
   서브 카드    : #f4f6fa
   테두리       : #dde1ea
   주 텍스트    : #1a1d27
   서브 텍스트  : #5a6070
   포인트 레드  : #c41c1c
   포인트 골드  : #b8860b
   링크 색      : #2563eb
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   라이트모드 - 전체 덮어쓰기
   ._mg_w._lm 하위 모든 컴포넌트
   ═══════════════════════════════════════════════════════════════ */

/* 기본 body */
body._lm {
    color: #1a1d27;
    background-color: #eef0f4;
}

/* ── 래퍼 ─────────────────────────────────────────────────────── */
._mg_w._lm {
    background-color: #eef0f4;
}

/* ── 헤더 ─────────────────────────────────────────────────────── */
._mg_w._lm ._mg_hdr {
    background-color: #ffffff;
    border-bottom: 1px solid #dde1ea;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

._mg_w._lm ._mg_hdr::after {
    display: none;
}

._mg_w._lm ._mg_hdr ._hdr_logo ._logo_txt ._lt_main {
    color: #c41c1c;
}

._mg_w._lm ._mg_hdr ._hdr_logo ._logo_txt ._lt_sub {
    color: #8a95a8;
}

._mg_w._lm ._mg_hdr ._hdr_nav > ul > li > a {
    color: #3a4050;
}

._mg_w._lm ._mg_hdr ._hdr_nav > ul > li > a:hover,
._mg_w._lm ._mg_hdr ._hdr_nav > ul > li._active > a {
    color: #c41c1c;
    background-color: rgba(196,28,28,0.07);
}

._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_search_btn,
._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_theme_btn,
._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_mob_btn {
    border-color: #dde1ea;
    color: #5a6070;
    background: #f4f6fa;
}

._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_search_btn:hover,
._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_theme_btn:hover,
._mg_w._lm ._mg_hdr ._hdr_ctrl ._hdr_mob_btn:hover {
    border-color: #c41c1c;
    color: #c41c1c;
    background-color: rgba(196,28,28,0.07);
}

._mg_w._lm ._mg_hdr ._hdr_search_panel {
    background-color: #ffffff;
    border-bottom: 1px solid #dde1ea;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

._mg_w._lm ._mg_hdr ._hdr_search_panel ._sp_input {
    background-color: #f4f6fa;
    border-color: #dde1ea;
    color: #1a1d27;
}

._mg_w._lm ._mg_hdr ._hdr_search_panel ._sp_input::placeholder {
    color: #8a95a8;
}

._mg_w._lm ._mg_hdr ._hdr_mob_nav {
    background-color: rgba(255,255,255,0.97);
}

._mg_w._lm ._mg_hdr ._hdr_mob_nav > ul > li > a {
    color: #1a1d27;
    border-bottom-color: #dde1ea;
}

/* ── 히어로 ───────────────────────────────────────────────────── */
._mg_w._lm ._mg_hero {
    background-color: #ffffff;
    border-bottom: 1px solid #dde1ea;
}

._mg_w._lm ._mg_hero::before {
    background:
        radial-gradient(ellipse 60% 80% at 50% 120%, rgba(196,28,28,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 50% 100%, rgba(184,134,11,0.04) 0%, transparent 60%);
}

._mg_w._lm ._mg_hero ._hero_badge {
    background-color: rgba(196,28,28,0.08);
    border-color: rgba(196,28,28,0.2);
    color: #c41c1c;
}

._mg_w._lm ._mg_hero ._hero_title {
    color: #1a1d27;
    text-shadow: none;
}

._mg_w._lm ._mg_hero ._hero_sub {
    color: #5a6070;
}

._mg_w._lm ._mg_hero ._hero_stats ._hs_item ._hs_num {
    color: #c41c1c;
}

._mg_w._lm ._mg_hero ._hero_stats ._hs_item ._hs_label {
    color: #8a95a8;
}

._mg_w._lm ._mg_hero ._hero_deco {
    background: linear-gradient(90deg, transparent, #dde1ea 30%, #c8cdd8 50%, #dde1ea 70%, transparent);
}

/* ── 검색 필터 ────────────────────────────────────────────────── */
._mg_w._lm ._mg_srch {
    background-color: #f4f6fa;
    border-top-color: #dde1ea;
    border-bottom-color: #dde1ea;
}

._mg_w._lm ._mg_srch ._srch_row ._sr_label {
    color: #8a95a8;
}

._mg_w._lm ._mg_srch ._srch_row ._sr_options ._opt_btn {
    background-color: #ffffff;
    border-color: #dde1ea;
    color: #3a4050;
}

._mg_w._lm ._mg_srch ._srch_row ._sr_options ._opt_btn:hover {
    border-color: #c41c1c;
    color: #c41c1c;
}

._mg_w._lm ._mg_srch ._srch_row ._sr_options ._opt_btn._sel {
    background-color: rgba(196,28,28,0.08);
    border-color: #c41c1c;
    color: #c41c1c;
}

._mg_w._lm ._mg_srch ._srch_row ._sr_options ._opt_btn._job_sel {
    background-color: rgba(184,134,11,0.08);
    border-color: #b8860b;
    color: #b8860b;
}

._mg_w._lm ._mg_srch ._srch_bottom {
    border-top-color: #dde1ea;
}

._mg_w._lm ._mg_srch ._srch_bottom ._sb_result {
    color: #8a95a8;
}

._mg_w._lm ._mg_srch ._srch_bottom ._sb_result span {
    color: #c41c1c;
}

._mg_w._lm ._mg_srch ._srch_bottom ._sb_reset {
    border-color: #dde1ea;
    color: #8a95a8;
    background: #ffffff;
}

/* ── 섹션 ─────────────────────────────────────────────────────── */
._mg_w._lm ._mg_sec ._sec_head ._sh_left ._sh_deco {
    background-color: #c41c1c;
}

._mg_w._lm ._mg_sec ._sec_head ._sh_left ._sh_txt {
    color: #1a1d27;
}

._mg_w._lm ._mg_sec ._sec_head ._sh_left ._sh_cnt {
    color: #8a95a8;
}

._mg_w._lm ._mg_sec ._sec_head ._sh_more {
    color: #8a95a8;
}

._mg_w._lm ._mg_sec ._sec_head ._sh_more:hover {
    color: #c41c1c;
}

/* ── 탭 ───────────────────────────────────────────────────────── */
._mg_w._lm ._mg_tab {
    border-bottom-color: #dde1ea;
}

._mg_w._lm ._mg_tab ._tab_btn {
    color: #8a95a8;
}

._mg_w._lm ._mg_tab ._tab_btn:hover {
    color: #3a4050;
}

._mg_w._lm ._mg_tab ._tab_btn._active {
    color: #c41c1c;
    border-bottom-color: #c41c1c;
}

/* ── 영상 카드 ────────────────────────────────────────────────── */
._mg_w._lm ._mg_vg ._vg_item ._vc {
    background-color: #ffffff;
    border-color: #dde1ea;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

._mg_w._lm ._mg_vg ._vg_item ._vc:hover {
    border-color: #c41c1c;
    box-shadow: 0 4px 16px rgba(196,28,28,0.12);
}

._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_thumb {
    background-color: #f4f6fa;
}

._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_thumb ._vt_job {
    background-color: rgba(255,255,255,0.92);
    border-color: rgba(196,28,28,0.3);
    color: #c41c1c;
}

._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_info ._vi_title {
    color: #1a1d27;
}

._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_info ._vi_tags ._tag {
    background-color: rgba(196,28,28,0.07);
    border-color: rgba(196,28,28,0.2);
    color: #c41c1c;
}

._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_info ._vi_meta {
    color: #8a95a8;
}

/* 영상 타입 뱃지 */
._mg_w._lm ._mg_vg ._vg_item ._vc ._vc_thumb ._vt_type {
    background-color: rgba(37,99,235,0.85);
    color: #ffffff;
}

/* ── 추천 영상 ────────────────────────────────────────────────── */
._mg_w._lm ._mg_feat ._feat_card {
    background-color: #ffffff;
    border-color: #dde1ea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

._mg_w._lm ._mg_feat ._feat_card:hover {
    border-color: #c41c1c;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_badge {
    background-color: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.2);
    color: #2563eb;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_title {
    color: #1a1d27;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_tags ._tag {
    background-color: rgba(196,28,28,0.07);
    border-color: rgba(196,28,28,0.2);
    color: #c41c1c;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_meta {
    color: #8a95a8;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_req {
    border-color: #dde1ea;
    color: #5a6070;
    background: #f4f6fa;
}

._mg_w._lm ._mg_feat ._feat_card ._fc_info ._fi_btns ._btn_req:hover {
    border-color: #c41c1c;
    color: #c41c1c;
}

/* ── 페이지네이션 ─────────────────────────────────────────────── */
._mg_w._lm ._mg_paging > ul > li > a {
    background-color: #ffffff;
    border-color: #dde1ea;
    color: #5a6070;
}

._mg_w._lm ._mg_paging > ul > li > a:hover,
._mg_w._lm ._mg_paging > ul > li._active > a {
    background-color: #c41c1c;
    border-color: #c41c1c;
    color: #ffffff;
}

._mg_w._lm ._mg_paging > ul > li._ellipsis {
    color: #8a95a8;
}

/* ── 링크 섹션 ────────────────────────────────────────────────── */
._mg_w._lm ._mg_links {
    border-top-color: #dde1ea;
}

._mg_w._lm ._mg_links ._lk_title {
    color: #1a1d27;
}

._mg_w._lm ._mg_links ._lk_title::before {
    background-color: #2563eb;
}

._mg_w._lm ._mg_links ._lk_grid ._lk_item {
    background-color: #ffffff;
    border-color: #dde1ea;
    color: #3a4050;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

._mg_w._lm ._mg_links ._lk_grid ._lk_item:hover {
    border-color: #2563eb;
    color: #2563eb;
    background-color: rgba(37,99,235,0.05);
}

/* ── 광고 슬롯 ────────────────────────────────────────────────── */
._mg_w._lm ._mg_ad {
    background-color: #f4f6fa;
    border-color: #dde1ea;
}

/* ── TOP 버튼 ─────────────────────────────────────────────────── */
._mg_w._lm ._mg_top {
    background-color: #c41c1c;
}

/* ── 모달 ─────────────────────────────────────────────────────── */
._mg_w._lm ._mg_modal_bg ._modal_box {
    background-color: #ffffff;
    border-color: #dde1ea;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_head {
    border-bottom-color: #dde1ea;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_head ._mbh_title {
    color: #1a1d27;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_head ._mbh_close {
    color: #8a95a8;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_body ._mbb_label {
    color: #5a6070;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea {
    background-color: #f4f6fa;
    border-color: #dde1ea;
    color: #1a1d27;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea:focus {
    border-color: #c41c1c;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_body ._mbb_textarea::placeholder {
    color: #b0b8c8;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_foot {
    border-top-color: #dde1ea;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_foot ._mf_cancel {
    border-color: #dde1ea;
    color: #5a6070;
    background: #f4f6fa;
}

._mg_w._lm ._mg_modal_bg ._modal_box ._mb_foot ._mf_cancel:hover {
    border-color: #c8cdd8;
    color: #1a1d27;
}

/* ── 섹션 공통 타이틀 ─────────────────────────────────────────── */
._mg_w._lm ._mg_feat ._sec_ttl ._st_deco {
    background-color: #c41c1c;
}

._mg_w._lm ._mg_feat ._sec_ttl ._st_txt {
    color: #1a1d27;
}

/* ── 푸터 ─────────────────────────────────────────────────────── */
._mg_w._lm ._mg_ftr {
    background-color: #1a1d27;
    border-top-color: #2a2e3e;
}

._mg_w._lm ._mg_ftr ._ftr_top ._ft_logo {
    color: #e8a020;
}

._mg_w._lm ._mg_ftr ._ftr_top ._ft_desc {
    color: #8a95a8;
}

._mg_w._lm ._mg_ftr ._ftr_top ._ft_links > a {
    color: #5a6070;
}

._mg_w._lm ._mg_ftr ._ftr_top ._ft_links > a:hover {
    color: #8a95a8;
}

._mg_w._lm ._mg_ftr ._ftr_bottom {
    border-top-color: #2a2e3e;
    color: #5a6070;
}

/* ── Skeleton ─────────────────────────────────────────────────── */
._mg_w._lm ._mg_vg ._vg_item ._vc._skeleton ._vc_thumb,
._mg_w._lm ._mg_vg ._vg_item ._vc._skeleton ._vi_title {
    background: linear-gradient(90deg, #e8eaf0 25%, #f4f6fa 50%, #e8eaf0 75%);
    background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════════════
   영상 타입 뱃지 - 다크/라이트 공통
   ═══════════════════════════════════════════════════════════════ */
._vt_type {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
}

._vt_type._type_full    { background-color: rgba(196,28,28,0.85); }
._vt_type._type_summary { background-color: rgba(37,99,235,0.85); }
._vt_type._type_guide   { background-color: rgba(16,160,90,0.85); }
._vt_type._type_clip    { background-color: rgba(140,60,180,0.85); }
._vt_type._type_other   { background-color: rgba(90,96,112,0.85); }

/* ── 검색 필터 타입 버튼 ─────────────────────────────────────── */
._opt_btn._type_sel {
    background-color: rgba(37,99,235,0.15);
    border-color: #2563eb;
    color: #2563eb;
}

._mg_w._lm ._opt_btn._type_sel {
    background-color: rgba(37,99,235,0.1);
    border-color: #2563eb;
    color: #2563eb;
}

/* ─── 테마 전환 버튼 (헤더) ────────────────────────────────────── */
._hdr_theme_btn ._dm_ico,
._hdr_theme_btn ._lm_ico { display: none; }

body:not(._lm) ._hdr_theme_btn ._lm_ico { display: block; }
body._lm       ._hdr_theme_btn ._dm_ico  { display: block; }