@charset "utf-8";

/* [1] PC 화면에서는 모바일 전용 요소를 아예 렌더링하지 않음 */
.m_menu_open, 
.m_menu_header, 
.m_menu_overlay { 
    display: none !important; 
}

/* [2] 모바일 및 태블릿 레이아웃 (1235px 이하) */
@media screen and (max-width: 1235px) {
    
    /* --- A. 슬라이드 및 메인 레이아웃 초기화 --- */
    #wrapper, #main_wide, #main_wrapper,
    .top_middle_layout, .header-bottom > div, .header_container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

	
    .slide_left { width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }
    .slide_right { width: 100% !important; max-width: 400px; margin: 0 auto !important; float: none !important; }

    /* --- B. 햄버거 버튼 노출 --- */
    .m_menu_open {
		margin-top: 0px !important;
        display: block !important;
        cursor: pointer;
        font-size: 32px;
        color: #0d1b3e;
    }

    /* --- C. 모바일 메뉴 (평상시 숨김 상태) --- */
    .new_head_menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 280px !important;
        height: 100% !important;
        background-color: #ffffff !important;
        z-index: 10000 !important;
        transition: right 0.3s ease-in-out !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        margin: 0 !important;
        visibility: hidden; 
        overflow-y: auto !important; /* 메뉴가 길어질 경우 대비 */
        overflow-x: hidden !important;
    }

    .new_head_menu.active {
        right: 0 !important;
        visibility: visible;
    }

    /* --- D. 모바일 메뉴 내부 헤더 및 리스트 --- */
    .m_menu_header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #0d1b3e;
        color: #fff;
    }
    .m_menu_header span { font-size: 14px; font-weight: 500; }
    .m_menu_close { font-size: 24px; cursor: pointer; }

    .lnb { flex-direction: column !important; padding: 0 !important; margin: 0 !important; }
    .lnb > li { width: 100% !important; border-bottom: 1px solid #f1f5f9; position: relative; }
    
    /* 1차 메뉴 스타일 */
    .lnb > li > a {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        padding: 15px 20px !important;
        background: #fff !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* --- [아코디언 핵심] 서브메뉴(depth2) 초기 상태: 숨김 --- */
    .lnb .depth2 {
        /* JS의 slideDown/Up이 우선권을 갖도록 !important를 제거합니다. */
        display: none; 
        
        position: static !important;
        width: 100% !important;
        transform: none !important;
        overflow: hidden !important; /* 슬라이드 시 부들부들 떨리는 현상 방지 */
        
        /* 나머지 디자인 속성들 */
        background-color: #f8fafc !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .lnb .depth2 li a {
        padding: 12px 20px 12px 40px !important;
        font-size: 14px !important;
        color: #64748b !important;
        background: none !important;
        display: block !important;
    }

    /* 메뉴가 열렸을 때 화살표 회전 효과 */
    .lnb > li.open > a .ri-arrow-down-s-line {
        transform: rotate(180deg);
        transition: 0.3s;
        color: #e91e63 !important;
    }

    .new_head_menu .depth2-header { display: none !important; }

    /* --- E. 배경 오버레이 --- */
    .m_menu_overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
    }
    .m_menu_overlay.active { display: block !important; }
	
	/* 1. 회색 배경 컨테이너의 고정 높이 및 배경색 해제 */
    
    
    /* 1. 우측 로그인/정보 영역 숨기기 */
    .slide_right {
        /* 1. 레이아웃 영향 제거 */
        float: none !important;      /* 우측 정렬 해제 */
        width: 100% !important;     /* 너비를 화면에 맞게 확장 (또는 auto) */
        height: auto !important;    /* 고정 높이 445px 해제 */
        
        /* 2. 디자인 영향 제거 */
        background: none !important; /* 배경색 제거 */
        border: none !important;     /* 테두리 제거 */
        border-radius: 0 !important; /* 라운드 효과 제거 */
        
        /* 3. 만약 화면에서 아예 안 보이게 하고 싶다면 아래 한 줄만 사용 */
        display: none !important;
    }

    /* 2. 왼쪽 슬라이드 영역을 전체 너비로 확장 */
    .slide_left {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        display: block !important;
    }
	
	.top_logo img {
        width: 110px !important; /* 150px에서 110px로 줄임 (수치는 취향껏 조절) */
        height: auto !important;  /* 비율 유지 */
    }
	
	.center-selector, .market_btn_wrap, .user_menu, .group_pay {display: none !important; /* 공간까지 완벽하게 삭제 */ }

	
	#main_wide, #main_wrapper, .main_slide_wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

   /* 1. 그리드 컨테이너: 280px 제한 해제 및 4열 배치 */
    .menu-grid-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        /* 카드 사이의 간격을 4px로 더 좁혀서 카드 본체의 폭을 확보 */
        gap: 4px !important;            
        width: 100% !important;
        max-width: 100% !important;
        /* 화면 양옆 여백을 4px로 줄여 카드를 바깥쪽으로 밀어냄 */
        padding: 0 4px !important;      
        margin: 10px auto !important;
        box-sizing: border-box !important;
		margin-top: -10px !important; /* 배너와 더 밀착시키고 싶을 때 음수 값 조정 */

    }

    /* 2. 개별 카드: 정해진 좁은 폭 내에서 글자가 잘리지 않게 조정 */
    .menu-card {
        /* 좌우 패딩을 아예 없애서 글자가 들어갈 공간을 더 확보 */
        padding: 10px 0px !important;   
        min-height: 80px !important;
        width: 100% !important;
    }

    /* 3. 아이콘 원형: 42px에서 32px로 축소하여 공간 확보 */
    .icon-circle {
        width: 32px !important;         /* 크기 축소 */
        height: 32px !important;
        margin-bottom: 8px !important;  /* 텍스트와의 간격 조정 */
    }

    .icon-circle i {
        font-size: 18px !important;     /* 아이콘 폰트 크기 조정 */
    }

    /* 4. 텍스트: 좁은 폭에서도 가독성을 높이는 초정밀 설정 */
    .menu-card .title {
        font-size: 10.5px !important;
        /* 자간을 -0.8px에서 -0.5px로 살짝 완화 (폭이 확보되었기 때문) */
        letter-spacing: -0.5px !important; 
        line-height: 1.2 !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        word-break: keep-all !important;
    }

    /* 4. 공지사항 및 FAQ 영역 (옆으로 붙지 못하게 강제 하단 배치) */
    .container_line, .content_bottom_area {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important; /* 무조건 그리드 메뉴 아래로 떨어짐 */
        margin-top: 0px !important;
        padding: 0px !important;
        box-sizing: border-box !important;
    }

    /* 5. 회색 빈 공간 원인 제거 재확인 */
    #main_wrapper_bg {
        height: auto !important;
        margin-top: -10px !important; /* 배너와 더 밀착시키고 싶을 때 음수 값 조정 */
        padding: 0 !important;
        background: #fff !important;
		border-top:1px solid #fff !important; 
		border-bottom:1px solid #fff !important; 
    }
	
	#main_wrapper_bg2 {
        height: auto !important;       /* 390px 고정 높이 해제 */
        background: none !important;    /* 회색 배경 제거 (또는 #fff) */
        border-top: none !important;    /* 상단 선 제거 */
        border-bottom: none !important; /* 하단 선 제거 */
        margin: 0 !important;           /* 외부 여백 초기화 */
        padding: 10px !important;          /* 내부 여백 초기화 */
        width: 100% !important;
		
    }
	
    /* [중요] 최신글 컨테이너가 들어가는 부모 영역 좌우 여백 */
    .menu-grid-container2 {
        padding: 0 0px !important; /* 슬라이더와 동일하게 10px 여백 부여 */
        box-sizing: border-box !important;
    }
	
	
	/* 1. 프로모션 헤더 (제목 영역) 정렬 */
    .promo-section {
        padding: 0 5px !important; /* 슬라이더/게시판과 동일한 여백 */
        margin-top: -20px !important;
        box-sizing: border-box !important;
    }

    .promo-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 15px !important;
    }

    .header-title h2 {
        font-size: 16px !important; /* 모바일 맞춤 제목 크기 */
    }

    /* 2. 카드 컨테이너: 2x2 바둑판 핵심 설정 */
    .promo-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 한 줄에 2개 */
        gap: 12px 10px !important; /* 위아래 12px, 좌우 10px 간격 */
        width: 100% !important;
    }

    /* 3. 개별 프로모션 카드 */
    .promo-card {
        display: flex !important;
        flex-direction: column !important; /* 이미지 아래 텍스트 배치 */
        background: #fff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        border: 1px solid #eee !important;
        height: auto !important;
    }

    /* 4. 이미지 영역 비율 조정 */
    .card-image-wrapper {
        width: 100% !important;
        /* 숫자가 작아질수록 높이가 낮아집니다 (기존 추천보다 더 슬림하게) */
        aspect-ratio: 16 / 6.5 !important; 
        overflow: hidden !important;
        border-bottom: 1px solid #f0f0f0 !important; /* 이미지와 텍스트 경계 구분 */
		max-height: 100px !important;
    }

    .card-thumb {
        width: 100% !important;
        height: 100% !important;
    }

    /* 5. 카드 텍스트 내용 컴팩트화 */
    .card-body {
        padding: 12px 10px !important;
    }

    .card-body .title {
        font-size: 14px !important;
        margin: 8px 0 4px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* 제목 길면 말줄임표 */
    }

    .card-body .desc {
        font-size: 12px !important;
        color: #666 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important; /* 설명도 1줄로 제한하여 높이 균일화 */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 6. 배지 및 화살표 버튼 크기 조정 */
    .badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .go-btn, .header-badge {
        display: none !important; /* 모바일에서는 카드를 직접 클릭하므로 제거하여 깔끔하게 처리 */
    }
	
	

    /* 1. 컨테이너: 가로 배열에서 세로 배열로 전환 */
    .dashboard-info-container {
        display: flex !important;
        flex-direction: column !important; /* 위아래로 쌓기 */
        gap: 15px !important;            /* 카드 사이 간격 */
        width: 100% !important;
        padding: 0 0px !important;      /* 슬라이더 가로폭과 일치 */
        margin-top: -20px  !important;
        box-sizing: border-box !important;
    }

    /* 2. 개별 카드: 너비를 100%로 확장 */
    .info-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
		padding:10px !important;
    }

    /* 3. 계좌 안내 내부 정렬 최적화 */
    .account-body {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    .btn-charge {
        width: 100% !important; /* 모바일에서는 충전 버튼을 가로로 꽉 채움 */
        padding: 12px !important;
        justify-content: center !important;
    }

    /* 4. 운영 안내 (한국/중국 사무소) 행 정렬 */
    .office-row {
        flex-wrap: wrap !important; /* 공간 부족 시 아래로 흐르게 */
        gap: 10px !important;
        padding: 15px 0 !important;
    }

    .office-info {
        flex: 1 !important;
        min-width: 120px !important;
    }

    .office-time {
        width: 100% !important; /* 시간 정보를 별도 행으로 분리하여 가독성 확보 */
        order: 3 !important;
        display: flex !important;
        justify-content: space-between !important;
        background: #f9f9f9 !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        margin-top: 5px !important;
    }

    .office-status {
        order: 2 !important; /* 상태 표시를 이름 옆으로 이동 */
    }


	

    .membership-exact-wrap,
    .clearance-container,
    .service-fee-wrap {
        width: 100% !important;
        padding: 0 0px !important; /* 슬라이더/게시판과 동일한 여백 기준 */
        margin: 20px auto !important;
        box-sizing: border-box !important;
    }

    /* 공통 타이틀 여백 조정 */
    .main-title {
        font-size: 16px !important;
        margin: 15px !important;
    }

 
    .clearance-container .info-card {
        padding: 20px 15px !important; /* 모바일 화면에 맞게 내부 패딩 축소 */
    }
    
    .gray-dot-list li {
        font-size: 13px !important;
        word-break: keep-all !important; /* 단어가 중간에 찢어지는 것 방지 */
    }

  
    .grade-table-container {
        width: 100% !important;
        overflow-x: auto !important; /* 좁은 화면에서 가로 스크롤 생성 */
        -webkit-overflow-scrolling: touch !important; /* 스마트폰에서 부드러운 스크롤 지원 */
        border-radius: 8px !important;
    }
    
    .grade-exact-table {
        width: 600px !important; /* 최소 너비를 강제하여 표 형태 유지 */
        min-width: 100% !important;
    }
    
    .grade-exact-table th, 
    .grade-exact-table td {
        padding: 12px 5px !important;
        font-size: 13px !important;
        word-break: keep-all !important;
    }
    
    .grade-icon-box i {
        font-size: 18px !important;
    }
    
    /* 요금 퍼센트 숫자 크기 모바일에 맞게 축소 */
    .fee-text-normal, 
    .fee-text-pink {
        font-size: 18px !important; 
    }

   
    .service-exact-table, 
    .service-exact-table tbody, 
    .service-exact-table tr, 
    .service-exact-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* PC용 최상단 헤더(서비스/비용/내용) 숨김 */
    .service-exact-table thead {
        display: none !important;
    }

    /* 개별 행(tr)을 하나의 카드로 변환 */
    .service-exact-table tr {
        border: 1px solid #fff !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        background-color: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
        padding: 0 !important;
    }

    /* 카드 내 개별 항목(td) 선 및 여백 조절 */
    .service-exact-table td {
        padding: 12px 15px !important;
        text-align: left !important; 
        border-bottom: 1px dashed #f1f5f9 !important; /* 부드러운 점선 구분 */
        line-height: 1.5 !important;
        word-break: keep-all !important;
    }
    
    .service-exact-table td:last-child {
        border-bottom: none !important;
    }

    /* [카드 상단] 서비스 명 (구매대행 수수료 등) */
    .service-exact-table tbody td:nth-child(1) {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #e91e63 !important; /* 핑크색 강조 */
        background-color: #fdf2f5 !important; /* 핑크색 배경 */
        border-radius: 8px 8px 0 0 !important; /* 윗부분 라운드 처리 */
        border-bottom: 1px solid #fecdd3 !important;
    }

    /* [카드 중간] 비용 (등급에 맞게 적용 등) */
    .service-exact-table tbody td:nth-child(2) {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
    }

    /* [카드 하단] 상세 내용 설명 */
    .service-exact-table tbody td:nth-child(3) {
        font-size: 13px !important;
        color: #64748b !important;
        padding-top: 5px !important; /* 비용 영역과 바짝 붙여 일체감 부여 */
        border-top: none !important;
    }
	
	/* 1. 상단 안내 카드 영역 (세로로 쌓기) */
    .delivery-info-wrap {
        display: flex !important;
        flex-direction: column !important; /* 가로 배열을 세로 배열로 변경 */
        width: 100% !important;
        padding: 0 0px !important;
        margin: 20px auto !important;
        box-sizing: border-box !important;
    }

    .delivery-card {
        width: 100% !important;
        padding: 25px 20px !important; /* 모바일 화면에 맞춰 내부 여백 살짝 축소 */
    }

    html body #wrapper div.fee-table-container {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;        /* 가로 스크롤 강력 활성화 */
        overflow-y: hidden !important;      /* 세로 잘림 방지 */
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        border: 1px solid #ebebeb !important;
    }

    /* (옵션) 눈에 확 띄는 핑크색 스크롤바 추가 (스크롤 가능함을 직관적으로 표시) */
    html body #wrapper div.fee-table-container::-webkit-scrollbar {
        height: 6px !important;
        background-color: #fafafa !important;
    }
    html body #wrapper div.fee-table-container::-webkit-scrollbar-thumb {
        background-color: #dfdfdf !important;
        border-radius: 10px !important;
    }

    /* 2. 테이블 본체: 절대 줄어들지 못하게 800px 쇳덩이로 고정 */
    html body #wrapper div.fee-table-container table.fee-exact-table {
        display: table !important;
        width: 800px !important; 
        min-width: 800px !important; 
        max-width: 800px !important; 
        table-layout: fixed !important;
        border: none !important;
        margin: 0 !important;
    }

    /* 3. 테이블 내부 셀: 글자가 밑으로 무너지는 것 완벽 방어 */
    html body #wrapper div.fee-table-container table.fee-exact-table th, 
    html body #wrapper div.fee-table-container table.fee-exact-table td {
        display: table-cell !important;
        white-space: nowrap !important; /* 줄바꿈 절대 금지 */
        word-break: keep-all !important;
        padding: 12px 8px !important;
        font-size: 12px !important;
    }

	

    .prohibited-container {
        width: 100% !important;
        padding: 0 10px !important;
        margin: 20px auto !important;
        box-sizing: border-box !important;
    }

 
    .clearance-container .gray-dot-list li {
        font-size: 13px !important;
        word-break: keep-all !important; /* 단어가 찢어지지 않게 보호 */
        line-height: 1.6 !important;
    }

    /* 3. 목록통관 가능 품목 리스트 (핵심 변환) */
    .custom-clearance-table {
        border-radius: 8px !important;
    }

    /* PC용 최상단 헤더(품목 / 세부사항)는 모바일에서 불필요하므로 숨김 */
    .tc-header {
        display: none !important;
    }

    /* 개별 품목 행을 세로 배치(카드형)로 변경 */
    .tc-row {
        flex-direction: column !important; /* 좌우 배치를 상하 배치로 전환 */
        padding: 15px !important;
    }

    /* 상단 영역: 아이콘 + 품목명 */
    .tc-col-1 {
        width: 100% !important;
        padding: 0 0 10px 0 !important; /* 내부 여백 최적화 */
        border-right: none !important; /* PC용 우측 세로선 제거 */
        border-bottom: 1px dashed #f1f5f9 !important; /* 품목명과 설명 사이에 점선 추가 */
        gap: 10px !important;
    }

    .tc-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important; /* 모바일 비율에 맞춰 아이콘 크기 축소 */
    }

    .tc-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
    }

    /* 하단 영역: 세부사항 및 경고 문구 */
    .tc-col-2 {
        width: 100% !important;
        padding: 10px 0 0 0 !important; /* 상단 텍스트와 간격 확보 */
    }

    .tc-desc, .tc-warn {
        font-size: 13px !important;
        line-height: 1.5 !important;
        word-break: keep-all !important;
    }
	
	.notice-container,
    .prohibited-container {
        width: 100% !important;
        padding: 0 0px !important;
        margin: 0px auto !important;
        box-sizing: border-box !important;
		
    }

    /* 2. 상단 핑크색 경고 공지사항 박스 */
    .notice-container {
        padding: 20px 15px !important; /* 좁은 화면에 맞춰 내부 여백 축소 */
		margin-bottom:20px !important;
    }
    
    .notice-title { font-size: 14.5px !important; }
    
    .notice-content li {
        font-size: 13px !important;
        word-break: keep-all !important; /* 텍스트 끊김 방지 */
        line-height: 1.6 !important;
    }

    .notice-contact { font-size: 13.5px !important; }
    .notice-footer { font-size: 12.5px !important; }

    /* 3. 조립품 수입금지 품목 그리드 (2단 -> 1단 변환) */
    .prohibited-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 👈 핵심: PC의 2단 배치를 1단 세로 배치로 완벽 전환 */
        gap: 15px !important; /* 카드 사이 간격 조절 */
    }

    /* 개별 카드 내부 여백 최적화 */
    .item-card {
        padding: 20px 15px !important;
    }

    .card-header h4 {
        font-size: 14.5px !important;
    }

    .card-content li, 
    .card-content p {
        font-size: 13px !important;
        word-break: keep-all !important;
        line-height: 1.5 !important;
    }

    /* 4. 하단 '그 외 통관불가 품목' 및 '주의사항' 박스 */
    .clearance-container .info-card { padding: 20px 15px !important; /* 흰색, 파란색 카드 모두 패딩 축소 */   }

    .card-intro {
        font-size: 13px !important;
        word-break: keep-all !important;
    }

    /* 붉은점, 회색점 리스트 글자 크기 최적화 */
    .red-dot-list li, 
    .gray-dot-list li {
        font-size: 13px !important;
        word-break: keep-all !important;
        line-height: 1.6 !important;
    }
	
	.modern-login-wrapper {	margin-top:15px !important; }
	
	.login-title {
		font-size: 20px !important;
		margin-bottom: 40px;
	}

	/* 1. 버튼들을 감싸는 부모 영역을 Flex 세로 정렬(column)로 변경 */
    .sns-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* 네이버와 카카오 버튼 사이의 깔끔한 간격 */
    }

    /* 2. 개별 버튼을 화면에 꽉 차는 블록 형태로 변경 */
    .sns-wrap a.sns-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* 텍스트와 아이콘을 정중앙으로 배치 (왼쪽 정렬을 원하시면 flex-start로 변경) */
        width: 100% !important;
        margin: 0 !important; /* HTML에 하드코딩된 margin-top: 5px 무력화 */
        box-sizing: border-box !important;
		padding:10px !important;
    }
	
	/* 1. 좌우로 나뉘어 있던 블록을 100% 꽉 차게 위아래로 배치 */
    .wide_block01, 
    .wide_block02 {
        float: none !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    /* 2. 각 블록 내부 여백(패딩) 최적화 */
    .wide_block01 .block_line, 
    .wide_block02 .block_line {
        padding: 20px 15px !important; /* 좁은 모바일 화면에 맞춰 패딩 축소 */
    }

    /* 3. 필수 확인 사항 텍스트 박스 높이 조절 */
    .tbl_frm01_big textarea {
        height: 250px !important; /* 모바일에서는 텍스트 박스 높이를 약간 줄여 스크롤 부담 완화 */
        padding: 15px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
	
	.tbl_frm01_big2 textarea {
        height: 100px !important; /* 모바일에서는 텍스트 박스 높이를 약간 줄여 스크롤 부담 완화 */
        padding: 15px !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* 4. '동의합니다' 체크박스 영역 강조 */
    .blue_check {
        text-align: center !important; /* 중앙 정렬로 시선 집중 */
        background-color: #f8fafc !important; /* 연한 배경색으로 독립된 영역임을 표시 */
        border: 1px solid #e2e8f0 !important;
        padding: 15px 0 !important;
        border-radius: 8px !important;
        margin-top: 15px !important;
    }

    /* 5. 배대지/국가 선택 리스트 여백 조정 */
    .wide_block02 .line01_noline {
        margin-bottom: 10px !important;
        font-size: 14px !important;
    }

    /* 6. 하단 '다음' 버튼 모바일 앱 스타일로 100% 확장 */
    .wide_block02 .btn {
        margin-top: 20px !important;
        padding: 0 15px !important;
    }

   

	.pc_blank5, .pc_blank10, .pc_blank20, .hide_on_mobile {
		display: none !important; /* 모바일에서는 공간 자체를 완전히 삭제 */
	}
	
	.auto_jak,
    .auto_jak a {
		/* 칸 자체의 너비를 넘지 못하게 차단 */
        overflow: hidden !important;
        white-space: nowrap !important;   /* 👈 핵심 1: 절대 줄바꿈 금지 */
        text-overflow: ellipsis !important; /* 👈 핵심 2: 넘치는 부분은 ... 처리 */
        
        padding: 12px 8px !important;
        vertical-align: middle !important;
	}
	
	.tbl_frm01 table, .tbl_frm02 table,
    .tbl_frm01 tbody, .tbl_frm02 tbody,
    .tbl_frm01 tr, .tbl_frm02 tr,
    .tbl_frm01 th, .tbl_frm02 th,
    .tbl_frm01 td, .tbl_frm02 td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 항목 이름(th) 디자인: 입력창 바로 위에 소제목처럼 붙게 설정 */
    .tbl_frm01 th, .tbl_frm02 th {
        border-bottom: none !important; /* 입력창과 맞닿는 하단 선 제거 */
        padding: 15px 15px 5px 15px !important; /* 하단 여백을 줄여 입력창과 밀착 */
        text-align: left !important;
        word-break: keep-all !important; /* ★ 글자 찢어짐 원천 봉쇄 */
        white-space: nowrap !important;
    }

    /* 3. 입력 영역(td) 디자인: 위쪽 선을 없애 자연스럽게 이어지도록 */
    .tbl_frm01 td, .tbl_frm02 td {
        border-top: none !important;
        padding: 5px 15px 15px 15px !important; /* 상단 여백을 줄여 제목과 밀착 */
    }

    /* 4. 입력창 크기 모바일에 맞춰 시원하게 확장 */
    .tbl_frm01 input[type="text"], .tbl_frm01 input[type="password"], 
    .tbl_frm02 input[type="text"],
    .tbl_frm01 select, 
    .tbl_frm02 select {
        width: 100% !important;
        max-width: 100% !important;
    }
	
	.wide_block02_stock{margin-top:8px !important}/* 재고등록페이지용 클래스추가 */
	
	.mypage-dashboard-wrap,
    .dashboard-counter-wrap,
    .dashboard-history-wrap {
        width: 100% !important;
        padding: 0 0px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. 상단 헤더 (환영인사 & 뱃지) 세로 정렬 */
    .dashboard-header {
        flex-direction: column !important; /* 가로 배열을 세로 배열로 */
        align-items: flex-start !important; /* 좌측 정렬 */
        gap: 8px !important;
    }
    
    .dashboard-header h2 {
        font-size: 20px !important; /* 모바일에 맞춰 폰트 사이즈 살짝 축소 */
    }

    /* 3. 3구역 회원정보 카드 (가로 -> 세로 스택) */
    .dashboard-cards {
        flex-direction: column !important; /* 3개의 카드를 위아래로 배치 */
        gap: 15px !important;
    }

    .summary-card {
        padding: 20px 15px !important; /* 내부 여백 축소 */
    }

    /* 4. 현황 카운터 (5칸 가로 배열 -> 2열 바둑판 배열) */
    .counter-card {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2칸씩 쪼개기 */
        gap: 10px !important;
        padding: 1px !important;
        background-color: transparent !important; /* 모바일은 개별 박스로 보이기 위해 부모 배경 제거 */
        border: none !important;
        box-shadow: none !important;
    }

    .counter-item {
        background-color: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 15px 10px !important;
        flex-direction: column !important; /* 아이콘/글씨 위아래 배치 */
        gap: 5px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    }

    /* 카운터 사이의 세로 구분선 제거 */
    .counter-item::after {
        display: none !important; 
    }

    .counter-item .c-value {
        font-size: 22px !important; /* 모바일 숫자 크기 최적화 */
    }

    /* 5. 하단 4단 신청내역 리스트 (가로 -> 세로 스택) */
    .history-card-container {
        flex-direction: column !important; /* 4개의 열을 위아래로 배치 */
    }

    .history-col {
        width: 100% !important;
        padding: 20px 15px !important;
        border-right: none !important; /* PC용 우측 선 제거 */
        border-bottom: 1px solid #f1f5f9 !important; /* 모바일용 하단 선 추가 */
    }

    .history-col:last-child {
        border-bottom: none !important; /* 마지막 칸은 하단 선 제거 */
    }

    .col-header {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }
	.tip5 {
        display: flex !important;
        flex-direction: column !important; /* 위: 새쪽지 글씨, 아래: 검색창 */
        align-items: flex-start !important; /* 좌측 정렬 */
        gap: 12px !important; /* 글씨와 검색창 사이의 쾌적한 간격 */
        width: 100% !important;
        box-sizing: border-box !important;
    }
	
	/* 1. 검색창과 버튼 한 줄로 꽉 차게 배치 (Flexbox) */
    .tip5 form {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* 양끝 정렬 해제 */
        gap: 8px !important; /* 입력창과 버튼 사이의 간격 */
        width: 100% !important;
    }

    /* 입력창은 남는 공간을 모두 차지하도록 설정 */
    .tip5 form input[type="text"] {
        flex: 1 1 auto !important; /* 남는 공간을 무조건 다 차지함 */
        width: 100% !important;
        margin: 0 !important;
    }

    /* 검색 버튼을 감싸는 p 태그는 찌그러지지 않게 고정 */
    .tip5 form p {
        flex-shrink: 0 !important; /* 공간이 좁아져도 버튼 영역은 안 줄어듦 */
        width: auto !important; /* 👈 중요: p 태그가 100%가 되지 않도록 방어 */
        margin: 0 !important;
        padding: 0 !important;
    }
	
	.tip5 .key {
        position: static !important; /* 👈 핵심: 공중부양 속성 박살내기 */
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }


    /* 2. 주소록 테이블 가로 스크롤 및 글자 줄바꿈 방지 */
    .tbl_frm05 {
        width: 100% !important;
        overflow-x: auto !important; /* 좁은 화면에서 가로 스크롤 생성 */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* 부드러운 터치 스크롤 */
    }

    /* 테이블이 좁아져서 글자가 찌그러지지 않도록 최소 너비 강제 지정 */
    .tbl_frm05 table {
        min-width: 700px !important; /* 5개 열이 여유있게 들어갈 너비 */
        width: 100% !important;
    }

    /* th, td 안의 글씨가 2줄로 쪼개지는 현상 원천 차단 */
    .tbl_frm05 th, 
    .tbl_frm05 td {
        white-space: nowrap !important; /* 👈 핵심: 줄바꿈 절대 금지 */
        word-break: keep-all !important;
        padding: 12px 10px !important;
    }
	
	.tbl_frm05_re ul {padding:0px; margin:0px}
	.tbl_frm05_re ul li{list-style:none; float:left; width:90% !important; padding:3px 0px; font-size:13px; }
	
	.basic_tabs_switch {
        display: flex !important;
        flex-wrap: nowrap !important; 
        gap: 4px !important; /* 탭 사이 간격을 5px -> 4px로 미세 조정 */
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: none !important;
    }
    
    /* 🚀 2. 개별 탭: 똥고집 꺾고 무조건 강제 1/3 균등 분할 */
    .basic_tabs_tab {
        flex: 1 1 0 !important; /* 확대/축소 비율을 동일하게 설정 */
        min-width: 0 !important; /* 👈 핵심: 내용물(글자) 길이보다 박스가 더 작게 줄어들 수 있도록 강제 허용 */
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .basic_tabs_tab a {
        display: block !important; 
        width: 100% !important;
        height: 18px !important;
        line-height: 18px !important; 
        text-align: center !important; 
        box-sizing: border-box !important;
        
        padding: 0 !important; /* 👈 남은 2px 여백조차 완전히 없애서 공간 100% 확보 */
        border-radius: 4px !important;
        
        font-size: 13px !important; 
        letter-spacing: -1px !important; /* 👈 자간을 조금 더 좁혀서 '웨이하이'가 오밀조밀하게 쏙 들어가게 함 */
        
        white-space: nowrap !important;
        
        /* 👇 범인이었던 이 두 녀석을 아예 삭제(주석처리)하거나 초기화합니다! */
        overflow: visible !important; 
        text-overflow: clip !important;
    }

    /* 4. 문제의 주범! 이미지 비율 폭주 방지 */
    .basic_tabs_tab a img {
        display: none !important; /* 모바일에서는 공간 자체를 완전히 삭제 */
    }

    /* 2. 진행 상태 버튼 영역 (자연스러운 줄바꿈) */
    /* 1. 탭 컨테이너: 화면 폭을 넘지 못하게 강력히 통제 */
    .step_top {
        display: flex !important;
        flex-wrap: nowrap !important;      /* 절대 줄바꿈 금지 */
        width: 100% !important;
        box-sizing: border-box !important; /* 👈 핵심: 패딩까지 포함해서 100%로 계산 */
        padding: 0 !important;             /* 숨어있는 컨테이너 여백 제거 */
        gap: 3px !important;               /* 👈 탭 사이의 간격을 살짝 좁혀서 공간 확보 */
        margin-bottom: 5px !important;
    }

    /* 2. 개별 탭: 좁은 화면에서도 4등분 유지 */
    .step_top a {
        flex: 1 1 0% !important;           /* 👈 핵심: 내용물 길이에 상관없이 무조건 4등분 강제 */
        min-width: 0 !important;           /* 👈 핵심: 글자가 길어도 탭이 화면 밖으로 늘어나는 것을 차단 */
        margin: 0 !important;
        padding: 10px 0 !important;        /* 좌우 패딩을 없애서 텍스트 공간 최대 확보 */
        text-align: center !important;
        font-size: 12px !important;        /* 👈 좁은 폰 화면에서 5글자가 겹치지 않게 폰트 살짝 축소 */
        letter-spacing: -0.5px !important; /* 글자 사이 간격(자간)을 좁혀서 슬림하게 만듦 */
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
	
	/* 개별 탭 폰트 강제 적용 및 모바일 브라우저 개입 차단 */
    /* 선택자를 body까지 끌어올려 우선순위를 최상위로 만듭니다. */
    body .step_top a,
    body .step_top a.yes, 
    body .step_top a.no,
    body .step_top a.list_select {
        font-size: 12px !important; /* 👈 12px도 좁다면 11px로 살짝 더 줄여봅니다 */
        -webkit-text-size-adjust: 100% !important; /* 👈 핵심 1: 아이폰/안드로이드의 임의 글자 확대 방지 */
        text-size-adjust: 100% !important; 
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
    }
	
	.btn_new {
        display: flex !important;
        flex-wrap: wrap !important;
        /* 👇 세로 간격을 3px, 가로 간격을 5px로 아주 촘촘하게 설정 */
        gap: 1px 5px !important; 
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 1px 0 !important;
        margin: 0 !important;
        line-height: 0 !important; /* 👈 코드 사이의 보이지 않는 공백(엔터) 제거 */
    }
    
	
	.btn_new a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        padding: 4px 9px !important; /* 위아래 패딩을 살짝 줄임 */
        margin: 0 !important; 
        
        font-size: 12px !important; 
        line-height: 1 !important; /* 👈 텍스트의 줄높이를 최소화 */
        height: 28px !important; /* 👈 모든 버튼 높이를 고정하여 줄바꿈 시 간격 일정하게 유지 */
        
        border-radius: 14px !important; 
        white-space: nowrap !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }

    /* 모바일에서는 화살표(>) 아이콘을 숨기거나 여백을 줄여 복잡도 낮춤 */
    .btn_new .step-arrow {
        display: none !important; 
    }

    /* 3. 복잡한 검색 필터 영역 정돈 (Stack & Flex) */
    .tip5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: left !important; /* 가운데 정렬 해제 */
    }

    /* 셀렉트 박스(개인통관번호, 검색조건 등) 100% 확장 */
    .tip5 select {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 날짜 검색창 2개 나란히 배치 */
    .tip5 input[name="sdate"], 
    .tip5 input[name="edate"] {
        width: calc(50% - 15px) !important; /* 반반씩 차지 */
        display: inline-block !important;
        box-sizing: border-box !important;
    }

   

    /* 검색 버튼 & 엑셀 다운 버튼 나란히 50%씩 배치 */
    .tip5 p {
        display: flex !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 5px !important;
    }
    
    .tip5 p span, 
    .tip5 p a.btn_excel_modern {
        flex: 1 !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }

   
	.tip5_new {
        padding: 10px 0 0 0 !important;
        background: #fff !important;
        display: flex !important;
        flex-wrap: wrap !important; /* 👈 중요: 요소들이 넘치면 다음 줄로 */
        align-items: center !important;
        justify-content: space-between !important; /* 양끝 정렬 */
		gap: 5px 0 !important;
    }

    /* 라디오 버튼, 체크박스, 라벨: 한 줄에 예쁘게 찰싹 붙어있도록 설정 */
    .tip5_new input[type="radio"][name="dtype"],
    .tip5_new label[for="dtype_add"],
    .tip5_new label[for="dtype_out"] {
        display: none !important;
    }
	.tip5_new input[name="checkbox"] {
		margin:5px 0px !important
	}

    .tip5_new label {
        display: inline-block !important;
        margin: 0 15px 0 0 !important; /* 다음 항목과의 우측 여백 */
        vertical-align: middle !important;
        font-size: 13px !important;
    }

    /* 날짜 검색창 (sdate, edate): 물결(~) 기호를 가운데 두고 반반씩 차지 */
    .tip5_new input[name="sdate"],
    .tip5_new input[name="edate"] {
        /* 날짜 2개 + 중간 '~' 기호 공간을 계산하여 너비 지정 */
        width: calc(50% - 12px) !important; 
        height: 30px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        text-align: center !important;
        font-size: 13px !important;
        margin: 0 0 0px 0 !important;
        display: inline-block !important;
    }
	
	.tip5_new input[name="sdate"] + text {
        display: inline-block !important;
        width: 20px !important;
        text-align: center !important;
    }
	
    /* 셀렉트 박스 (개인통관번호, 검색조건 등): 시원하게 100% 가로 확장 */
    .tip5_new select {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 0px 0 !important; /* 위아래 여백으로 숨통 틔우기 */
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    /* 하단 텍스트 검색창: 100% 가로 확장 */
    .tip5_new .frm_input {
        width: 100% !important; /* 👈 가로 꽉 채우기 */
        height: 32px !important;
        margin-top: 10px !important; /* 날짜 칸과의 간격 */
        padding: 0 10px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* 하단 검색 버튼 & 엑셀 다운 버튼: 반반씩 예쁘게 분할 */
    .tip5_new p {
        width: 100% !important;
        margin: 10px 0 0 0 !important;
    }
	
    .tip5_new p span {
        display: block !important;
        width: 100% !important;
    }
	
	.tip5_new p a.btn_excel_modern {
        display: none !important;
    }
	
	.tip5_new .btn_search_modern {
        display: flex !important;
        width: 100% !important;
        height: 40px !important;
        background: #1f2937 !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-weight: bold !important;
        text-decoration: none !important;
    }
	
	
	
	/* 1. 전체 컨테이너 정돈 */
    .tbl_frm02.order_data {
        display: block !important;
        width: 100% !important;
        padding: 1px 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. 이미지 및 상단 메타 정보 영역 */
    #data_field .view_img_data,
    #field .view_img_data {
        float: none !important; /* 👈 float: left 해제 */
        width: 100% !important;
        height: auto !important; /* 👈 271px을 지우고 내용물만큼만 높이 차지 */
        padding-right: 0 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
	
	.item-img-wrap {
        width: 120px !important;
        height: 120px !important;
        margin: 0px auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
	
	#order_set .view_img_data {
        display: none !important;
    }
	
	.view_img_data input[name^="it_img_view"] {
        width: 120px !important;
        height: 120px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        display: block !important;
        margin: 0 auto !important;
    }
	
	.view_img_data.hide {
        display: none !important;
    }

    /* 3. 🚀 핵심: 테이블을 한 줄에 하나씩 나오게 강제 전환 */
    .tbl_frm02.order_data table,
    .tbl_frm02.order_data tbody,
    .tbl_frm02.order_data tr,
    .tbl_frm02.order_data th,
    .tbl_frm02.order_data td {
        display: block !important; /* 👈 테이블 구조를 무시하고 위아래로 쌓음 */
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        border: none !important;
    }

    /* 4. 항목 이름(th) 스타일 조정 */
    .tbl_frm02.order_data th {
        padding: 5px 0 5px 0 !important;
        font-weight: bold !important;
        background: none !important;
        color: #333 !important;
    }

    /* 5. 입력창(td) 스타일 조정 */
    .tbl_frm02.order_data td {
        padding: 0 0 10px 0 !important;
    }

    .tbl_frm02.order_data input[type="text"],
    .tbl_frm02.order_data select {
        width: 100% !important; /* 👈 입력창을 가로로 꽉 채움 */
        height: 40px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        padding: 0 10px !important;
    }

    /* 6. 입고사진 갤러리 및 메모 박스 정돈 */
    .item-photo-gallery {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .img-thumb-box {
        width: calc(25% - 5px) !important; /* 한 줄에 4개씩 조밀하게 */
    }

    .item-memo-box {
        width: 100% !important;
        background: #f9f9f9 !important;
        padding: 10px !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        margin-top: 10px !important;
    }
	
	/* 다른 페이지 보호: .wide_block02 안에 있는 현황 테이블만 별도 제어 */
    .wide_block02 .tbl_frm05 {
        overflow-x: hidden !important; /* 가로 스크롤 제거 */
        width: 100% !important;
    }

    .wide_block02 .tbl_frm05 table {
        /* 기존 700px 설정을 무력화하고 화면 폭에 맞춤 */
        min-width: 0 !important; 
        width: 100% !important;
        table-layout: fixed !important; /* 5칸 균등 배분 */
    }

    .wide_block02 .tbl_frm05 th, 
    .wide_block02 .tbl_frm05 td {
        /* 기존 줄바꿈 금지(nowrap)를 해제하여 좁은 폭에 적응 */
        white-space: normal !important; 
        padding: 8px 2px !important;
        font-size: 11px !important; /* 글자가 깨지지 않게 살짝 줄임 */
        line-height: 1.2 !important;
    }

    /* 숫자 크기 강조 */
    .wide_block02 .tbl_frm05 .gray_big, 
    .wide_block02 .tbl_frm05 .pink_big {
        font-size: 14px !important;
    }
	
	.btn {
        display: flex !important;
        flex-wrap: wrap !important; /* 버튼들이 자리가 모자라면 다음 줄로 넘어가게 설정 */
        justify-content: center !important;
        gap: 20px 5px !important; /* 버튼들 사이의 기본 간격 */
        padding: 20px 10px !important;
    }
	
	.order-header-card {
        display: flex !important;
        flex-direction: column !important; /* 위아래로 쌓기 */
        padding: 15px !important;
        background: #fff !important;
        border: 1px solid #e1e4e8 !important;
        border-radius: 12px !important;
        gap: 15px !important; /* 각 영역 사이 간격 */
    }

    /* 2. 신청번호 영역: 상단에 독립적으로 배치 */
    .order-id-badge {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1px !important;
    }

    .order-id-badge .label {
        font-size: 13px !important;
        color: #666 !important;
        display: block !important;
        margin-bottom: 5px !important;
    }

    .order-id-badge .code {
        font-size: 16px !important;
        letter-spacing: -0.5px !important;
    }

	.meta-item:first-child {
        text-align: left !important;
        flex: 1 !important;
    }
	
    /* 3. 신청일 및 금액 정보 영역: 하단에 나란히 배치 */
    .order-meta-info {
        display: flex !important;
        /* 👈 핵심: 두 요소를 양쪽 끝으로 밀어냅니다. */
        justify-content: space-between !important; 
        align-items: flex-end !important; /* 아래쪽 라인을 맞춥니다. */
        width: 100% !important;
    }

    .meta-item {
        flex: 1 !important;
        min-width: 0 !important; /* 텍스트 넘침 방지 */
    }

    .m-label {
        display: block !important;
        font-size: 11px !important;
        color: #888 !important;
        margin-bottom: 3px !important;
    }

    .m-value {
        font-size: 14px !important;
        color: #333 !important;
        font-weight: 500 !important;
    }
    /* 4. 해외구매비 금액 강조 */
    .meta-item.price {text-align: right !important;
        flex: 1 !important;text-align: right !important; /* 금액은 오른쪽 정렬 */
    }

    .meta-item.price .m-value {
        color: #e91e63 !important; /* 기존 핑크색 강조 유지 */
        font-size: 16px !important;
        font-weight: bold !important;
    }

    .meta-item.price .m-value small {
        font-size: 12px !important;
        margin-left: 2px !important;
    }
	
	
	.item-view-card {
        padding: 15px !important;
        margin-bottom: 20px !important;
        background: #fff !important;
        border: 1px solid #e1e4e8 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }

    /* 2. 가로 배치를 세로 배치로 전환 */
    .item-main-flex {
        display: flex !important;
        flex-direction: column !important; /* 위아래로 쌓기 */
        gap: 15px !important;
    }

    /* 3. 이미지 영역 중앙 정렬 및 크기 고정 */
    .item-img-area {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .item-img-area img {
        width: 150px !important; /* 이미지 크기 적정화 */
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }

    /* 4. 헤더 정보 (코드, 날짜, 배지) 정돈 */
    .item-info-header {
        display: flex !important;
        flex-direction: column !important; /* 하나씩 세로로 */
        align-items: flex-start !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding-bottom: 10px !important;
    }

    .it-code {
        font-size: 14px !important;
        font-weight: bold !important;

        word-break: break-all !important; /* 긴 코드 줄바꿈 */
    }

    .it-date {
        font-size: 12px !important;
        color: #888 !important;
    }

    /* 5. 상세 정보 그리드 (라벨과 값) */
    .info-grid {
        display: block !important;
    }

    .info-row.full {
        display: block !important;
        margin-bottom: 12px !important;
    }

    .info-row.full label {
        display: block !important;
        font-size: 12px !important;
        color: #999 !important;
        margin-bottom: 4px !important;
    }

    .info-row.full .val {
        display: block !important;
        font-size: 14px !important;
        color: #333 !important;
        line-height: 1.4 !important;
        word-break: break-all !important; /* 트레킹/주문번호 줄바꿈 핵심 */
    }

    .info-row.full .val.strong {
        font-weight: bold !important;
        font-size: 15px !important;
    }

    /* 6. 메모 박스 및 갤러리 정돈 */
    .item-memo-box {
        background: #f9f9f9 !important;
        padding: 10px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        margin-top: 10px !important;
    }

    .item-photo-gallery {
        margin-top: 15px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .img-thumb-box {
        width: calc(25% - 5px) !important; /* 한 줄에 4개씩 */
        height: 60px !important;
    }
	
	
	/* 모바일 유저 존 스타일 */
    .m_menu_user_zone {
		display: block !important; /* 👈 PC에서 숨긴 것을 모바일에서 강제로 깨움 */
        padding: 10px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .m_menu_user_zone .user_profile {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .m_menu_user_zone .user_icon {
        width: 50px !important;
        height: 50px !important;
        background: #f4f7ff !important;
        color: #2550ca !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 10px !important;
        font-size: 24px !important;
    }

    .m_menu_user_zone .welcome_msg {
        font-size: 15px !important;
        color: #333 !important;
        line-height: 1.4 !important;
    }

    .m_menu_user_zone .user_id strong {
        color: #2550ca !important;
        font-weight: 700 !important;
    }

    /* 버튼 영역 */
    .m_menu_user_zone .user_btns {
        display: flex !important;
        gap: 10px !important;
    }

    .m_menu_user_zone .user_btns a {
        flex: 1 !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        background: #2550ca !important; /* 기본 파란색 버튼 */
        color: #fff !important;
        text-decoration: none !important;
        gap: 5px !important;
    }

    /* 회원가입/정보수정 버튼 (라인 스타일) */
    .m_menu_user_zone .user_btns a.line_btn {
        background: #fff !important;
        color: #666 !important;
        border: 1px solid #e1e1e1 !important;
    }

    /* 로그인 버튼 강조 (로그인 안했을 때) */
    .m_menu_user_zone .user_btns a.highlight {
        background: #3f5ab9 !important; /* 강조용 초록색 (기본 테마에 맞게 조정 가능) */
    }
	
	.btn_140_40{ width: 120px !important }
	
	
	
	
	
	.tbl_frm05_pm {
        margin-top: 20px !important; /* 👈 이 수치(20px)를 조절해서 원하는 간격을 맞추세요 */
    }
    .tbl_frm05_pm colgroup,
    .tbl_frm05_pm tr:has(th), /* th를 포함한 줄(tr) 자체를 통째로 날림 */
    .tbl_frm05_pm tbody:not(#nt_payment_list_member) { /* 그누보드 자동 생성 tbody 숨김 */
        display: none !important; 
		
    }

    /* 2. 표 형태를 해제하고 블록 형태로 전환 */
    .tbl_frm05_pm table, 
    .tbl_frm05_pm tbody {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* 3. 각각의 가로줄(tr)을 하나의 '카드'로 디자인 */
    .tbl_frm05_pm tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important; /* 상태 뱃지를 띄우기 위한 기준점 */
        background: #fff !important;
        border: 1px solid #e1e4e8 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    }

    /* 모든 칸(td)의 테이블 속성 제거 */
    .tbl_frm05_pm tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }


    /* [1번 칸] 체크박스 */
    .tbl_frm05_pm tbody td:nth-child(1) {
        width: auto !important;
        margin-right: 8px !important;
    }
    .tbl_frm05_pm tbody td:nth-child(1):empty {
        display: none !important; /* 체크박스가 출력되지 않는 조건일 때 공간 완전히 삭제 */
    }

    /* [2번 칸] 구분 및 주문번호 (카드 좌측 상단) */
    .tbl_frm05_pm tbody td:nth-child(2) {
        flex: 1 !important;
        text-align: left !important;
        font-size: 15px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;
        word-break: break-all !important;
    }

    /* [6번 칸] 결제 상태 (카드 우측 상단에 뱃지처럼 고정) */
    .tbl_frm05_pm tbody td:nth-child(6) {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        font-size: 14px !important;
        font-weight: bold !important;
    }

    /* [3번 칸] 신청일 (주문번호 바로 아래) */
    .tbl_frm05_pm tbody td:nth-child(3) {
        width: 100% !important;
        text-align: left !important;
        font-size: 12px !important;
        color: #888 !important;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
    }

    /* [4번 칸] 견적/입금 금액 (회색 영수증 박스 느낌으로 강조) */
    .tbl_frm05_pm tbody td:nth-child(4) {
        width: 100% !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 12px !important;
        font-size: 13px !important;
        text-align: left !important;
        line-height: 1.6 !important;
        color: #555 !important;
    }
    
    /* 최종 입금 금액 확실하게 강조 */
    .tbl_frm05_pm tbody td:nth-child(4) .mygrade {
        display: block !important;
        color: #e91e63 !important; /* 핑크색 강조 */
        font-size: 15px !important;
        margin-top: 5px !important;
    }
	
	#nt_payment_list_member td:nth-child(5) {
        width: 100% !important;
        margin-top: 12px !important;
        display: block !important;
        text-align: right !important;
    }
	
    /* [5번 칸] 결제정보 버튼 (카드 맨 아래에 가로 100% 꽉 채우기) */
    .tbl_frm05_pm tbody td:nth-child(5) div {
        display: inline-block !important; 
    }


    .tbl_frm05_pm tbody td:nth-child(5) .deco3_3 a {
       display: inline-flex !important;
        width: auto !important; /* 👈 핵심: 100% 꽉 채우던 것을 내용물 크기에 맞게 축소 */
        min-width: 80px !important;
        justify-content: center !important;
        align-items: center !important;
        background: #fff !important;
        color: #333 !important;
        border-radius: 6px !important; /* 버튼 모서리를 살짝 둥글게 */
        padding: 5px 7px !important; /* 버튼 크기를 아담하게 조절 */
        font-size: 12px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }
	
	
	
	
	
	
    .tbl_frm05_or colgroup,
    .tbl_frm05_or tr:has(th) {
        display: none !important; 
    }

    .tbl_frm05_or table, 
    #nt_order_list_member,
    #nt_order_list_member > tr,
    #nt_order_list_member > tr > td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

 
    #nt_order_list_member > tr:has(.new_hap) {
        background: #f8fafc !important; /* 연한 블루그레이 배경 */
        border: 1px solid #cbd5e1 !important;
        border-bottom: 2px solid #94a3b8 !important; /* 본문과의 확실한 경계선 */
        border-radius: 10px 10px 0 0 !important; /* 윗부분만 둥글게 */
        margin-top: 20px !important; /* 카드 간 간격 */
    }

    #nt_order_list_member td.new_hap {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 12px 15px !important;
        gap: 8px !important;
    }

    #nt_order_list_member td.new_hap label { display: flex; align-items: center; gap: 5px; }
    #nt_order_list_member td.new_hap p { font-size: 13px !important; font-weight: bold !important; color: #1e293b !important; margin: 0 !important; }
    
    /* 신청서 조회 등 우측 버튼들 */
    #nt_order_list_member td.new_hap .deco4 {
        margin-left: auto !important; /* 버튼을 우측으로 쫙 밀어냄 */
        background: #475569 !important;
        color: #fff !important;
        padding: 5px 12px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }

  
    #nt_order_list_member > tr:not(:has(.new_hap)) {
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-top: none !important;
        border-radius: 0 0 10px 10px !important; /* 아랫부분만 둥글게 */
        padding: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.03) !important;
    }

    /* [4-1] 센터 정보 및 주문번호 (웨이하이, BU...) */
    #nt_order_list_member td.bae_special {
        background: transparent !important;
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }
    #nt_order_list_member td.bae_special p { margin: 0 !important; font-weight: bold;  font-size: 13px !important; margin-left:-20px !important}
    
    /* [4-2] 상품 목록 내부 테이블 (이미지 + 상품정보) 해제 */
    .item_info, .item_info tbody, .item_info tr, .item_info td {
        display: block !important; width: 100% !important; border: none !important;
    }
    .item_info tr {
        display: flex !important;
        background: #f8fafc !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
    }
    
    /* 상품 썸네일 영역 (좌측 고정) */
    .item_info td.nodata_img {
        width: 75px !important;
        flex: 0 0 75px !important;
        margin-right: 15px !important;
    }
    .item_info td.nodata_img img.thumbnail {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* 상품 상세 정보 (우측 유동 영역) */
    .item_info td.tracking-cell,
    .product-info-wrap {
        min-width: 0 !important; 
        max-width: 100% !important;
    }
    .item_info .code-text { font-size: 12px !important;  display: block; }
    .item_info .product-name { font-size: 13px !important; font-weight: bold !important; color: #333 !important; line-height: 1.3 !important; margin-bottom: 1px !important; }
    
    /* 스펙(품목/단가) 리스트 가로 정렬 */
    .item_info .spec-row { display: flex !important; font-size: 12px !important; margin-bottom: 4px !important; }
    .item_info .spec-row .label { width: 65px !important; color: #64748b !important; }
    .item_info .spec-row .value { color: #1e293b !important; flex: 1 !important;overflow-wrap: break-word !important; }

    /* 트레킹 번호 붉은 박스 */
    .item_info .action-area {
        margin-top: 5px !important;        
        margin-left: -90px !important; 
        width: calc(100% + 90px) !important;
       
        padding: 1px 1px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
	.item_info .saved-tracking {
        display: flex !important;
        flex-direction: row !important; /* 다시 가로로 나란히 */
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
	.item_info .saved-tracking a,
    .item_info .saved-tracking input {
        flex: 1 !important; /* 👈 남은 가로 공간을 다 차지함 */
        background: transparent !important; 
        border: none !important; 
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        color: #ef4444 !important;
        word-break: break-all !important; 
        margin: 0 !important;
    }
    .item_info .label-red { 
        color: #ef4444 !important; 
        font-weight: bold !important; 
        margin: 0 !important;
        white-space: nowrap !important; /* 라벨 글자 줄바꿈 방지 */
    }

    /* [4-3] 신청일 및 출고일 (우측 하단으로 작게 배치) */
    #nt_order_list_member > tr > td:nth-child(3) {
        font-size: 12px !important;
        color: #94a3b8 !important;
        text-align: right !important;
        margin-bottom: 15px !important;
    }

    /* [4-4] 수취인 정보 및 결제/정보 버튼 (맨 아래 가득 채우기) */
    #nt_order_list_member > tr > td:nth-child(4) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
		justify-content: flex-end !important;
        gap: 8px !important; /* 요소들 사이의 틈(여백) 지정 */
    }
    #nt_order_list_member > tr > td:nth-child(4) p { font-size: 14px !important; font-weight: bold !important; margin-bottom: 10px !important;}
    
    /* 버튼들 모바일 최적화 (가로 100%) */
    #nt_order_list_member > tr > td:nth-child(4) .deco3_3,
    #nt_order_list_member > tr > td:nth-child(4) .deco3_2 {
        display: block !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    #nt_order_list_member > tr > td:nth-child(4) a {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    
    /* 구매비정보 등 일반 버튼 */
    #nt_order_list_member > tr > td:nth-child(4) .deco3_3 a {
        color: #3b82f6 !important;
        background: #fff !important;
    }
   
	
    /* 1. 국기 이미지(img) 숨기기 */
    #nt_order_list_member td.bae_special > img {
        display: none !important;
    }

    /* 2. 태그 없이 적힌 텍스트 숨기기 */
    #nt_order_list_member td.bae_special {
        font-size: 0 !important; /* 👈 핵심: 쌩 텍스트를 크기 0으로 만들어 증발시킴 */
    }

   
    
    #nt_order_list_member td.bae_special a {
        font-size: 13px !important; /* 신청서조회, 복사 등 버튼 글자 크기 살리기 */
    }
	
	#nt_order_list_member > tr > td:nth-child(4) > .blank10 {
        display: none !important;
    }

    /* 2. 4번째 칸 안에 있는 모든 p(이름, 일치여부)와 span(배송방식)을 가로로 눕힘 */
    #nt_order_list_member > tr > td:nth-child(4) > p,
    #nt_order_list_member > tr > td:nth-child(4) > span {
        order: 1 !important;  /* 👈 무조건 1순위로 배치 (첫 번째 줄) */
        margin: 0 !important; /* flex gap이 있으므로 개별 마진은 제거 */
    }
	#nt_order_list_member > tr > td:nth-child(4)::before {
        content: "" !important;
        display: block !important;
        flex-basis: 100% !important; 
        height: 0 !important;
        order: 2 !important; /* 👈 텍스트 다음(2순위)에 위치하여 벽을 침 */
    }
    /* 3. 첫 번째 p (수취인 이름) 스타일 유지 */
    #nt_order_list_member > tr > td:nth-child(4) > p:first-child {
        font-size: 14px !important;
        font-weight: bold !important;
        color: #1e293b !important;
    }

    /* 4. 배송방식 (이름 바로 옆에 연하게) */
    #nt_order_list_member > tr > td:nth-child(4) > span:nth-of-type(1) {
        font-size: 12px !important;
        color: #64748b !important;
        margin-right: 8px !important; /* 오른쪽 뱃지와의 간격을 살짝 띄움 */
    }

    /* 5. 🚀 핵심: '일치/불일치/기타/출고보류' 등 상태 텍스트를 앱 스타일 뱃지로 변환 */
    #nt_order_list_member > tr > td:nth-child(4) > p:not(:first-child) {
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        /* 💡 글자색(파란색/빨간색)을 읽어와서 테두리 색상도 똑같이 맞춰주는 마법의 코드! */
        border: 1px solid currentColor !important; 
        background: #fff !important;
        letter-spacing: -0.5px !important;
    }
	
    #nt_order_list_member > tr > td:nth-child(4) > div[class^="deco"] {
        order: 3 !important; 
        flex: 0 0 auto !important;  /* 👈 핵심: 빈 공간을 억지로 늘려서 채우던 고집 꺾기 */
        width: 24% !important;      /* 👈 요청하신 대로 약 20% 초중반 비율로 고정 */
        min-width: 80px !important; /* 👈 방어선: 화면이 좁을 때 '구매비정보' 5글자가 깨지지 않게 최소 크기 보장 */
        margin: 0 !important;
    }

    /* 6. 버튼 내부 디자인 (이 부분은 기존과 동일하게 유지하시면 됩니다) */
    #nt_order_list_member > tr > td:nth-child(4) > div[class^="deco"] a {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 5px 0 !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        letter-spacing: -0.5px !important;
    }
	.only_m {display: inline !important; font-size:11px !important}
	
	.tracking-group {
		display: flex !important;
        flex-direction: column !important; 
        align-items: flex-start !important;
        gap: 8px !important; 
        width: 100% !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
		margin-left: -5px !important;       
        width: calc(100% + 10px) !important;

	}
	.tracking-label {
        font-size: 13px !important;
        font-weight: bold !important;
        color: #64748b !important;
    }

    .tracking-list {
        display: flex !important;
        flex-wrap: wrap !important; 
        gap: 8px !important; /* 박스들 사이의 간격 (가로/세로 모두 적용) */
        width: 100% !important;
    }

    /* 🚀 핵심: 개별 박스를 정확히 반으로 쪼개기 */
    .tracking-item {
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;

        padding: 6px 4px !important; 
        gap: 2px !important; /* 번호와 복사 버튼 사이의 틈도 최소화 */
        
        width: calc(50% - 4px) !important; 
        box-sizing: border-box !important;
    }

    /* 번호가 너무 길어 박스를 뚫고 나가는 것을 방지 */
    .tracking-item a.tracking-link {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 12px !important;
        color: #1e293b !important;
        text-decoration: none !important;
        
        letter-spacing: -0.5px !important; /* 숫자 사이 간격 축소 */
        white-space: nowrap !important;    /* 절대 2줄로 꺾이지 않도록 강제 방어 */
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* 혹시라도 기기 화면이 너무 작아 넘치면 '...' 처리 */
    }
	
	.product-thumb {
		width: 70px !important;
		height: 70px !important;
	}
	
	
    .tbl_frm05_st colgroup,
    .tbl_frm05_st tr:has(th) {
        display: none !important;
    }

    .tbl_frm05_st table,
    .tbl_frm05_st tbody#nt_order_list_member {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }


    .tbl_frm05_st tbody#nt_order_list_member > tr {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important;
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    }

    .tbl_frm05_st tbody#nt_order_list_member > tr > td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important; 
    }

  
    /* [1] 체크박스 (좌측 상단 고정) */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(1) {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        width: auto !important;
        margin: 0 !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(1):empty {
        display: none !important;
    }

    /* [2] 재고번호 (첫 줄 혼자 다 차지함) */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(2) {
        flex: 0 0 100% !important;
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 12px !important;
        margin-bottom: 2px !important;
        font-size: 13px !important;
        font-weight: bold !important;

        word-break: break-all !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(1):empty + td {
        padding-left: 0 !important; 
    }

    /* 통합요청 뱃지 다듬기 */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(2) span {
        position: static !important; 
        display: inline-block !important;
        font-size: 11px !important;
        background: #fef2f2 !important;
        color: #ef4444 !important;
        border: 1px solid #ef4444 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        margin-left: 6px !important;
        vertical-align: middle !important;
        margin-top: -3px !important;
    }

  
    /* [3] 이미지 */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(3) {
        flex: 0 0 80px !important; 
        width: 80px !important;
        margin-right: 15px !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(3) img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(3) .blank10,
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(3) .blank5 {
        display: none !important; 
    }

    /* [4] 상품 상세 정보 (새로운 HTML 구조 적용) */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(4) {
        flex: 1 !important; 
        width: calc(100% - 95px) !important;
        text-align: left !important; 
        min-width: 0 !important; 
    }

    /* 상품명 영역 */
    .tbl_frm05_st .auto_jak { display: flex; flex-wrap: wrap; align-items: center; gap: 0px; }
    .tbl_frm05_st .product-name { font-size: 14px !important; font-weight: bold !important; color: #1e293b !important; word-break: break-all !important; line-height: 1.2 !important; }
    .tbl_frm05_st .auto_jak span[class^="color_"] { font-size: 11px !important; padding: 2px 4px !important; border-radius: 3px !important; }

    /* 품목, 단가 등 스펙 리스트 압축 */
    .tbl_frm05_st .spec-list { display: flex !important; flex-direction: column !important; gap: 2px !important; }
    .tbl_frm05_st .spec-row { display: flex !important; font-size: 12px !important; line-height: 1.3 !important; }
    .tbl_frm05_st .spec-row .label { width: 65px !important; color: #64748b !important; }
    .tbl_frm05_st .spec-row .value { color: #1e293b !important; flex: 1 !important; min-width: 0 !important; word-break: break-all !important; }


    .tbl_frm05_st .saved-tracking { display: flex !important; align-items: center !important; gap: 3px !important; width: 100% !important; }
    .tbl_frm05_st .label-red { color: #ef4444 !important; font-weight: bold !important; font-size: 12px !important; white-space: nowrap !important; }


 
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(5) {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 1px !important;
        padding-top: 12px !important;
        border-top: 1px dashed #e2e8f0 !important; 
        font-size: 13px !important;
        color: #1e293b !important;
        display: flex !important;
        align-items: center !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(5)::before {
        content: "신청수량/남은수량 : " !important; 
        color: #64748b !important;
        margin-right: 6px !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(5) br { display: none !important; }
    
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(5) a {
        display: inline-block !important;
        margin-left: auto !important; 
        font-size: 11px !important;
        padding: 4px 8px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        color: #475569 !important;
        text-decoration: none !important;
        background: #f8fafc !important;
    }

  
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(6) {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
        font-size: 13px !important;
        color: #1e293b !important;
        display: flex !important;
        align-items: center !important;
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(6)::before {
        content: "등록일 : " !important; 
        color: #64748b !important;
        margin-right: 6px !important;
    }

  
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(7) {
        flex: 0 0 100% !important;
        width: 100% !important; 
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid #f1f5f9 !important; /* 구분선 추가 */
        display: flex !important;
        align-items: center !important;          /* 👈 수직 중앙 정렬 */
        justify-content: space-between !important; /* 👈 좌우 끝으로 양분 (상태는 좌, 버튼은 우) */
    }
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(7) > .blank10 { display: none !important; }
    
    /* 입고상태 텍스트 */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(7) > span {
        font-size: 14px !important;
        font-weight: bold !important;
        color: #2550ca !important;
        margin: 0 !important; /* 기존 margin 제거 */
    }
    
    /* 🚀 핵심: 조회 버튼 크기 축소 */
    .tbl_frm05_st tbody#nt_order_list_member > tr > td:nth-child(7) a.deco4 {
        display: inline-flex !important;  /* 👈 100% 꽉 채우지 않고 글자 크기에 맞춤 */
        width: auto !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 24px !important;     /* 👈 적당히 아담한 사이즈로 변경 */
        background: #475569 !important;
        color: #fff !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
	
	
    .deposit-dashboard-container {
        display: flex !important;
        flex-direction: column !important; /* 🚀 핵심: 좌우(row) 배치를 위아래(column)로 변경 */
        gap: 15px !important;              /* 두 카드 사이의 안전한 여백 15px 확보 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 각 카드가 화면 가로를 100% 꽉 채우도록 설정 */
    .deposit-main-card,
    .deposit-side-card {
        width: 100% !important;
        flex: 0 0 auto !important;         /* PC에 있던 억지 비율 분할 속성 무력화 */
        box-sizing: border-box !important;
        margin: 0 !important;              /* 불필요한 바깥 여백 제거 */
    }
	
	
	.deposit-side-card {
        width: 100% !important;
        flex: 0 0 auto !important;         /* PC에 있던 억지 비율 분할 속성 무력화 */
        box-sizing: border-box !important;
        margin-bottom:20px !important;              /* 불필요한 바깥 여백 제거 */
    }
  
    .charge-action-box {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important; /* 입력창과 버튼 사이 간격 */
        width: 100% !important;
    }

    /* 1. 입력창: 버튼이 차지하고 남은 공간만 유연하게 사용 */
    .charge-action-box .input-charge {
        flex: 1 !important; 
        min-width: 0 !important; /* 영역을 뚫고 나가지 않도록 방어 */
        box-sizing: border-box !important;
    }

    /* 2. 충전 버튼: 절대 찌그러지지 않는 강력한 방어막 설정 */
    .charge-action-box .btn-primary-pink {
        flex-shrink: 0 !important;       /* 🚀 핵심: 부모 칸이 좁아져도 절대 줄어들지 않음 */
        width: auto !important;
        min-width: 50px !important;      /* 버튼의 최소 너비 보장 */
        padding: 12px 15px !important;
        white-space: nowrap !important;  /* 🚀 핵심: 글자가 세로로 꺾이거나 줄바꿈 되는 것 방지 */
        box-sizing: border-box !important;
        word-break: keep-all !important; 
    }
	
	.member-type-tab-wrapper {
		display: flex;
		justify-content: center;
		margin: 20px 0px !important;
		width: 100% !important;
	}

	.member-type-tab a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 !important;                 /* 🚀 핵심: 화면을 정확히 반반씩(50:50) 나눠 가짐 */
		gap: 6px !important;                /* 아이콘과 글자 사이 간격 살짝 축소 */
		padding: 12px 15px !important;       /* 좌우 패딩을 줄여서 공간 추가 확보 */
		
		white-space: nowrap !important;     
		word-break: keep-all !important;    
		
		font-size: 13px !important;
		font-weight: 400;
		color: #94a3b8;            
		text-decoration: none !important;
		border-radius: 10px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.member-type-tab a i {
		font-size: 15px !important;
		transition: transform 0.2s;
	}

	
	/* 1. li 태그 자체에 깔리는 곤색 배경 차단 */
    .lnb > li.open,
    .lnb > li:hover,
    .lnb > li:active {
        background-color: transparent !important;
    }

    /* 2. PC 버전에서 쓰던 왼쪽 포인트 바(가상 요소) 완벽 숨김 */
    .lnb > li::before,
    .lnb > li::after,
    .lnb > li.open::before,
    .lnb > li.open::after,
    .lnb .depth2::before,
    .lnb .depth2::after {
        display: none !important;
        background: none !important;
        width: 0 !important;
    }

    /* 3. 2차 메뉴 내부의 그림자나 테두리 잔재 제거 */
    .lnb .depth2 {
        box-shadow: none !important;
        border: none !important;
    }
	
	
    /* 제목 영역 여백 최적화 */
    .content_title { padding: 15px !important; }

    /* 🚀 2. 게시판 테이블 영역 쇳덩이 해제 */
    .tbl_head02_bord table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    /* 🚀 1. 고정 너비가 필요한 칸들을 정확한 이름표(class)로 지정 */
    .tbl_head02_bord th.th_num, .tbl_head02_bord td.td_num { width: 60px !important; text-align: center !important; white-space: nowrap !important; }
    .tbl_head02_bord th.th_chk, .tbl_head02_bord td.td_chk { width: 40px !important; text-align: center !important; }
    .tbl_head02_bord th.th_name, .tbl_head02_bord td.td_name { width: 100px !important; text-align: center !important; }
    .tbl_head02_bord th.th_date, .tbl_head02_bord td.td_date { width: 100px !important; text-align: center !important; white-space: nowrap !important; }
    .tbl_head02_bord th.th_good, .tbl_head02_bord th.th_nogood { width: 60px !important; text-align: center !important; }

    /* 🚀 2. 제목 칸은 'auto'를 주어 남는 모든 텅 빈 공간을 독식하도록 설정 */
    .tbl_head02_bord th.th_subj, .tbl_head02_bord td.td_subject {
        width: auto !important;
        text-align: left !important;
    }

    /* 🚀 3. 제목이 너무 길어도 1줄로 자르기 */
    .tbl_head02_bord td.td_subject a {
        display: block !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
	


    .content_title { padding: 15px !important; }

    /* 2. 게시판 테이블 영역 쇳덩이 해제 */
    #bo_list, .tbl_head02_bord, .tbl_wrap, #fboardlist {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. 테이블 본체 구조를 완전히 새롭게 구축 */
    .tbl_head02_bord table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important; 
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        margin: 0 !important;
    }

    /* 4. 불필요한 공백과 패딩 초기화 */
    .tbl_head02_bord th, .tbl_head02_bord td {
        padding: 12px 5px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    /* 5. [번호] 칸 모바일 최적화 (이름표 사용) */
    .tbl_head02_bord th.th_num, .tbl_head02_bord td.td_num {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        text-align: center !important;
    }
    
    .tbl_head02_bord td.td_num strong {
        background: #ef4444 !important;
        color: #fff !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        letter-spacing: -0.5px !important;
    }

    /* 6. [날짜] 칸 모바일 최적화 (이름표 사용) */
    .tbl_head02_bord th.th_date, .tbl_head02_bord td.td_date {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        color: #64748b !important;
        font-size: 12px !important;
        text-align: center !important;
    }

    /* 7. [제목] 칸 모바일 최적화 (이름표 사용) */
    .tbl_head02_bord th.th_subj, .tbl_head02_bord td.td_subject {
        width: auto !important;
        text-align: left !important;
        padding-left: 10px !important;
        overflow: hidden !important;
    }
    
    .tbl_head02_bord td.td_subject a {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        white-space: nowrap !important; 
        overflow: hidden !important;
        text-overflow: ellipsis !important; 
    }

    /* 8. 기타 숨김 요소 및 여백 */
    .tbl_head02_bord .empty_table { padding: 40px 0 !important; text-align: center !important; white-space: normal !important; }
    #sub_left { display: none !important; }
    .bo_fx { padding: 10px !important; }
    
    /* 9. 하단 검색창 모바일 최적화 */
    .board_search_inner { padding: 0 10px !important; }
    .search-input-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
    .search-select { width: 30% !important; flex-grow: 0 !important; padding: 10px !important; }
    .search-input { width: calc(70% - 8px) !important; flex-grow: 1 !important; padding: 10px !important; }
    .btn-search-submit { width: 100% !important; margin-top: 5px !important; padding: 12px !important; }


	#content {
        float: none !important;       /* 왼쪽으로 억지로 붙는 현상 해제 */
        margin-left: 0 !important;    /* 🚀 범인이었던 왼쪽 30px 여백 완벽 삭제 */
        margin: 0 auto !important;    /* 중앙 정렬 및 나머지 마진 초기화 */
        width: 100% !important;       /* 모바일 화면 100% 꽉 채우기 */
        max-width: 100% !important;   /* 1000px 최대 너비 제한 해제 */
        box-sizing: border-box !important; /* 패딩이 있어도 100%를 넘지 않게 방어 */
		padding:10px !important;
    }


}


    

/* --- 태블릿 (가로 1024px 이하) --- */
@media (max-width: 1024px) {
    .latest-container {
        gap: 16px; 
    }
    .lt {
        /* 2단 배치 */
        flex: 1 1 calc(50% - 8px); 
    }
}

/* --- 모바일 (가로 768px 이하) --- */
@media (max-width: 768px) {
    .latest-container {
        flex-direction: column; /* 세로 1열 배치 */
        gap: 16px; 
    }

}

@media screen and (max-width: 768px) {
    .cd-split-layout {
        flex-direction: column; /* 세로 배열로 변경 */
        gap: 25px;
    }
    
    .cd-left-panel, 
    .cd-right-panel {
        width: 100%;
    }
}

/* 모바일 화면 (480px 이하) */
@media screen and (max-width: 480px) {
    .card-deposit-wrap {
        padding: 20px 15px; 
    }

    .cd-input-group {
        flex-direction: column; /* 입력창과 버튼을 세로로 분리 */
    }

    .cd-input,
    .cd-btn {
        width: 100%; /* 100% 꽉 차게 설정 */
    }
	
	.guide-content-area img {width:80%}
}

@media screen and (max-width: 768px) {
    .timeline-card {
        flex-direction: column; /* 가로 배열을 세로 배열로 변경 */
        text-align: center;
        padding: 25px 20px;
    }

    .tl-icon {
        margin-right: 0;
        margin-bottom: 15px;
        width: 60px; /* 아이콘 크기 살짝 축소 */
    }
	
	.guide-content-area img {width:80%}
	
	
	
}


@media (max-width: 480px) {
    .cs_body {
        flex-direction: column;
        align-items: flex-start;
    }
    .cs_btns {
        flex-direction: row;
        width: 100%;
    }
    .f_btn { flex: 1; }
}
/* 1. 태블릿 (1024px 이하) */
@media (max-width: 1230px) {
    .quick_menu_wrap { flex-direction: column; padding: 0 0px; }
    .quick_banners { width: 100%; flex-direction: row; }
}

/* 2. 스마트폰 (가로 768px 이하) - 2열 구조 */
@media (max-width: 768px) {
    .quick_links {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* 가로선 제어 */
    .q_item { border-bottom: 1px solid #e2e8f0 !important; }
    .q_item:nth-child(n+5) { border-bottom: none !important; }

    /* 🚀 핵심: PC버전의 강력한 규칙(4번째 지움)을 이기기 위해 똑같이 nth-child(1n)으로 모든 선을 켬 */
    .quick_links .q_item:nth-child(1n)::before { display: block !important; } 
    
    /* 그리고 2열 구조에 맞게 홀수(1, 3, 5번째) 왼쪽 선만 깔끔하게 지움 */
    .quick_links .q_item:nth-child(2n+1)::before { display: none !important; }

    .q_item { padding: 20px 16px; }
    .quick_banners { flex-direction: column; }
}

/* 3. 아주 작은 모바일 (가로 480px 이하) - 1열 구조 */
@media (max-width: 480px) {
    /* 💡 1열로 만드는 코드와 선 제어 코드를 모두 지웠습니다! 
       (위쪽 768px의 2열 구조 및 선 설정이 그대로 상속되어 적용됩니다) */
    
    /* 좁은 화면에 2칸이 예쁘게 들어가도록 여백과 크기만 살짝 다이어트 해줍니다 */
    .q_item { 
        padding: 20px 12px; /* 좌우 여백 축소 */
        gap: 10px;          /* 아이콘과 글자 사이 간격 축소 */
    }
    
    /* 아이콘 크기 축소 */
    .q_icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    
    /* 글자 크기 축소 */
    .q_text {
        font-size: 13px;
    }
}


@media (max-width: 768px) {
    .schedule_wrap {
        padding: 0 16px;
    }
    
    /* 🚀 핵심: 첫 번째 열 고정(Sticky) 해제 */
    .schedule_table .col_method {
        width: 180px; 
        padding-left: 12px;
        position: static !important; /* 고정 기능을 끕니다 */
        z-index: 1; /* z-index 초기화 */
    }
    
    .method_label {
        font-size: 13px;
        gap: 8px;
    }
    
    .m_icon {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    
    /* 🚀 고정이 풀렸으므로 우측 그림자 효과도 숨김 처리 */
    .schedule_table .col_method::after {
        display: none !important; 
    }
}

@media (max-width: 768px) {
    .transport-tab-menu li a {
        padding: 12px 18px; /* 모바일에서는 여백을 살짝 줄여서 화면에 더 많이 보이게 함 */
        font-size: 14px; /* 글씨 크기 살짝 축소 */
    }
}

/* --- 반응형 처리 (태블릿 & 모바일 해상도 방어) --- */
@media (max-width: 1024px) {
    .modern-bottom-info {
        flex-direction: column;
    }
    .info-exchange {
        width: 100% !important; /* 고정폭 무시하고 무조건 화면 꽉 차게 강제 적용 */
    }
}

@media (max-width: 768px) {
    .info-cs-sns {
        flex-direction: column;
        padding: 25px 20px; /* 좁은 모바일 화면에 맞춰 좌우 여백 축소 */
        gap: 0; /* gap 속성을 없애고 아래의 padding으로 간격을 정밀하게 제어 */
    }
    
    .cs-section {
        width: 100%;
        padding-right: 0;
        padding-bottom: 25px;
        
        /* 아래 4줄을 추가/수정하여 내부 요소들을 완벽한 정중앙으로 강제 정렬합니다 */
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    }
    
   
	.cs-time {
        text-align: center;
    }
    
   
}

@media (max-width: 768px) {
    .sns-section {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #e9ecef !important;
        /* 위쪽은 25px, 오른쪽/아래/왼쪽은 0으로 강제 지정하여 찌꺼기 여백 완벽 제거 */
        padding: 25px 0 0 0 !important; 
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .sns-list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .sns-list li a {
        padding: 16px 5px !important; 
    }
    
    .sns-list li a span {
        font-size: 14px !important; 
    }
}


@media screen and (max-width: 768px) {
    
	#ft {
        padding: 32px 16px;
    }
    
    /* 모바일에서는 링크를 중앙 정렬 */
    .ft_links {
        justify-content: center;
        gap: 20px;
    }

    /* 정보 영역과 에스크로 이미지를 세로로 배치 */
    .ft_main {
        flex-direction: column;
        gap: 24px;
    }
    
    /* 모바일에서는 화면이 좁으므로 가로선(|)을 숨김 */
    .ft_company_info .info_row span:not(:last-child)::after {
        display: none; 
    }
    
    /* 항목들을 세로로 깔끔하게 떨어지도록 설정 */
    .ft_company_info .info_row {
        flex-direction: column;
        gap: 4px;
    }
    
    .ft_escrow {
        width: 100%;
        text-align: center; /* 이미지 중앙 정렬 */
    }
    
    .ft_escrow img {
        max-width: 320px; /* 모바일에서 배너가 너무 커지지 않도록 제어 */
        width: 100%;
    }
	
}


/* =========================================
   미디어 쿼리 (태블릿 & 모바일 768px 이하)
   ========================================= */
@media (max-width: 768px) {
    /* 기존 Grid 배열을 해제하고 위아래(블록) 구조로 강제 변경 */
    .latest-wrapper {
        display: block !important; 
        padding: 0 10px !important; /* 모바일 좌우 여백 */
    }
    
    .latest-item {
        display: block !important;
        width: 100% !important; /* 가로폭을 100%로 꽉 채움 */
        margin-bottom: 30px !important; /* 공지사항과 자주묻는질문 사이의 위아래 간격 */
    }

    /* 테두리 안쪽 여백 축소 */
    .lt {
        padding: 20px 15px 15px 15px !important;
    }
    
    /* 더보기 버튼 위치 재조정 (겹침 방지) */
    .lt .lt_more {
        top: 20px !important;
        right: 15px !important;
    }

    .lt_table td {
        padding: 12px 0 !important; 
    }
    
    .lt_date {
        width: 80px !important; 
    }
}

/* =========================================
   모바일 반응형 미디어 쿼리 (768px 이하)
   ========================================= */
@media (max-width: 768px) {
    /* 기존 Grid를 해제하고 위아래(블록) 구조로 강제 변경 */
    .custom-banner-wrapper {
        display: block !important; 
        padding: 0 10px !important; /* 모바일 좌우 여백 */
    }
    
    .banner-item {
        display: flex !important; /* 내부의 텍스트와 이미지는 나란히 유지 */
        width: 100% !important; /* 가로폭을 100%로 꽉 채움 */
        margin-bottom: 20px !important; /* ★ 유튜브 배너와 보험 배너 사이의 위아래 간격 */
        padding: 30px 20px !important; 
        box-sizing: border-box !important;
    }

    /* 마지막 배너는 아래쪽 여백을 없앰 */
    .banner-item:last-child {
        margin-bottom: 0 !important;
    }

    .banner-text h2 {
        font-size: 20px !important; /* 모바일에서는 글씨 크기를 더 줄여서 깔끔하게 */
    }

    .banner-img {
        width: 80px !important; /* 모바일 환경에 맞게 이미지 크기도 살짝 축소 */
    }
	
	.banner-icon i {
        font-size: 60px !important; 
    }
	
}

/* =========================================
   반응형 미디어 쿼리
   ========================================= */

/* 태블릿 (1024px 이하): 6개 -> 3개씩 2줄로 변경 */
@media (max-width: 1024px) {
    .quick-menu-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* 모바일 (768px 이하): 6개 -> 2개씩 3줄로 강제 변경 */
@media (max-width: 768px) {
    .quick-menu-wrapper {
        display: grid !important; /* 테마의 블록 설정을 무시하고 그리드 유지 */
        grid-template-columns: repeat(2, 1fr) !important; /* ★ 무조건 1줄에 2개씩 배치하도록 강제 */
        gap: 10px !important;
        padding: 0 10px !important;
    }
    
    .quick-menu-item {
        padding: 20px 5px !important; /* 좁은 모바일 화면을 위해 내부 여백 최소화 */
        box-sizing: border-box !important;
    }

    .quick-menu-item .icon-box {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 12px !important;
    }
    .quick-menu-item .icon-box i {
        font-size: 22px !important;
    }

    .quick-menu-item h3 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    
    .quick-menu-item p {
        font-size: 12px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.5px !important; /* 글씨가 좁은 공간에 잘 들어가도록 자간 살짝 축소 */
    }
}

@media (max-width: 768px) {
    .custom-apply-btns a {
        height: 50px; /* 모바일에서는 높이를 조금 더 축소 */
        font-size: 14px; /* 글자 크기도 축소 */
    }
    
    .custom-apply-btns a i {
        font-size: 18px; /* 모바일 아이콘 크기 축소 */
        margin-right: 4px;
    }
	
	.modern-title-box {padding-top:20px}
}

/* 팝업레이어 반응형 처리 (모바일 기기: 768px 이하) */
@media (max-width: 768px) {
    .hd_pops {
        /* 관리자에서 설정한 top, left 값을 무시하고 모바일 화면 중앙에 띄움 */
        position: fixed !important; 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 모바일 화면 너비에 맞춤 */
        width: 90% !important; 
        max-width: 400px !important;
        
        /* 높이 자동화 및 스크롤바 생성 */
        height: auto !important;
        max-height: 85vh !important; 
        overflow-y: auto !important; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    
    .hd_pops_con {
        /* 관리자에서 설정한 width, height 값을 무시 */
        width: 100% !important;
        height: auto !important;
    }

    /* 에디터로 추가한 이미지가 모바일 화면을 뚫고 나가지 않도록 처리 */
    .hd_pops_con img {
        max-width: 100% !important;
        height: auto !important;
    }

    .hd_pops_footer {
        text-align: center; /* 모바일에서는 버튼 가운데 정렬이 더 깔끔함 */
    }
}

/* =========================================
   반응형 (Mobile) - 화면 너비 768px 이하
   ========================================= */
@media screen and (max-width: 768px) {
    /* 탭 메뉴 2열로 변경 */
    .transport-tab-menu li { flex: 1 1 50%; }

    /* 테이블 구조 해제하여 수직 배치 (블록 처리) */
    .tbl_frm05_calcu table, .tbl_frm05_calcu tbody, .tbl_frm05_calcu tr, .tbl_frm05_calcu th, .tbl_frm05_calcu td {
        display: block;
        width: 100%;
    }
    
    .tbl_frm05_calcu th {
        border-bottom: none; /* 제목 아래 선 제거 */
        padding-bottom: 5px; /* 내용과의 간격 좁힘 */
    }
    
    .tbl_frm05_calcu td {
        padding-top: 5px;
        padding-bottom: 20px; /* 다음 항목과의 간격 */
    }
    
    /* 모바일에서는 입력칸을 화면 꽉 차게 */
    .tbl_frm05_calcu select,
    .tbl_frm05_calcu input[type="text"] {
        max-width: 100%; 
    }
    
    /* 부피무게 모바일 맞춤 */
    .volume-inputs { flex-direction: column; align-items: flex-start; gap: 10px; }
    .volume-inputs span { width: 100%; }
    .volume-inputs input[type="text"] {
        flex: 1; /* 남은 공간을 input이 차지하게 */
        width: auto !important; 
    }
    
    /* 체크박스 모바일 맞춤 */
    #de_option_out {
        grid-template-columns: 1fr; 
        padding: 10px 0;
    }
}

@media (max-width: 768px) {
    .mobile-center-wrap {
        display: flex !important; /* 가로 정렬을 위한 Flex 선언 */
        width: 100%;
        background-color: #0055a5; /* PC 버전 상단 메뉴와 유사한 파란색 배경 */
        color: #ffffff; /* 글씨 색상 흰색 */
    }
    
    .mobile-center-wrap .center-selector-m {
        flex: 1; /* 너비를 50:50으로 분할 */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0; /* 버튼 상하 여백 (터치하기 좋게 설정) */
        border-right: 1px solid rgba(255, 255, 255, 0.2); /* 두 버튼 사이의 은은한 구분선 */
        font-size: 14px;
        box-sizing: border-box;
    }
    
    /* 마지막 버튼은 우측 테두리(구분선) 제거 */
    .mobile-center-wrap .center-selector-m:last-child {
        border-right: none;
    }

    /* 아이콘과 텍스트 간격 조정 */
    .mobile-center-wrap .pin-icon {
        margin-right: 4px;
    }
    
    .mobile-center-wrap .main-text {
        margin-right: 2px;
    }
    
    .mobile-center-wrap .sub-text {
        font-weight: bold; /* '위해', '이우' 강조 */
    }
    
    .mobile-center-wrap .arrow-icon {
        margin-left: 4px;
    }
}