/*반응형*/
@media screen and (max-width: 1400px) {
.quick_wrap {
    left: auto;
    margin-left: 0;
    right: 8px;
}
}
/* 태블릿 가로 */
@media screen and (max-width: 1024px) {
.main_grid {
    gap: 16px;
}

/*===  ===*/
.grid_col_2 {
    row-gap: 16px;
    column-gap: 12px;
}
.join_feature .iconbox {flex: 0 0 44px;}
.join_feature .feature_txt {max-width: none;}
/*===  ===*/
.card_result {
    /* grid-column: span 6; */
    grid-column: span 12;
    margin-bottom: 36px;
}
.card_status {
    /* grid-column: span 6; */
    grid-column: span 7;
}
.card_login {
    /* grid-column: span 12; */
    grid-column: span 5;
}
/*=== 엔진 프로세스 ===*/
.order_list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.order_list li .num {
    width: 32px;
    height: 32px;
    font-size: 20px;
}
/*=== 이용권===*/
.pricing_card {
    padding: 24px 12px;
}
.pricing_wrap {
    gap: 16px;
}

}/* 1024px 끝 */

@media screen and (max-width: 900px) {
/*=== 로그인===*/
.join_main_wrap {
    justify-content: center;
}
.join_main_wrap .banner_text_box {
    display: none;
}
/*===  ===*/
.main_container .inner_wrap {
    padding: 0 8px;
}
.promo_banner_wrap .inner_wrap {
    padding: 0 1rem;
}
.order_list li:not(:last-child)::after {}


.inner_wrap > .wh_card {
    margin-bottom: 32px;
}
.wh_card {
    padding: 28px 16px;
}

.banner_box {
    background-size: 60%;
}
.pricing_wrap {
    grid-template-columns: repeat(2, 1fr);
}
.pricing_card.gold_membership .flag-badge {
    height: 32px;
}
.pricing_info .plan_level {
    font-size: 20px;
}

.community_section.main_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card_chat {
    grid-column: span 2;
}
.loaded_list {
    gap: 8px;
}

/*=== 골드 멤버십으로 프리미엄 분석 받기 ===*/
.promo_banner {
    flex-direction: column;
    gap: 24px;
}
.promo_banner .promo_info {
    width: 100%;
    text-align: center;
}
.promo_feature {
    margin-top: 20px;
    justify-content: center;
    gap: 16px ;
}
.promo_feature .feature_txt {
    line-height: 1.5;
}
.promo_feature .feature_txt .feature_tit {
    font-size: 18px;
    margin-bottom: 0;
}
.promo_banner .btn_wrap {
    width: 100%;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.promo_banner .btn_wrap a {
    flex: 0 1 200px;
    min-width: 0;
}

/*=== 서브-엔진소개 ===*/
.intro-page .banner_box {
    background: var(--main-gd);
}
.intro_container {
    grid-template-columns: 1fr;
}
.intro_container .imgbox {
    text-align: center;
}
.analyze_list {
    grid-template-columns: repeat(2, 1fr);
}
.analyze_list li {
    gap: 12px;
}
.process_wrap {
    grid-template-columns: repeat(3, 1fr);
}
.process_wrap .process_item {
    padding: 20px 12px 12px;
}
.process_item .item_num {
    position: static;
    transform: none;
    margin: 0 auto 20px;
}
.process_item .item_desc {
    margin-bottom: 8px;
}
.process_item .imgbox {
    width: 60%;
    text-align: center;
    margin: 0 auto;
}

.card_community .all_comm_table_wrap .history_item::before {
    display: none;
}
/*=== 서브-마이페이지 ===*/
.main_grid:not(.main_overview) {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
}
.dashboard_grid {
    grid-template-columns: 1fr;
    gap: 16px;
}
.sidebar_wrap {
    overflow: hidden;
    padding: 8px 0 !important;
    border-radius: 0;
    border: 0;
    background-color: #F5F8FC;
    box-shadow: none;
    top: 36px;
}
.sidebar_profile,
.sidebar_cs {
    display: none;
}
.sidebar_wrap > *:not(:last-child) {
    padding-bottom: 0;
    border-bottom: 0;
}
.sidebar_menu {
    flex-direction: row;
    padding-top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sidebar_menu::-webkit-scrollbar {
    display: none;
}
.sidebar_menu_wrap {
    position: relative;
    width: 100%;
    overflow: hidden; /* 영역 밖으로 삐져나가는 그라데이션 방지 */
}

/* 화살표 버튼 공통 스타일 */
.sidebar_menu_wrap .btn_common {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
}

/* 처음 로드될 땐 왼쪽 끝이므로 prev 버튼은 숨김 */
.sidebar_menu_wrap .btn_prev { left: 0px; display: none; } 
.sidebar_menu_wrap .btn_next { right: 0px; }

.sidebar_menu_wrap .btn_bg {
    position: absolute;
    top: 0;
    width: 48px;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 클릭을 방해하지 않도록 통과시킴 */
}
.sidebar_menu_wrap .btn_bg_prev {
    left: 0;
    background: linear-gradient(to right, #F5F8FC 70%, transparent);
    display: none;
}
.sidebar_menu_wrap .btn_bg_next {
    right: 0;
    background: linear-gradient(to left, #F5F8FC 70%, transparent);
}


.sidebar_menu li {
    flex: 0 0 auto;
}
.sidebar_menu li a {
    white-space: nowrap;
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

}/* 900px 끝 */

/* 태블릿 세로 */
@media screen and (max-width: 768px) {
/*===  ===*/
#container {
    padding-top: 60px;
}

.footer {
    flex-direction: column;
}
.footer .ft_logo {
    flex: auto;
}

/*=== 로그인 회원가입 ===*/
.join_banner {
    padding: 40px 0;
}


/*=== 헤더 ===*/
.hd_wrapper_pc {
    display: none;
}
.mb_header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.hd_main {
    padding: 12px 0;
}
.header_action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 15px;
}
.mb_header .hd_main {
    border: 0;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
.main_menu_mb {
    background-color: #fff;
    transition: all 0.3s ease;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.mb_header.scrolled .hd_main {
    max-height: 0;
    padding: 0;
}
.mb_header.scrolled .main_menu_mb {
    /* border-top: 0; */
}
.main_menu_mb .gnb {
    display: flex;
    align-items: center;
    padding: 8px 0;
}
.main_menu_mb .gnb a {
    flex: 1;
    text-align: center;
    font-size: 15px;
}

.hamburger {
    width: 32px;
    height: 32px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: transparent;
    border: 0;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
}
.mb_dim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 5;
}
.mb_dim.active {
    opacity: 1;
    visibility: visible;
}
.mb_menu {
    position: fixed;
    top: 0;
    right: -80%;
    width: 80%;
    height: 100vh;
    background: #fff;
    z-index: 7;
    transition: right 0.35s ease;
    /* padding: 48px 20px 20px; */
    box-sizing: border-box;
}
.mb_menu.active {
    right: 0;
}
.btn_menu_close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.mb_menu .gnb {
    /* padding: 8px 16px 0; */
}
.mb_menu .gnb a {
    display: block;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

body.menu_open {
    overflow: hidden;
}

.mb_menu_top {
    padding: 48px 16px 20px;
    background: linear-gradient(to bottom, #c9daf4, #f0f0f2);
}
.mb_menu_top .login_member {
    border: none;
    background-color: #fff;
}
.mb_menu_top .login_member .log_menu {
    display: flex;
    align-items: center;
}
.mb_menu_top .login_member .log_menu li {
    padding: 0;
    flex: 1;
    justify-items: center;
}
.mb_menu_top .login_member .log_menu li a {
    gap: 4px;
    padding: 8px 0;
    border-bottom: none;
}
.mb_menu_top .login_member .btn_box {
    padding: 8px 12px;
}
.mb_menu_top .login_member .btn_box .btn_common {
    font-size: 16px;
    padding: 8px 0;
}

/*===  ===*/
.sub-page-wrap {
    /* padding: 20px 0 40px; */
    padding: 36px 0 40px;
}
.card_bottom {padding: 8px;}
/*===  ===*/
.banner_box {
    height: auto;
    min-height: 420px;
    padding-bottom: 80px;
    background: var(--main-gd) !important;
    text-align: center;
}
.banner_btn_wrap {
    justify-content: center;
}
.main_grid .card_head {
    margin-bottom: 24px;
}
.card_result .result_con .result_item {
    font-size: 18px;
}

.order_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.order_list li::after {
    display: none;
}



.community_section.main_grid .card_head {
    padding: 12px;
}
.loaded_list_item,
.card_community .history_item {
    /* background-color: pink; */
}
.card_best .loaded_list {
    padding: 12px 8px;
}
.card_community .history_item {
    padding: 4px 8px;
}

.promo_banner .promo_head_tit {
    font-size: 24px;
}

.dashboard_stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats_top {gap: 12px;}

.membership_banner {background: var(--main-gd);}
.membership_info_list li {flex: 1 1 180px;}

.unlock_box {
    gap: 12px;
    padding: 20px 8px;
    flex-direction: column;
}
.unlock_box .unlock_text {
    width: 100%;
    justify-items: center;
    text-align: center;
}
.member_info_box {grid-template-columns: 1fr;}
.member_info_box .info_item:nth-last-child(-n+2) .info_label,
.member_info_box .info_item:nth-last-child(-n+2) .info_value {
    border-bottom: 1px solid var(--border-color);
}
.member_info_box .info_item:last-child .info_label,
.member_info_box .info_item:last-child .info_value {
    border-bottom: 0;
}

/*=== 커뮤니티 고객센터 ===*/
.common_search_form {
    flex-direction: column;
    gap: 12px;
}
.search_filter_box label {
    flex: 1;
    padding: 0 4px;
}
.container_wrap {
    flex-direction: column;
    gap: 0;
}
.left_info_box .info_list li {
    margin-bottom: 12px;
}
.left_info_box .btn_wrap {
    margin-top: 16px;
    padding-top: 0;
}

/* 2. 각 게시글을 모바일 리스트 형태로 변환 */
.all_comm_table_wrap .history_item {
    flex-wrap: wrap;
    padding: 12px;
    position: relative;
}

/* 3. 번호 숨기기 */
.all_comm_table_wrap .col_num {
    display: none;
}

/* 4. 1번째 줄 (제목 & 댓글) */
.all_comm_table_wrap .col_name {
    width: 100%;
    flex: 0 0 100%;
    text-align: left;
    margin-bottom: 8px; /* 2번째 줄과의 위아래 간격 */
    order: 1;
}
.all_comm_table_wrap .history_item .col_name a {
    display: block;
    width: calc(100% - 40px) !important;
    padding: 0 !important;
    /* margin-bottom: 5px; */
    border: none !important;
    height: auto;
}
/* 제목 한 줄 말줄임표 처리 (...) */
.all_comm_table_wrap .title_text {
    font-weight: 500;
    display: block;
}

/* 댓글 포인트 컬러 및 크기 고정 */
.all_comm_table_wrap .history_item .col_name a .cnt_cmt {
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100% !important;
    background: #f8f8f8 !important;
    font-size: 14px !important;
    color: #EF4444 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. 2번째 줄 (작성자 / 날짜 / 조회수) - PC flex 초기화 */
.all_comm_table_wrap .col_writer,
.all_comm_table_wrap .col_date,
.all_comm_table_wrap .col_view {
    width: auto !important;
    flex: unset; 
    font-size: 14px;
    color: var(--gray-color);
    display: flex;
    align-items: center;
    font-weight: 400;
}

/* 6. HTML 순서 강제 변경 (작성자 -> 날짜 -> 조회수) */
.all_comm_table_wrap .col_writer { order: 2; }
.all_comm_table_wrap .col_date { order: 3; }
.all_comm_table_wrap .col_view { order: 4; }

/* 모바일에선 조회수 숫자만 있으면 헷갈리므로 앞에 '조회 ' 글자 추가 */
.all_comm_table_wrap .col_view::before {
    content: "조회 ";
}

/* 7. 각 항목 사이에 예쁜 구분선( | ) 추가 */
.all_comm_table_wrap .col_writer::after,
.all_comm_table_wrap .col_date::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: var(--border-color);
    margin: 0 6px;
}
.sub-page-wrap .wh_card {padding: 20px 12px;}
.sub_wrap_tit h2 { margin-bottom: 8px;}
.sub_wrap_tit { 
    margin-bottom: 16px;
    padding-top: 20px;
}

.search_input_box,
.search_input_box input,
.search_input_box .btn_search,
.search_filter_box {height: 36px;;}

}/* 768px 끝 */

/* 작은 태블릿 ~ 큰 모바일 */
@media screen and (max-width: 640px) {
.toast-message {
    top: auto;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 4px;
    width: 80%;
    justify-content: center;
}
::placeholder {font-size: 14px;}
.logo {
    max-width: 160px;
}
.leave_card .flex_wrap .btn_leave {
    width: 100%;
}

.membership_cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 12px;
    gap: 16px;
}
.membership_cta .cta_left {
    gap: 12px;
    align-items: flex-start;
}
.membership_cta .cta_left .iconbox i {font-size: 1.6rem;}
.membership_cta .cta_desc h4 {
    font-size: 18px;
}
.membership_cta .btn_join_cta {
    width: 100%;
    justify-content: center;
    padding: 8px 4px;
}
.main_grid:not(.main_overview) {
    grid-template-columns: 1fr;
}
.card_chat {
    grid-column: auto;
}


}/* 640px 끝 */

/* 모바일 */
@media screen and (max-width: 576px) {
.card_result,
.card_status,
.card_login {
    grid-column: auto;
}
.card_result {order: 2;}
.card_status {order: 3;}
.card_login {order: 1;}

.result_balls {
    gap: 8px;
    justify-content: center;
}


.main_overview.wh_card {
    grid-template-columns: 1fr;
    margin-bottom: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none; 
}
.main_overview.wh_card > .card_column {
    padding: 20px 16px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    border-radius: 8px;
}
.main_overview > section::after {
    display: none;
}
.card_status .result_con {
    flex-direction: row;
}

.card_login .log_menu {
    display: flex;
    margin-bottom: 16px;
}
.card_login .log_menu li {flex: 1;}
.card_login .log_menu li a {
    border-bottom: 0;
    justify-content: center;
}
.banner_btn_wrap {
    gap: 12px;
}
.card_status .result_con {
    flex-direction: column;
}
.pricing_wrap {
    grid-template-columns: 1fr;
}
.footer .ft_cnt { gap: 8px;}
.footer .ft_cnt > a {
    padding: 0;
    border-right: 0;
}

.analyze_list {
    grid-template-columns: 1fr;
    gap: 12px;
}
.process_wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.promo_feature {
    flex-direction: column;
    justify-self: center;
    gap: 8px;
}
.promo_banner .btn_wrap a {
    flex: 1 1 180px;
    font-size: 16px;
    padding: 8px 4px;
    justify-content: center;
    gap: 4px;
}

/*=== 마이페이지 표 ===*/
.view_table:not(.all_comm_table_wrap) {
    border: 0;
}
.view_table table, 
.view_table tbody {
    display: block;
    width: 100%;
}
.view_table thead {
    display: none;
}
.view_table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.view_table tbody tr:last-child {
    margin-bottom: 0;
}
.view_table tbody td {
    border-bottom: none;
    padding: 0;
}
/*회차*/
.view_table .col_round {
    order: 1;
    width: 50%;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
}
/*저장일*/
.view_table .col_date {
    order: 2;
    width: 50%;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-color);
}
/*저장일 라벨*/
.view_table .col_date::before {
    content: attr(data-label) " ";
}
.view_table .col_number {
    order: 3;
    width: 100%;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.result_balls {
    justify-content: center;
    gap: 6px;
}
.view_table .lotto_ball {
    width: 32px;
    font-size: 15px;
}

/*구매내역*/
.buy_history_table .history_head {
    display: none;
}
.buy_history_table .history_item {
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    align-items: center;
}
.buy_history_table .history_item:last-child {
    margin-bottom: 0;
}
/*상품명*/
.buy_history_table .history_list .col_name {
    order: 1;
    width: 60%;
    flex: unset;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px; /* 위아래 줄 간격 */
}
/*금액 */
.buy_history_table .col_price {
    order: 2;
    width: 40%;
    flex: unset;
    text-align: right;
    font-weight: 600;
    margin-bottom: 12px;
}
/*구매일*/
.buy_history_table .col_date {
    order: 3;
    flex: unset;
    text-align: left;
    font-weight: 400;
}
/*상태 버튼*/
.buy_history_table .history_list .col_status {
    order: 4;
    width: 50%;
    flex: unset;
    max-width: none;
    justify-content: flex-end;
}

.banner_desc {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 24px;
    word-break: keep-all;
}
.banner_desc br {display: none;}
.order_list {
    gap: 12px;
}
.group_box .group_list li {flex-direction: column;}
.legend_wrap {
    flex-wrap: wrap;
    font-size: 13px;
    gap: 4px;
}
.legend_wrap .flex_wrap {flex-wrap: wrap;}

/*=== 게시판 ===*/
.cs_search_section.wh_card {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}
.search_filter_box {
    height: auto;
    flex-wrap: wrap;
}
.search_filter_box label {
    flex: 0 0 calc(50% - 4px);
    height: 32px;
}

}/* 576px 끝 */

/* 작은 모바일 */
@media screen and (max-width: 390px) {
.dashboard_stats {
    grid-template-columns: 1fr;
}
.board_tab li {
    flex: 0 0 calc(50% - 2px);
}
}/* 390px 끝 */

/* 아주 작은 모바일 */
@media screen and (max-width: 360px) {
.header_action .header_util {
    display: none;
}
}/* 360px 끝 */

@media (max-width: 768px) {


    /*incldue all_community.php*/
    /* 1. 모바일에서 불필요한 PC용 헤더 숨기기 */
    .hidden_mobile { 
        display: none !important; 
    }
    
    
}