﻿@charset "utf-8";

/*
 * Mobile weekly magazine / CSS-composed banner.
 *
 * Design:
 *   http://design.caedu.co.kr/2026/1020_weekly/m_board_list.html
 *   Reference stylesheet: /2026/1020_weekly/css/layout.css
 *
 * The banner uses T_BANNER.BGCOLOR and a decorative image from B_FILE.
 * Its four text lines are separate T_BANNER.WEEKLY_* fields.
 *
 * All rules are scoped to the mobile ContentVisual list. Shared navigation,
 * article cards, mobile detail pages and database code are unaffected.
 */

/* 1. Responsive slide frame: original mobile design is 66.67vw high. */
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr,
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .main_swiper {
    width: 100%;
    height: 66.67vw;
    overflow: hidden;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .swiper-wrapper,
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .swiper-slide {
    height: 100%;
}

/* 2. Decorated banner surface. The image is NOT a full-width <img>. */
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .cv-banner-link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7.78vw;
    background-repeat: no-repeat;
    background-size: 35.56vw 35.56vw;
    background-position: right 7.78vw top 27.5vw;
    box-sizing: border-box;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .cv-banner-link * {
    display: block;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .bnr_ctgy {
    color: #fff;
    font-size: 4.44vw;
    font-weight: 700;
    line-height: 1;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .bnr_main {
    margin-top: 3.33vw;
    color: #fff;
    font-size: 6.67vw;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr .bnr_sub {
    margin-top: 5vw;
    color: rgba(255, 255, 255, .7);
    font-size: 3.61vw;
    font-weight: 500;
    line-height: 1;
}

/* 3. Keep the text readable for light background colors set in the CRM.
      Darker backgrounds continue to use the reference's white typography. */
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-slide.cv-banner-light .bnr_ctgy,
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-slide.cv-banner-light .bnr_main {
    color: #253247;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-slide.cv-banner-light .bnr_sub {
    color: rgba(37, 50, 71, .78);
}

/* 4. Mobile page counter: on the lower LEFT, not the PC's lower right.
      No previous/next arrows in the supplied mobile design. */
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-indicator.has_paging {
    display: flex;
    position: absolute;
    right: auto;
    bottom: 7.78vw;
    left: 7.78vw;
    align-items: center;
    justify-content: center;
    gap: .83vw;
    width: 12.5vw;
    height: auto;
    margin: 0;
    padding: 1.11vw 2.22vw;
    border-radius: 27.5vw;
    background-color: rgba(0, 0, 0, .6);
    box-sizing: border-box;
    z-index: 2;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-indicator.has_paging .current,
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-indicator.has_paging .current + i,
.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-indicator.has_paging .total {
    color: rgba(255, 255, 255, .6);
    font-size: 2.5vw;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
}

.cv-weekly-mobile.cv-weekly-list .weekly_main_bnr
.swiper-indicator.has_paging .current {
    color: #fff;
    font-weight: 700;
}

/* The supplied reference uses vw through all widths; no 600px cap. */
