@media screen and (max-width: 768px) {
    /* PC 요소 숨기기 */
    .pc-header,
    .main-nav,
    #header .gnb,
    #header .top_menu,
    nav.navbar,
    #header .header_top .search,
    .main-header-bar,
    .utility-bar {
        display: none !important;
    }
    
    /* 모바일에서 헤더 높이 조정 */
    #header .header_top {
        height: 60px;
    }
    
    /* 모바일에서 로고 크기 조정 */
    #header .logo img {
        max-height: 40px;
        width: auto;
    }

    /* 모바일 메뉴 기본 스타일 */
    .mobile-menu {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1001;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* 모바일 헤더 */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .mobile-menu-header .login-button {
        background: #0066FF;
        color: #fff;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
    }

    .mobile-menu-header .mobile-menu-close {
        font-size: 28px;
        color: #333;
        background: none;
        border: none;
        padding: 0 5px;
        line-height: 1;
    }

    /* 아이콘 메뉴 */
    .menu-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 20px 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #333;
        padding: 10px;
    }

    .menu-icon i {
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .menu-icon span {
        font-size: 13px;
        color: #333;
    }

    /* 카테고리 섹션 */
    .menu-categories {
        padding: 0;
        background: #fff;
    }

    .category-item {
        border-bottom: 1px solid #eee;
    }

    .category-title {
        width: 100%;
        padding: 18px 15px;
        font-size: 15px;
        color: #333;
        background: none;
        border: none;
        text-align: left;
        position: relative;
        font-weight: 400;
    }

    .category-title:after {
        content: '';
        position: absolute;
        right: 15px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid #666;
        border-bottom: 1.5px solid #666;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.3s ease;
    }

    .category-item.active .category-title:after {
        transform: translateY(-50%) rotate(-135deg);
    }

    .category-content {
        display: none;
        padding: 0;
        background: #f8f9fa;
    }

    .category-item.active .category-content {
        display: block;
    }

    .category-grid {
        display: flex;
        flex-direction: column;
    }

    .category-grid a {
        display: block;
        padding: 15px;
        color: #666;
        text-decoration: none;
        font-size: 14px;
        background: #f8f9fa;
        border-top: 1px solid #eee;
    }

    .category-grid a:hover {
        background: #f1f3f5;
        color: #333;
    }

    /* 연락처 정보 */
    .contact-info {
        padding: 25px 15px;
        border-top: 1px solid #eee;
        text-align: center;
        background: #fff;
    }

    .contact-info .phone {
        font-size: 13px;
        color: #666;
        margin-bottom: 5px;
    }

    .contact-info .phone-number {
        font-size: 22px;
        font-weight: bold;
        color: #333;
    }

    /* 아이콘 이미지 */
    .icon-support { background-image: url('../images/icon-support.png'); }
    .icon-headset { background-image: url('../images/icon-headset.png'); }
    .icon-notice { background-image: url('../images/icon-notice.png'); }
    .icon-faq { background-image: url('../images/icon-faq.png'); }

    /* 메뉴 오픈시 오버레이 */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    body.menu-open.active::after {
        opacity: 1;
        visibility: visible;
    }

    /* 모바일 헤더 */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        background: #fff;
        z-index: 999;
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        /* padding: 0 16px; */
        border-bottom: 1px solid #eee;
    }

    .mobile-header .logo {
        flex: 1;
        text-align: center;
    }

    /* 메뉴 트리거 버튼 */
    .mobile-menu-trigger {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
    }

    .mobile-menu-trigger span {
        width: 20px;
        height: 2px;
        background: #333;
        transition: all 0.3s ease;
        display: block;
    }

    .mobile-menu-trigger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-trigger.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-trigger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* 장바구니 버튼 */
    .mobile-cart-trigger {
        position: relative;
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-cart-trigger i {
        font-size: 20px;
        color: #333;
    }

    .mobile-cart-trigger .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #ff6b6b;
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        font-size: 11px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* 모바일 컨텐츠 영역 */
    #main-content {
        padding-top: 56px;
    }

    /* iOS 안전영역 대응 */
    @supports (padding-top: env(safe-area-inset-top)) {
        .mobile-header {
            padding-top: env(safe-area-inset-top);
            height: calc(56px + env(safe-area-inset-top));
        }
        #main-content {
            padding-top: calc(56px + env(safe-area-inset-top));
        }
    }

    /* 하단 메뉴 */
    .mobile-bottom-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 1px solid #eee;
        z-index: 100;
    }

    .mobile-bottom-menu .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #666;
        font-size: 12px;
    }

    .mobile-bottom-menu .menu-item i {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mobile-bottom-menu .menu-item.active {
        color: #0066FF;
    }

    .mobile-bottom-menu .menu-item.active i {
        filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(1234%) hue-rotate(202deg) brightness(101%) contrast(101%);
    }

    /* 하단 메뉴 아이콘 */
    .icon-home { background-image: url('../images/icon-home.png'); }
    .icon-campaign { background-image: url('../images/icon-campaign.png'); }
    .icon-bell { background-image: url('../images/icon-bell.png'); }
    .icon-community { background-image: url('../images/icon-community.png'); }
    .icon-mypage { background-image: url('../images/icon-mypage.png'); }

    /* 모바일 레이아웃 조정 */
    .layout_inner {
        width: 100%; 
        margin: 0px auto; 
        position: relative;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .container_cus {
        width: 100%;
        margin: 20px auto;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* 모바일에서 아이템 리스트 조정 - 첫 화면은 1개씩 세로 배치 */
    .index_main1_con .item_list_wrap .item_box_list ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }
    
    .index_main1_con .item_list_wrap .item_box_list li {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0px !important;
        margin-bottom: 0px !important;
        flex: none !important;
        float: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    .index_main1_con .item_list_wrap .item_box_s ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }
    
    .index_main1_con .item_list_wrap .item_box_s li {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0px !important;
        margin-bottom: 0px !important;
        flex: none !important;
        float: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    
    /* 첫 화면 campaign-card 스타일 적용 */
    .index_main1_con .campaign-card {
        margin-bottom: 0px;
        width: 100% !important;
        box-sizing: border-box;
        transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
    }
    
    .index_main1_con .campaign-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        border: 2px solid #872520 !important;
    }
    
    /* 첫 화면 전체 레이아웃 강제 설정 */
    .index_main1_con .item_list_wrap {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .index_main1_con .item_box_list {
        width: 100% !important;
        max-width: none !important;
    }
    
    .index_main1_con .item_box_list ul {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .index_main1_con .campaign-image {
        padding-top: 75%; /* 모바일에서 이미지 높이 조정 */
    }
    
    .index_main1_con .campaign-info {
        padding: 15px;
    }
    
    .index_main1_con .campaign-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .index_main1_con .meta-item {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .index_main1_con .meta-item.price .value {
        font-size: 16px;
    }
    
    .index_main1_con .campaign-status {
        font-size: 13px;
        margin-top: 10px;
    }
    
    /* 첫 화면 카테고리 제목 스타일 개선 */
    .index_main1_con .index_title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        padding: 0 15px;
        text-align: center;
    }
    
    .index_main1_con .layout_inner {
        padding: 0;
        max-width: none !important;
        width: 100% !important;
    }
    
    /* 일반 상품 리스트는 기존대로 2개씩 */
    .item_list_wrap .item_box_list li {
        width: 50%;
        padding: 0px 8px 17px 0px;
    }
    
    .item_list_wrap .item_box_s li {
        width: 50%;
        padding: 0px 8px 10px 0px;
    }
    
    /* 모바일에서 테이블 반응형 처리 */
    .tb_list {
        font-size: 12px;
    }
    
    .tb_list th,
    .tb_list td {
        padding: 8px 4px;
    }
    
    /* 모바일에서 겹침 방지 */
    .cusinfor {
        width: 100%;
        margin-left: 0;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .main_container {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* 모바일에서 헤더 겹침 방지 */
    #header {
        position: relative;
        z-index: 100;
    }
    
    /* 모바일에서 컨텐츠 영역 조정 */
    #main-content {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* 모바일에서 푸터 겹침 방지 */
    #footer {
        position: relative;
        z-index: 1;
    }

    #footer .doc_wrap{overflow:hidden;margin:0px auto; padding:30px 0px;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
    #footer .doc_wrap .f2 ul{overflow:hidden;float:right; margin-top:10px;}
    #footer .doc_wrap .f2 ul li {position:relative; float:left; text-align:left; width:180px; height:45px; padding-left:10px;  line-height:45px;  border: solid 1px #dcdcdc;}
    #footer .doc_wrap .f2 ul li span{ color:#666; margin:10px 0px; font-size:18px;}
    #footer .doc_wrap .f2 ul li + li{border-left:solid #000 0px;}
    #footer .doc_wrap .f2 ul li b{position:absolute; right:10px; top:0px; color:#429b98; font-size:20px; font-weight:100px;}
    #footer .doc_wrap .fm{width:95%; padding-left:5px;}

    .cusinfor {float:left; margin-left:40px; width: calc(100% - 288px);  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:500px;}
    .main_container { width: 1444px; position:relative; margin:0 auto; height:auto; overflow:hidden; }
    
    
    .item_list_wrap .item_box_list .thumb {position:relative; z-index:1;  width:100%; height:auto; min-height:206px; background-position:center; background-size:100%;}
    .item_list_wrap .item_box_list .option{overflow:hidden;height:24px;margin:0 1px;padding:0px 9px 0 0px; text-align:left; font-size:12px;}
    .item_list_wrap .item_box_list .option2 span{display:inline-block; border:solid 1px #ebebeb;margin-right:5px; padding:2px 2px;background-color:#ebebeb; letter-spacing:-1px; height:20px; line-height:20px;}
    .item_list_wrap .item_box_s .thumb {position:relative; z-index:1; margin:0; background-image:url(/assets/site/images/no_img.png); background-position:center; background-size:100%;min-height:157px;}
    .item_list_wrap .item_box_list .option span:last-child{ position:absolute; right:0px; top:0px!important; margin-right:0px;}
    .item_list_wrap .item_box_list .thumb {position:relative; z-index:1;  width:100%; height:auto; min-height:225px;  background-size:100%;}
    .item_list_wrap .item_box_list .option{overflow:hidden;height:24px;margin:0 1px;padding:0px 9px 0 0px; text-align:left; font-size:12px;}
    .item_list_wrap .item_box_list .option2 span{display:inline-block; border:solid 1px #ebebeb;margin-right:5px; padding:0px 5px;background-color:#ebebeb; letter-spacing:-1px; height:20px; line-height:20px;}
    .item_list_wrap .item_box_s .thumb {position:relative; z-index:1; margin:0; background-image:url(/assets/site/images/no_img.png); background-position:center; background-size:100%;min-height:174px;}

    body.menu-open {
        overflow: hidden;
    }
}

/* 더 작은 화면을 위한 추가 미디어 쿼리 */
@media screen and (max-width: 480px) {
    /* 모바일에서 아이템 리스트를 1열로 변경 */
    .item_list_wrap .item_box_list li {
        width: 100%;
        padding: 0px 0px 17px 0px;
    }
    
    .item_list_wrap .item_box_s li {
        width: 100%;
        padding: 0px 0px 10px 0px;
    }
    
    /* 모바일에서 패딩 조정 */
    .layout_inner {
        padding: 0 10px;
    }
    
    .container_cus {
        padding: 0 10px;
    }
    
    /* 모바일에서 폰트 크기 조정 */
    .page_title {
        font-size: 20px;
    }
    
    .item_list_wrap .item_box_list .it_name {
        font-size: 15px;
    }
    
    .item_list_wrap .item_box_list .it_description {
        font-size: 12px;
    }
    
    /* 모바일에서 겹침 방지 추가 */
    .cusinfor {
        width: 100%;
        margin-left: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .main_container {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* 모바일에서 아이템 간격 조정 */
    .item_list_wrap .item_box_list ul {
        margin: 10px 0px 20px 0px;
    }
    
    .item_list_wrap .item_box_s ul {
        margin: 10px 0px 20px 0px;
    }
}

/* 태블릿 크기 화면을 위한 미디어 쿼리 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .layout_inner {
        width: 100%;
        max-width: 100%;
        padding: 0 30px;
    }
    
    .container_cus {
        width: 100%;
        padding: 0 30px;
    }
    
    /* 태블릿에서 아이템 리스트를 3열로 */
    .item_list_wrap .item_box_list li {
        width: 33.333%;
        padding: 0px 12px 17px 0px;
    }
    
    .item_list_wrap .item_box_s li {
        width: 33.333%;
        padding: 0px 12px 10px 0px;
    }
}