/* ===================================================================
   ██████╗  PART 5. 首页核心组件 (每日一句 & 幻灯片)
   =================================================================== */

/* ==============================================
   每日一句 (Daily Quote) - 终极加权修复版 (Style.css 专用)
   说明：增加了 html 前缀以提升优先级，解决在 style.css 不生效的问题
   ============================================== */

/* 1. 外框容器设置 (Box) */
html body .daily-quote-box {         /* <--- 逗号去掉了，大括号留在后面 */
    
    /* --- 边框与背景 --- */
    background-color: #ffffff !important;   /* 背景颜色 */
    border: 1px solid #f0f0f0 !important;   /* 边框线条：1px 浅灰 */
    border-radius: 8px !important;          /* 圆角大小 */

    /* --- 文字离边框的距离 (内边距) --- */
    padding-top: 25px !important;    
    padding-bottom: 4px !important;  /* 底部留白 */
    padding-left: 15px !important;   /* 左侧留白 */
    padding-right: 12px !important;  /* 右侧留白 */
    
    /* --- 布局方式 --- */
    display: flex !important;
    flex-direction: column !important; /* 垂直排列 */

    /* --- 让盒子永远居中 (变窄后需要这个) --- */
    margin-left: auto !important;
    margin-right: auto !important;

    /* --- 每日一句离下面幻灯片的距离 --- */
    margin-bottom: 40px !important;  /* 数字越大，离下面越远 */
}

/* 2. 第一行：韩语原文 (Korean) */
html body .daily-quote-box .korean-quote {
    /* --- 位置控制 (关键) --- */
    /* ★ 加了 html 前缀，强迫浏览器执行这个距离 */
    margin-top: 20px !important;      
    margin-bottom: 10px !important;   
    
    /* --- 字体样式 --- */
    font-family: "Gowun Dodum", sans-serif !important; 
    font-weight: 400 !important;      
    line-height: 1.3 !important;      
    letter-spacing: 0.5px !important; 
    color: #000000 !important;        
    
    /* 防止 display 属性被干扰 */
    display: block !important;
}

/* 3. 第二行：中文翻译 (Chinese) */
html body .daily-quote-box .chinese-translation {
    /* --- 位置控制 --- */
    margin-top: 0 !important;
    margin-bottom: 3px !important;    
    
    /* --- 字体样式 --- */
    font-weight: 400 !important;      
    line-height: 1 !important;        
    color: #555555 !important;        
    
    display: block !important;
}

/* 4. 第三行：来源/剧名 (Source) */
html body .daily-quote-box .source {
    /* --- 位置控制 --- */
    align-self: flex-end !important;  /* flex-end=靠右 */
    margin-top: 0px !important;       
	
	/* ★【加这行！】把文字自带的“下巴”切掉 */
    margin-bottom: 0 !important; 
    
    /* --- 字体样式 --- */
    font-style: normal !important;    
    font-weight: 400 !important;      
    color: #999999 !important;        
    
    display: block !important;
}

/* ==============================================
   PART B. 宽度与字号控制 (电脑/手机分开调) - 已加权
   ============================================== */

