/* 1. 변수 설정 (색상 관리 끝) */
:root {
    --pink: #FF4D8D;
    --yellow: #FFD634;
    --gray-bg: #F6F8FB;
}

.inner_1440 { width: 1440px; margin: 0 auto; position: relative; }
.flex_center { display: flex; align-items: center; justify-content: center; }
.flex_between { display: flex; align-items: center; justify-content: space-between; }

.btn_base { 
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 25px; border-radius: 30px; font-weight: bold; cursor: pointer;
}
.btn_pink { background: var(--pink); color: #fff; }
.btn_white { border: 1px solid #fff; color: #fff; }

/*section { padding: 60px 0; }*/

/* --- 기본 설정 및 기존 PC 스타일 --- */
body { font-family: 'Yu Gothic UI', sans-serif; overflow-x: hidden; width: 100%;padding-top: 80px; }
/* PC에서는 1440px 고정, 모바일에서는 100% */
.inner_1440 { width: 1440px; margin: 0 auto; position: relative;}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }

ul, ol, li { list-style: none;}

a { text-decoration: none;
    color: inherit;}

/* 3. 제목 태그 폰트 크기 및 굵기 초기화 */
h1, h2, h3, h4, h5, h6 {
    font-size: 1rem;      /* 기본 크기로 통일 (필요시 나중에 수정) */
    font-weight: normal;  /* 기본 굵기 제거 */
}

/* 4. 버튼 및 입력창 스타일 초기화 *//* 헤더가 떴으므로 본문이 가려지지 않게 여백 추가 */
button, input, select, textarea {
    background: none;
    border: none;
    outline: none;       /* 클릭 시 생기는 파란색 테두리 제거 */
    cursor: pointer;     /* 버튼에 마우스 올리면 손가락 모양으로 */
    font-family: inherit; /* 부모 폰트 상속 */
}

/* 5. 이미지 정렬 및 초기화 */
img {
    display: block;      /* 하단 미세한 공백 제거 */
    max-width: 100%;     /* 부모 영역을 넘지 않게 설정 */
    border: 0;
}

/* 6. 테이블 테두리 겹침 방지 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}



.m_t10 {margin-top:10px !important;}
.m_t20 {margin-top:20px !important;}
.m_t30 {margin-top:30px !important;}
.m_t40 {margin-top:40px !important;}
.m_t50 {margin-top:50px !important;}
.m_t100 {margin-top:100px !important;}

.m_b10 {margin-bottom:10px!important;}
.m_b20 {margin-bottom:20px!important;}
.m_b30 {margin-bottom:30px!important;}
.m_b40 {margin-bottom:40px!important;}
.m_b50 {margin-bottom:50px!important;}
.m_b100 {margin-bottom:100px!important;}

.m_l10 {margin-left:10px!important;}
.m_l20 {margin-left:20px!important;}
.m_l30 {margin-left:30px!important;}
.m_l40 {margin-left:40px!important;}
.m_l50 {margin-left:50px!important;}
.m_l100 {margin-left:100px!important;}

.m_r10 {margin-right:10px!important;}
.m_r20 {margin-right:20px!important;}
.m_r30 {margin-right:30px!important;}
.m_r40 {margin-right:40px!important;}
.m_r50 {margin-right:50px;}
.m_r100 {margin-right:100px;}

.p0 {padding:0!important;}

.txt_c {text-align:center;}
.txt_l {text-align:left;}
.txt_r {text-align:right;}

/* --- Header 고정 및 정렬 --- */
header { 
    position: fixed; /* 고정 */
    top: 0; left: 0; 
    width: 100%; /* 전체 너비 */
    height: 80px; 
    background: #fff; 
    z-index: 1000; 
    transition: all 0.3s ease;
    border-bottom: 1px solid #eee;
    /* 내부 요소들이 가로로 배치되도록 설정 */
    display: flex;
    align-items: center;
}

h1.logo {width:137px;height:40px;}
h1.logo img {width:100%;}

/* 스크롤 시 반투명 상태 */
header.scrolled {
        background: rgb(255 255 255 / 50%) !important;
    backdrop-filter: blur(15px);
    height: 70px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 정렬이 깨지지 않게 inner_1440를 다시 정의 */
.header_flex { 
    display: flex !important; /* 강제 적용 */
    justify-content: space-between; 
    align-items: center; 
    width: 1440px; 
    margin: 0 auto; 
}

.pc_nav {}
.pc_nav a {font-size: 19px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    margin: 0 60px;}




/* --- 모바일 대응 (정렬 유지) --- */
@media (max-width: 1440px) {
    .header_flex { width: 100%; padding: 0 20px; }
}

.rt_search_area { position: relative; }
.rt_box { display: flex; align-items: center; padding: 5px 15px; border-radius: 20px; cursor: pointer; }
.line {display: inline-block;width: 1px;height: 10px;background: #333;margin: 0 11px;}
.rt_rolling { height: 20px; overflow: hidden; width: 180px; /*margin: 0 10px;*/}
.rt_track li { height: 20px; list-style: none; font-size: 14px; }
.rt_dropdown { display: none; position: absolute; top: 0; right: 0; width: 324px; background: #fff; border: 1px solid #ddd; z-index: 1000; padding: 15px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.rt_dropdown ol {padding:20px;line-height: 24px;font-weight: 400;}
.rt_dropdown ol li a {text-decoration: none;color:#404040;}
.rt_dropdown .dr_tit {display: flex;justify-content: space-between;}
.rt_dropdown .dr_tit button.dr_close {width:12px;background:none;border:none;}
.rt_dropdown .dr_tit button.dr_close img {width:100%;}
li span.up {color:#2365FF;font-size:7px;}
li span.down {color:#FF5555;font-size:7px;}
button.btn_rt_toggle {background:none;border:none;font-size:17px;color:#888888;font-weight:bold;}
.user_icon {background:#fff;border-radius:50%;padding:5px;width:38px;height:38px;}
.user_icon img {width:100%;padding:5px;}


/* --- 검색 섹션 --- */
.search_section { padding: 20px 0; background: #fff; }
.search_bar_container { 
    max-width: 800px; margin: 0 auto; 
    border: 2px solid #FFD634; border-radius: 40px; padding: 5px 10px 5px 30px;
}
.search_input_wrap { display: flex; align-items: center; height: 50px; }
.search_input_wrap input {flex: 1; border: none; outline: none; font-size: 18px; color: #999;}
.search_divider { width: 1px; height: 25px; background: #eee; margin: 0 20px; }
.btn_calendar_open { 
    background: none; border: none; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 10px;
}

/* --- 범용 모달 시스템 --- */
.modal_overlay { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 2000; align-items: center; justify-content: center; 
}
.modal_content { 
    background: #fff; border-radius: 30px; width: 450px; overflow: hidden; position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); animation: slideUp 0.4s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal_hd { padding: 30px; text-align: center; position: relative; }
.modal_hd h2 { font-size: 23px; font-weight: 400; }
.btn_modal_close { position: absolute; top: 25px; right: 25px; background: none; border: none; font-size: 24px; cursor: pointer; }

.modal_body { padding: 0 30px 30px; }
.cal_ctrl { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: bold; }
.cal_ctrl button {background: none;border: none;font-size: 21px;}
.cal_table { width: 100%; text-align: center; border-collapse: collapse; }
.cal_table th { padding: 10px 0; color: #666; font-size: 14px; }
.cal_table td { padding: 12px 0; cursor: pointer; border-radius: 50%; transition: 0.2s; }
.cal_table td:hover { background: #f0f0f0; }
.cal_table td.sat { color: #345EE9; }
.cal_table td.sun, .cal_table td.holiday { color: #FF4D8D; }
.cal_table td.today { background: #eee; font-weight: bold; border: 1px solid #ddd; }

.time_select_area { margin-top: 30px; display: flex; align-items: center; gap: 15px; }
.time_select { flex: 1; padding: 15px; border-radius: 10px; border: 1px solid #ddd; appearance: none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 15px center; }

.modal_ft { display: flex; gap: 10px; padding: 20px 30px 40px; }
.btn_reset { flex: 1; height: 60px; border: 1px solid #ddd; background: #fff; border-radius: 15px; font-weight: bold; }
.btn_apply { flex: 2; height: 60px; background: #FFD634; border: none; border-radius: 15px; font-weight: bold; font-size: 18px; }



/* Main Visual */
.main_visual { height: 500px; margin-top: 20px; border-radius: 40px; overflow: hidden; }
.slide_viewport { width: 100%; height: 100%; overflow: hidden; }
.main_slide_wrap { display: flex; width: 300%; height: 100%; transition: 0.5s ease-in-out; }
.slide_item { width: 1440px; height: 100%; padding: 80px; color: #fff; position: relative; flex-shrink: 0; }
.s1 {background: radial-gradient(circle at -20% -14%, #5B5220, rgb(28 28 28), #612447);}
.s1 .v_txt {text-align:center;}
.s1 .v_txt p {margin-top:15px;}
.s1 img {width: 410px;position: absolute;right: 0;bottom: 10px;}

.s2 { background: #345EE9; }

.s3 { background: #111; }

.v_btns {display: inline-block;text-align: center;margin: 50px 0 0 0;z-index: 3; position: sticky;}
.btn_pink { background: #FF4D8D; color: #fff; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-weight: bold;margin:10px;}
.btn_white { border: 1px solid #fff; color: #fff; padding: 15px 30px; border-radius: 30px; text-decoration: none; }
.main_visual .v_ctrl { position: absolute; bottom: 40px; left: 80px; display: flex; align-items: center; color: #fff; }
.gauge_bg { width: 200px; height: 2px; background: rgba(255,255,255,0.3); margin: 0 15px; }
.bar { width: 0%; height: 100%; background: #fff; }
.v_arrows {}
.v_arrows button {background:none;border:none;font-size:16px;color:#fff;}
.v_arrows button.m_pause {border-radius: 50%;width: 25px;height: 25px;}

/* Ranking / Review */
.sec_head {display: flex;padding: 0px 0 20px;flex-direction: column;}
.sec_head h3 {font-size:42px;letter-spacing:-3px;}
.sec_head h3 span.color_y {color:#FF9F0E;}
.rank_viewport, .rev_viewport { overflow: hidden; }
.sec_head .ctrl {margin:15px 0;}
.sec_head .ctrl a {float:left;    border-radius: 50px;    background: #000;    text-decoration: none;    padding: 10px 40px;    color: #fff;}
.sec_head .ctrl .btn_pre {float:right;}
.sec_head .ctrl button {border:none;background:none;}
.sec_head .ctrl button img {width:45px;}

.rank_track, .rev_track { display: flex; list-style: none; }
.rank_li { margin-right: 20px; flex-shrink: 0; }
.rank_li .box {width: 369px; height: 139px; background: #F6F8FB; border-radius: 29px; display: flex; align-items: center;justify-content: space-evenly;; font-weight: bold; }
.rank_li .box img {width:54px;}
.rank_li .box .box_txt {}
.rank_li .box .box_txt p {font-weight:400;font-size:19px;}
.rank_li .box .box_txt h4 {font-weight:800;font-size:21px;}

.rev_li { margin-right: 20px; flex-shrink: 0; color:#fff;}
.rev_li p {font-size:14px;margin-top:10px;}
.rev_li h4 {font-size:24px;}
.rev_box { width: 304px; height: 216px; /*background: #eee;*/ border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.best_review { background: #1C1C1C; padding: 80px 0; margin-top: 60px; }
.best_review .sec_head p {color:#fff;}
.rev_box img {width:100%;}


/* 키워드 섹션 스타일 */
.keyword_section {/*padding: 30px 0;*/}
.keyword_tit { font-size: 42px; font-weight: bold; margin-bottom: 20px; }
.keyword_tit span { color: #555; font-weight: normal; }

.keyword_wrap { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    align-items: center; 
}

.key_item {
    display: inline-flex;
    align-items: center;
    background: #000; /* 기본 배경 검정 */
    color: #fff; /* 기본 텍스트 화이트 */
    padding: 12px 25px;
    border-radius: 40px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
	height:50px;
}

/* 마우스 오버 시 반응 */
.key_item:hover {
    background: #FFD634; /* 요청하신 배경색 */
    color: #000; /* 텍스트 화이트 유지 */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 214, 52, 0.3);
}

.key_img {width: 100px;}
.key_icon {width: 50px;height: auto; /*margin-right: 8px;*/}

/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
    .keyword_section { padding: 20px; }
    .keyword_tit { font-size: 18px; }
    .key_item { 
        padding: 8px 18px; 
        font-size: 14px; 
    }
    .key_icon { width: 18px; }
    .keyword_wrap { gap: 8px; }
}



/* 기본 레이아웃 */
.recommend {/*padding: 100px 0;*/}
.tab_head { margin-bottom: 40px; }

.tit_area { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.tit_area h3 { font-size: 42px; font-weight: bold; }
.tit_area h3 span { color: #FF9100; } /* 오렌지색 강조 */

.tab_panel { display: none; /* 기본적으로 모든 패널 숨김 */}
.tab_panel.active { 
    display: block; /* active 클래스가 붙은 패널만 보임 */}

.btn_more_pc { padding: 10px 25px; border: 1px solid #ddd; border-radius: 30px; text-decoration: none; color: #333; font-weight: bold; }
.btn_more_mo { display: none; } /* PC에선 숨김 */

/* 탭 네비게이션 영역 */
.nav_ctrl_wrap { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.tab_nav_container { overflow: hidden; max-width: 600px; }
.tab_nav { display: flex; gap: 10px; white-space: nowrap; transition: 0.3s; }

.t_btn { 
    padding: 8px 20px; border: 1px solid #eee; background: #fff; border-radius: 20px; 
    font-size: 16px; color: #999; cursor: pointer; transition: 0.3s;
}
.t_btn.active { background: #000; color: #fff; border-color: #000; font-weight: bold; }

/* 상품 카드 그리드 */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.p_box_card { 
    padding: 30px; border: 1px solid #eee; border-radius: 20px; background: #fff;
    transition: 0.3s; position: relative;
}
.p_box_card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.p_hd { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-size: 14px; color: #666; }
.p_hd img {width:30px;}
.btn_add { position: absolute; top: 30px; right: 30px; background: none; border: 1px solid #ddd; border-radius: 50%; width: 30px; height: 30px; font-size: 20px; cursor: pointer; }

.p_tit { font-size: 19px; line-height: 1.4; margin-bottom: 10px; word-break: keep-all; }
.p_review { font-size: 13px; color: #888; margin-bottom: 15px; }
.p_tags { display: flex; gap: 5px; margin-bottom: 20px; }
.tag_y { background: #FFF9E1; color: #FFB800; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; }

.p_price { border-top: 1px solid #f5f5f5; padding-top: 15px; display: flex; flex-direction: column; gap: 5px; }
.p_price .lbl { font-size: 14px; color: #666; }
.p_price strong { color: #333; margin-left: 5px; }

/* --- 모바일 반응형 (이미지 2번 가이드) --- */
@media (max-width: 768px) {
    .recommend { padding: 60px 20px; }
    .tit_area { flex-direction: column; align-items: flex-start; gap: 15px; }
    .btn_more_pc { display: none; }
    
    .nav_ctrl_wrap { flex-direction: column; align-items: flex-start; width: 100%; gap: 15px; }
    .btn_more_mo { display: block; width: fit-content; padding: 10px 20px; border: 1px solid #000; border-radius: 30px; text-decoration: none; color: #000; font-weight: bold; }
    
    .tab_nav_container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
    .tab_nav { padding-right: 20px; }
    .tab_arrows { display: none; } /* 모바일은 스와이프로 대체 */
    
    .grid { grid-template-columns: 1fr; } /* 1열 배치 */
    .p_tit { font-size: 17px; }
}


/* 배너 */
.promo_banner { height: 180px; background: #345EE9; border-radius: 20px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; /*margin: 60px 0;*/ }


/* Flow Track Animation */
.flow_msg_section { padding: 80px 0; background: #FBFBF8; overflow: hidden; }
.flow_stxt {text-align: center;color:#FF9F0E;font-weight: 400;}
.flow_tit { text-align: center; margin-bottom: 40px; font-size: 42px; font-weight: bold; }
.flow_tit span { color: #FF9F0E; }
.flow_container { display: flex; width: 100%; overflow: hidden; margin-bottom: 25px; }
.flow_track { display: flex; white-space: nowrap; gap: 20px; animation: scroll_left 40s linear infinite; }
/* 오른쪽으로 흐르는 설정 */
.to_right .flow_track { animation: scroll_right 40s linear infinite; }

.msg_card { flex-shrink: 0; width: 380px; height: 180px; background: #fff; border-radius: 25px; padding: 20px; border: 1px solid #eee; text-decoration: none; color: #333; display: flex; flex-direction: column; justify-content: space-between;}
.m_txt { font-size: 16px; line-height: 1.5; font-weight: 500; white-space: normal;color:#FFC403; }
.m_txt span {font-size:23px;}
.m_txt img {width:20px;margin:0 5px 0 0;}
.m_mid {color:#797261;white-space: normal;}
.m_date { font-size: 14px; color: #aaa; /*margin-top: 15px;*/}

@keyframes scroll_left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scroll_right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

/* Footer */
footer { padding: 60px 0; background: #111;color: #fff;display: inline-block;width: 100%;}
.fW {display: flex;justify-content: space-between;}
.f_bot {white-space: normal;width:75%;font-weight: 300;line-height:28px;}
a.fBnt {border-radius:50px;background:#fff;color:#000 !important;padding:5px 10px;margin:0 5px;font-weight:500;}
.f_bot a {text-decoration: none;color:#fff;display: inline-block;}
.f_top { /*display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; */text-align:right;}
.f_top a {background:#FFC400;border-radius:10px;color:#000;text-decoration: none;padding:10px;margin:10px 0;display:inline-block;width:134px;text-align:center;}
.f_bot span.ft_line {width: 1px;background: #fff;height: 10px;display: inline-block; margin: 0 10px;}
.cs_box strong { font-size: 38px; display: flex;align-items: center;}
.cs_box strong img {width:21px;margin:0 10px 0 0;}
.color_g {color:#7A7A7A;}

/* --- 신규 추가: 모바일 전용 스타일 (반응형) --- */
.mobile_fix_nav { display: none; }
.total_menu_layer { display: none; }


   /* 하단 고정 바 */
    .mobile_fix_nav { 
        /*display: flex;*/ position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; 
        background: #fff; border-top: 1px solid #ddd; z-index: 999; 
        justify-content: space-around; align-items: center; 
        box-shadow: 0 -5px 10px rgba(0,0,0,0.05);}
    .m_nav_btn { background: none; border: none; font-size: 20px; color: #333; text-decoration: none; text-align: center; cursor: pointer; }
    .m_nav_btn img {width:20px;}
    .m_nav_btn span { display: block; font-size: 11px; margin-top: 4px; color: #666; }

    /* 전체 메뉴 레이어 */
    .total_menu_layer { 
        position: fixed; top: 0; right: -100%; width: 100%; height: 100%; 
        background: #fff; z-index: 1000; transition: 0.4s ease; display: block;background: rgb(0 0 0 / 51%) !important; backdrop-filter: blur(15px);
    }
    .total_menu_layer.active { right: 0; }
    .menu_content { padding: 40px 20px; }
    .menu_hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
    .menu_hd h2 img {width:100px;}
    .btn_total_close { background: none; border: none; font-size: 30px; color:#fff;}
.menu_list {text-align:right;}
    .menu_list li { list-style: none;}
    .menu_list li a { display: block; padding: 20px 0; font-size: 30px; font-weight: 600; text-decoration: none; color: #fff; }

    /* 모바일에서 섹션 조정 */
    .main_visual { height: 600px; border-radius: 20px; }
    .slide_item {/*padding: 40px 20px;*/display: flex;align-items: center;justify-content: center;border-radius:30px;}
    .v_txt h1 {font-size: 54px; line-height: 60px;}
    .v_ctrl { left: 20px; bottom: 20px; }
    .gauge_bg { width: 100px; }
    /*.grid { grid-template-columns: 1fr; }*/
    .box { width: 280px;}


@media (max-width: 1440px) {
    .inner_1440, .header_flex { width: 100%; padding: 0 20px; }
    .slide_item { width: calc(100vw - 55px); }
    .box { width: calc((100vw - 100px) / 3); }
}

@media (max-width: 900px) {
    body { min-width: 100%; }
	.pc_nav, .rt_search_area, .v_num { display: none;}
	.s1 img {right: -30px;bottom: 20px;width: 60%;}
	
.mobile_fix_nav { 
        display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; 
        background: #fff; border-top: 1px solid #ddd; z-index: 999; 
        justify-content: space-around; align-items: center; 
        box-shadow: 0 -5px 10px rgba(0,0,0,0.05);}	
.rank_li .box .box_txt p {font-size:14px;}
.rank_li .box .box_txt h4 {font-size:15px;}
.search_input_wrap input {font-size: 16px;}
.search_divider {margin: 0 13px; }
.v_txt h1 {font-size: 29px;line-height: 34px;}
	
.fW {display: flex;justify-content: space-between;flex-direction: column-reverse;align-items: center;padding: 0 0 50px 0;}
.f_top {text-align:center;}
.f_txtC {text-align:center;margin:15px 0;}
.f_bot {width:100%;/*padding:15px;*/}
}