/* 
    * GitHub Repository Phishing Alert Appeal & Project Verification
    * 이 페이지는 깃허브에서 발생한 피싱 경고 오탐지(False Positive)를 해명하고, 해당 코드가 순수한 학습 및 포트폴리오용임을 증명하기 위해 작성되었습니다.
    * This CSS is part of a student project. 
    * Any resemblance to real-world commercial sites is purely for design practice.
*/

/* common.css */

* {
    /* outline: 1px solid red; */
}
/* ========================================== 스크롤 시 화면이 부드럽게 올라감 */
html {scroll-behavior: smooth;}
/* ================================================= */
body{/* overflow: hidden; */}
/* ================================================================= 띠배너 */
#wrap #top_bnr {
    background-color: #6B32D2;
    position: relative; z-index: 888;
} /* bg */
#wrap #top_bnr .top_bnr_swiper {height: 42px;}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper {}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper .swiper-slide {}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper .swiper-slide a {
    color: #fff; text-align: center; display: block; line-height: 42px; font-size: 0.75rem;
}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper .slide1 {}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper .slide2 {}
#wrap #top_bnr .top_bnr_swiper .swiper-wrapper .slide3 {}
/* ============================================================================ header */
#wrap {min-width: 350px; position: relative;}
#wrap .header_bg {position: sticky; top: 0; z-index: 888; background: #fff; }
#wrap .header_bg header {
    display: flex; align-items: center; justify-content: space-between; height: 70px;
    max-width: 1440px; margin: 0 auto;
}
#wrap .header_bg header .h_left {display: flex; align-items: center; height: 100%;}
#wrap .header_bg header .h_left #menu_btn {width: 24px; margin-right: 12px; display: none;}/* 전체메뉴 펼치기(햄버거 메뉴) */
#wrap .header_bg header .h_left #menu_btn img {width: 100%;}
#wrap .header_bg header .h_left h1 { margin-right: 34px;}
#wrap .header_bg header .h_left h1 a {display: block; width: 145px;}
#wrap .header_bg header .h_left h1 a img {width: 100%;}
#wrap .header_bg header .h_left .gnb_pc {height: 100%;}
#wrap .header_bg header .h_left .gnb_pc a:hover {color: #6B32D2; font-weight: 500;}
#wrap .header_bg header .h_left .gnb_pc a {
    margin-right: 24px; transition: 0.2s; height: 100%; line-height: 70px;
}
#wrap .header_bg header .h_left .gnb_pc a:last-child {margin: 0;}
#wrap .header_bg header .h_right {display: flex; align-items: center;}
#wrap .header_bg header .h_right #search_box {
    display: flex; align-items: center;
    margin-right: 24px; padding: 8px;
    border-bottom: 1px solid #888;
    font-size: 0.88rem;
}
#wrap .header_bg header .h_right #search_box #search_txt {
    background: none; width: 306px; margin-right: 12px;
}
#wrap .header_bg header .h_right #search_box #search_btn {}
#wrap .header_bg header .h_right .user_box {}
#wrap .header_bg header .h_right .user_box .user {display: inline-block; width: 24px; margin-right: 14px;}
#wrap .header_bg header .h_right .user_box .user img {width: 100%;}
#wrap .header_bg header .h_right .user_box .cart {display: inline-block; width: 24px;}
#wrap .header_bg header .h_right .user_box .cart img {width: 100%;}
/* --------------------------------------------  햄버거메뉴 클릭하면 보이는 영역 */
#wrap #side_menu_wrap {
    display: none; position: fixed; top: 0; left: 0; min-width: 280px;
    height: 100vh; width: 70vw; z-index: 999; background: #fff;
} 
#wrap #side_menu_wrap .side_menu {
    width: 90%; margin: 0 auto; padding: 50px 0;
}
#wrap #side_menu_wrap .side_menu .menu_top {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 20px;
} 
#wrap #side_menu_wrap .side_menu .menu_top .login {}
#wrap #side_menu_wrap .side_menu .menu_top .login a {font-weight: 500; display:block; margin-bottom:10px;}
#wrap #side_menu_wrap .side_menu .menu_top .login a img {width: 14px;}
#wrap #side_menu_wrap .side_menu .menu_top .login p {color: #666; font-size: 0.69rem;;}
#wrap #side_menu_wrap .side_menu .menu_top #close_btn {}
#wrap #side_menu_wrap .side_menu .menu_top #close_btn img {width: 20px;}
#wrap #side_menu_wrap .side_menu .gnb_mobile {
    padding: 30px 0;
    border-top: 0.5px solid #bbb;
    border-bottom: 0.5px solid #bbb;
}
#wrap #side_menu_wrap .side_menu .gnb_mobile > a {
    display: block; margin-bottom: 26px;
}
#wrap #side_menu_wrap .side_menu .gnb_mobile > a:last-child {margin: 0;}
#wrap #side_menu_wrap .side_menu .lnb {padding: 30px 0;} 
#wrap #side_menu_wrap .side_menu .lnb a {
    font-size: 0.88rem; color: #888; display: block;
    margin-bottom: 18px;
}
#wrap .overlay {
    display: none;
    position: absolute; top: 0; left: 0; z-index: 888; background: rgba(0, 0, 0, 0.6);
    width: 100%; height: 100%;
} /* 모바일 환경에서 메뉴를 열었을때 뒷 배경이 어둡게 보이도록 함(클릭하면 메뉴 닫힘) */

