/* BASIC css start */


/* page-hd */
#productPlan .page-hd { padding: 8px 15px 5px; background-color: #c9c9c9; }
#productPlan .page-hd h2 { color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; }
/* page-body */
#productPlan .page-body { padding-bottom: 80px; }
#productPlan .page-body .pick { margin-top: 10px; text-align: right; }
#productPlan .page-body .pick select { width: 320px; border: 1px solid #e9e9e9; }
#productPlan .page-body .clst { zoom: 1; overflow: hidden; margin-top: 10px; padding: 10px 7px 7px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#productPlan .page-body .clst li { float: left; margin-right: 15px; padding-left: 10px; background: url(/images/d3/modern_simple/common/bull_h2_sqr_gray.gif) no-repeat 0 45%; }
#productPlan .page-body .clst li a { display: block; white-space: nowrap; }
#productPlan .page-body .p-hd { position: relative; margin-top: 70px; border-bottom: 1px dotted #e5e5e5;  text-align:left;}
#productPlan .page-body .p-hd.mt-35 { margin-top: 35px; }
#productPlan .page-body .p-hd h3 { color: #333; font-size: 18px; font-weight: bold; letter-spacing: -1px; margin-bottom:14px; }
#productPlan .page-body .p-hd .top { position: absolute; top: 0; right: 5px; color: #5c5c5c; }
#productPlan .page-body .plst { zoom: 1; overflow: hidden; margin: 25px auto 0; }
#productPlan .page-body .prd-list .thumb { width: 100%; height: auto;}


#aside, #content{width: 100% !important;}
#contentWrap{width:100%; text-align:center;}
#productPlan .page-body .pick, #productPlan .page-body .prd-list, #productPlan .page-body .clst{width:1780px; margin:0 auto;}
#productPlan .page-body .pick{padding:10px 10px 10px 0;}
#productPlan .page-hd{display:none!important;}
.header_wrap .hd_cate_dmywrap{margin-bottom:0!important;}
#productPlan .page-body .pick select{line-height:unset!important; height:unset!important; padding:8px;}
.MK-product-icons{display:none;}
.dsc{font-weight:normal!important;}
.prd-list table .info{padding:20px 0!important;}


/* [공통] 필웰 기획전 비주얼 섹션 레이아웃 - 클래스 단독 정의 */
.fw-plan-visual-section {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background-color: #111;
    font-family: 'Pretendard', -apple-system, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* 배경 및 오버레이 */
.fw-v-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.fw-v-bg img { width: 100%; height: 100%; object-fit: cover; border: none !important; }
.fw-v-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: 0.3s; }

/* 중앙 콘텐츠 및 애니메이션 */
.fw-v-contents { position: relative; z-index: 10; max-width: 1780px; padding: 0 20px; box-sizing: border-box; }
.fw-v-contents-inner { animation: fwFadeUp 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fwFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* 텍스트 전용 클래스 (외부 CSS 간섭 차단용) */
.fw-v-label { display: inline-block; font-size: 14px; letter-spacing: 5px; margin-bottom: 25px !important; font-weight: 500; border: none !important; }
.fw-v-main-title { font-size: 80px; line-height: 1.1; font-weight: 200; margin: 0 0 35px 0 !important; letter-spacing: -1.5px; display: block; }
.fw-v-main-title .fw-v-bold { display: block; font-weight: 800; margin-top: 10px; }
.fw-v-sub-desc { font-size: 20px; font-weight: 300; line-height: 1.8; margin-bottom: 55px !important; word-break: keep-all; display: block; }

/* 태그 스타일 */
.fw-v-tags-wrap { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.fw-v-tag-item { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 22px; border-radius: 50px; font-size: 22px; display: inline-block; }

/* --- 테마 모드 --- */

/* 1. 다크 모드 */
.fw-plan-visual-section.dark-mode .fw-v-contents { color: #fff !important; }
.fw-plan-visual-section.dark-mode .fw-v-overlay { background: rgba(0,0,0,0.35); }
.fw-plan-visual-section.dark-mode .fw-v-label { color: rgba(255,255,255,0.9) !important; }
.fw-plan-visual-section.dark-mode .fw-v-sub-desc { color: rgba(255,255,255,0.8) !important; }
.fw-plan-visual-section.dark-mode .fw-v-tag-item { 
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3) !important; color: #fff !important; 
}

/* 2. 라이트 모드 */
.fw-plan-visual-section.light-mode .fw-v-contents { color: #111 !important; }
.fw-plan-visual-section.light-mode .fw-v-overlay { background: rgba(255,255,255,0.15); }
.fw-plan-visual-section.light-mode .fw-v-label { color: rgba(0,0,0,0.6) !important; }
.fw-plan-visual-section.light-mode .fw-v-sub-desc { color: rgba(0,0,0,0.7) !important; }
.fw-plan-visual-section.light-mode .fw-v-tag-item { 
    background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.1) !important; color: #111 !important; 
}

/* 반응형 */
@media (max-width: 1024px) { 
    .fw-plan-visual-section { height: 600px; } 
    .fw-v-main-title { font-size: 56px; } 
}
@media (max-width: 768px) { 
    .fw-plan-visual-section { height: 500px; } 
    .fw-v-main-title { font-size: 38px; } 
    .fw-v-sub-desc { font-size: 16px; } 
}

/* BASIC css end */