/* --- 1. 电脑端 (屏幕宽度 ≥ 1024px) --- */
@media (min-width: 1024px) { 
    /* ★【电脑宽度调节】 */
    html body .daily-quote-box {     /* <--- 干净利落 */
        width: 550px !important;     
        max-width: 100% !important;
        
        /* ★【位置对齐控制：靠右】★ */
        margin-right: 0 !important;  
    }

    html body .daily-quote-box .korean-quote        { font-size: 24px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 16px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}

/* --- 2. 平板端 (屏幕宽度 768px 到 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .daily-quote-box {     /* <--- 干净利落 */
        /* ★【平板宽度】 */
        width: 500px !important;     
        max-width: 90% !important;   
        
        /* ★【位置对齐控制：靠右 10px】★ */
        margin-right: 10px !important;  
        
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .daily-quote-box .korean-quote        { font-size: 26px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 18px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}

/* --- 3. 手机端 (屏幕宽度 ≤ 767px) --- */
@media (max-width: 767px) { 
    /* ★【手机宽度调节】 */
    html body .daily-quote-box {     /* <--- 干净利落 */
        width: 90% !important;       
        
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .daily-quote-box .korean-quote        { font-size: 20px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 15px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}
/* ===================================================================
   幻灯片 (Ultimate Slider) - 最终加权修复版
   说明：
   1. 严格保留原始数据：圆角(20px/4px)，图片大小(80px/50px)。
   2. 修正平板显示逻辑：平板(竖屏)现在会显示电脑版大图，不再显示手机图。
   3. 间距控制：手机/平板左右留白 90%，缩略图全端靠右。
   =================================================================== */

/* --- 1. 幻灯片最外层容器 --- */
html body .ultimate-slider-wrapper {
    /* 离每日一句的距离 */
    margin-top: 20px !important;       
    
    /* 默认全宽 */
    width: 100% !important;
    max-width: 100% !important;
    
    /* 居中对齐 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 2. 主幻灯片区域 --- */
html body .ultimate-slider-wrapper .main-slides-swiper {
    position: relative;
    /* 还原原始圆角 20px */
    border-radius: 20px !important;   
    overflow: hidden;                 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* --- 3. 缩略图导航容器 --- */
html body .ultimate-slider-wrapper .thumbnail-nav-container { 
    display: flex;
    margin-top: 20px !important;      /* 还原原始间距 20px */
    gap: 4px !important;
    
    /* 强制靠右 */
    justify-content: flex-end !important; 
}

/* --- 4. 缩略图单个项 --- */
html body .ultimate-slider-wrapper .thumb-item { 
    cursor: pointer;
    border: 1px solid transparent !important;    
    transition: border-color 0.3s;
    
    /* 还原原始圆角 4px */
    border-radius: 4px !important;    
    
    overflow: hidden;
}

/* --- 5. 缩略图 - 激活状态 --- */
html body .ultimate-slider-wrapper .thumb-item.active { 
    /* 还原原始灰色边框 */
    border-color: #a6a6a6 !important;            
}

/* --- 6. 图片显示逻辑 (基础) --- */
.ultimate-slider-wrapper .desktop-version-img { display: block; width: 100%; height: auto; }
.ultimate-slider-wrapper .mobile-version-img { display: none; width: 100%; height: auto; }


/* ===================================================================
   PART B. 响应式控制 (电脑 / 平板 / 手机)
   =================================================================== */

/* --- 1. 电脑端 (PC: ≥ 1024px) --- */
@media (min-width: 1024px) { 
    /* 电脑端保持全宽，仅控制缩略图大小 */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 60px !important;      
        height: 60px !important;     
        object-fit: cover; 
    }
}

/* --- 2. 平板端 (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .ultimate-slider-wrapper {
        /* 平板端左右留白控制 (90%宽度) */
        width: 90% !important;      
    }

    /* 平板端缩略图大小 (过渡尺寸 60px) */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 60px !important;      
        height: 60px !important;     
        object-fit: cover; 
    }
}

/* --- 3. 手机端 (Mobile: ≤ 767px) --- */
/* ★ 关键修改：只有小于 767px 才切换为手机竖图，平板显示上面的电脑图 */
@media (max-width: 767px) { 
    
    /* 图片切换逻辑移动到这里 */
    .ultimate-slider-wrapper .desktop-version-img { display: none; }
    .ultimate-slider-wrapper .mobile-version-img { display: block; }
    
    html body .ultimate-slider-wrapper {
        /* 手机端左右留白控制 (90%宽度) */
        width: 95% !important;        
    }
    
    /* 手机端缩略图大小 (还原 50px) */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 50px !important;      
        height: 50px !important;     
        object-fit: cover; 
    }
}



/* ===================================================================
   ██████╗  PART 6. 首页右侧栏内容 (Right Sidebar Content)
   说明：包含继续学习卡片、文章列表等
   =================================================================== */

/* 6.1 通用白色卡片容器 */
.right-widget-box { 
    background: #fff; border: 1px solid #efefef; border-radius: 12px; padding: 15px; margin-bottom: 20px;
}