/* ================================================================================= footer */
#wrap footer {
    max-width: 1440px; margin: 100px auto;
    display: grid;
    grid-template-areas: 
    "left right"
    "bottom bottom";
    row-gap: 40px;
}
#wrap footer .f_left {grid-area: left;}
#wrap footer .f_left .f_logo {}
#wrap footer .f_left .f_logo img {}
#wrap footer .f_left .customer_service {margin: 32px 0;}
#wrap footer .f_left .customer_service address {display: flex; align-items: center; margin-bottom: 8px;}
#wrap footer .f_left .customer_service address span {font-weight: 600;} /* 공통 */
#wrap footer .f_left .customer_service address .label {font-size: 0.94rem; margin-right: 12px;}
#wrap footer .f_left .customer_service address .tel {font-size: 1.44rem;}
#wrap footer .f_left .customer_service .tel_time {font-size: 0.75rem; line-height: 1.5;}
#wrap footer .f_left .customer_support {display: flex; gap: 10px;}
#wrap footer .f_left .customer_support a {}
#wrap footer .f_left .customer_support a.faq {
    padding: 8px 37px; background: #6B32D2; border-radius: 99px; color: #fff;
}
#wrap footer .f_left .customer_support a.instargram img {}
#wrap footer .f_left .customer_support a.kakao img {}
#wrap footer .f_left .customer_support a.naver img {}
#wrap footer .f_right {grid-area: right; text-align: right;}
#wrap footer .f_right h2 {margin-bottom: 9px; font-weight: 600;}
#wrap footer .f_right p {line-height: 1.8; font-size: 0.81rem;}/* p 공통 */
#wrap footer .f_right address {line-height: 1.8; font-size: 0.81rem;}
#wrap footer .f_right address+p {}
#wrap footer .f_bottom {grid-area: bottom; border-top: 0.5px solid #888; padding-top: 24px;}
#wrap footer .f_bottom a {}
#wrap footer .f_bottom a:not(:last-child)::after {
    content: ''; display: inline-block; width: 1px; height: 10px; background: #888; margin:0 16px;
}


/* ================================================================== 공통 디자인 */
/* =================================================== 메인페이지 컨텐츠 너비 */
#wrap main .container {max-width: 1440px;}
/* =================================================== 메인페이지 컨텐츠 제목 */
    #wrap main #best_wrap h1,
    #wrap main #recommendation_wrap .recommendation_left h1,
    #wrap main #recommendation_wrap .recommendation_left h1 span,
    #wrap main #best_review_wrap .review_title_btn h1,
    #wrap main #magazine_wrap h1 {font-size: 1.69rem; font-weight: 600;}