/* 6.2 “继续学习”功能卡片 */
.study-card-v2 { 
    display: flex; justify-content: space-between; align-items: center; padding: 20px !important;
}
.study-content-left { 
    display: flex; flex-direction: column; gap: 6px;
}
.study-meta-top { font-size: 12px; color: #888; font-weight: 500; }
.study-main-title { font-size: 15px; font-weight: 800; color: #000; line-height: 1.3; }
.study-mode-tag { 
    display: inline-flex; align-items: center; background: #e6f7ff; color: #0099ff; font-size: 11px; padding: 2px 8px; border-radius: 6px; width: fit-content; font-weight: 600;
}
.study-mode-tag .dot { width: 6px; height: 6px; background: #0099ff; border-radius: 50%; margin-right: 5px; }
.btn-continue-v2 { 
    background: #0f1419; color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.2s;
}
.btn-continue-v2:hover { background: #333; transform: translateY(-1px); }

/* 6.3 文章/播客列表模块 */
.media-header-top h3 { font-size: 18px; font-weight: 800; margin: 0 0 15px 0; color: #000; }
.media-filter-row { 
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; color: #000; font-weight: 600;
}
.filter-dropdown { 
    color: #666; cursor: pointer; display: flex; align-items: center; font-weight: 400; font-size: 12px;
}
.media-item { 
    display: flex; align-items: flex-start; margin-bottom: 15px; cursor: pointer;
}
.media-thumb { 
    width: 110px; height: 62px; border-radius: 6px; overflow: hidden; margin-right: 10px; flex-shrink: 0;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-info { 
    flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 62px;
}
.media-title { 
    font-size: 13px; font-weight: 500; color: #0f1419; line-height: 1.4; margin-bottom: 4px;
}
.media-tag { 
    display: inline-block; font-size: 10px; color: #ff4d4f; border: 1px solid #ff4d4f; padding: 0 3px; border-radius: 3px; width: fit-content;
}
.media-date { font-size: 11px; color: #999; }
.wv-right-footer { font-size: 12px; color: #aaa; text-align: left; margin-top: 15px; }
/* =======================================================
   PART 7. 首页右侧栏卡片样式 (复用 Dashboard 风格)
   ======================================================= */

/* 1. 统一卡片容器 */
.kp-unified-card { 
    background: #fff; 
    border-radius: 20px; 
    margin-bottom: 25px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
    overflow: hidden; 
}

/* 2. 标题栏 */
.kp-head-row { 
    padding: 15px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    border-bottom: 1px solid #F6F6F6; /* 默认展开，所以有底边框 */
    transition: 0.3s; 
}
.kp-title { font-size: 16px; font-weight: 600; color: #000; }
.kp-icon { width: 14px; height: 14px; transition: transform 0.3s; opacity: 0.6; }

/* 3. 内容区 */
.kp-body-content { padding: 15px; background: #fff; }

/* 4. 简单列表行 */
.kp-simple-row {
    display: flex; 
    gap: 10px; 
    margin-bottom: 25px; 
    cursor: pointer;
    align-items: center; 
    transition: opacity 0.2s;
}
.kp-simple-row:last-child { margin-bottom: 0; }
.kp-simple-row:hover { opacity: 0.8; }

/* 5. 缩略图盒子 */
.kp-simple-img-box {
    width: 110px; 
    height: 100px;
    border-radius: 8px; 
    overflow: hidden; 
    position: relative; 
    flex-shrink: 0;
    background: #f0f0f0;
}

/* 6. 标题 */
.kp-simple-title {
    font-size: 13px; 
    font-weight: 600; 
    line-height: 1.4; 
    color: #333;
    margin-bottom: 8px; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

/* 7. 标签 (第X期) */
.kp-simple-tag {
    padding: 2px 7px; 
    font-size: 10px;
    border: 1px solid #333;
    border-radius: 6px;
    color: #333;
    font-weight: 500;
    flex-shrink: 0;
    line-height: 1.2;
}

/* 8. 进度文字 */
.kp-simple-meta {
    font-size: 11px;
    white-space: nowrap;
}

/* 9. 进度条 */
.kp-prog-bar-bg {
    position: absolute; 
    bottom: 0; left: 0; right: 0;
    height: 3px; 
    background: rgba(0,0,0,0.3);
}
.kp-prog-bar-fill {
    height: 100%; 
    background: #35BAF3; 
    width: 0%; 
    border-radius: 0 3px 3px 0;
}
/* =========================================
   首页右侧栏：NEW 标签 & 日期样式
   ========================================= */

/* 1. NEW 标签 (复刻大卡片风格：粉底红字) */
.kp-home-new-badge {
    background: #FFF0F0; 
    color: #FF5252; 
    padding: 2px 8px; 
    border-radius: 8px; 
    font-size: 10px; 
    font-weight: 800; /* 加粗 */
    display: inline-block;
    line-height: 1.2;
}

/* 2. 普通日期样式 (灰色) */
.kp-home-date {
    font-size: 11px;
    color: #aaa;
}
/* =========================================
   首页底部弹窗样式 (Bottom Sheet)
   ========================================= */

/* 1. 遮罩层 */
.kp-modal-mask {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); 
    z-index: 999999999;
    display: none; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease-out !important;
    backdrop-filter: blur(2px); /* 稍微模糊一下背景 */
}
.kp-modal-mask.visible { display: flex; opacity: 1; }

/* 2. 弹窗面板 */
.kp-bottom-sheet.home-sheet {
    width: 100%; max-width: 600px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 15px 20px 30px 20px; /* 底部多留点白 */
    transform: translateY(100%);
    transition: transform 0.25s ease-out !important; 
    
    /* 高度自适应内容，不需要全屏 */
    height: auto; 
    max-height: 80vh;
}
.kp-modal-mask.visible .kp-bottom-sheet { transform: translateY(0); }

/* 3. 弹窗内的大卡片微调 */
/* 去掉卡片自带的阴影和边距，让它完美融入弹窗 */
.home-sheet .kp-full-item {
    box-shadow: none; 
    margin-bottom: 0; 
    padding: 0; /* 如果需要紧凑点 */
    border: none;
}
/* 3. 手机端特权 (更厚的底部 padding，适配全面屏) */
@media (max-width: 768px) {
    .kp-bottom-sheet.home-sheet {
        padding-bottom: 60px !important; /* 手机上留更多空隙 */
        max-height: 85vh !important;     /* 防止太高顶出屏幕 */
    }
}