/* .g_custom table common */
.g_custom table {width:100%;border-top:2px solid #afafaf /*2c2c2c*/;font-size:14px;text-align:left;margin-top:5px;}.g_custom table td ul,.g_custom table td li {margin-left:8px;}
.g_custom table td li {list-style:disc;}

.g_custom table th{
	text-align:center;
	height:40px;padding:0 10px 0 10px;line-height:2;background-color:#f8f8f8;
	border-left:1px solid #dddddd;border-bottom:1px solid #dddddd;vertical-align:middle;
}
.g_custom table td{
	position:relative;
	height:40px;padding:5px 10px 5px 10px;line-height:2;
	border-left:1px solid #dddddd;border-bottom:1px solid #dddddd;vertical-align:middle;
}

.g_custom table.td-ptb-10 td {padding-top:10px;padding-bottom:10px;}
.g_custom table td span.sup {color:#ff5b01}
.file {
	display:inline-block;vertical-align:middle;
	width:16px;height:17px;background:url('./../images/bbs/icon-file.png') no-repeat 0 0;
}
.g_custom table td span.doc {
	display:inline-block;vertical-align:middle;
	width:15px;height:15px;background:url('./../images/bbs/icon-doc.png') no-repeat 0 0;
}
.g_custom table.col-1-th-left tr th:first-child {text-align:left;padding-left:10px;;}
.g_custom table.col-2-left tbody td:nth-child(2) {text-align:left;padding-left:1%;}
.g_custom table.col-3-left tbody td:nth-child(3) {text-align:left;padding-left:1%;}
.g_custom table.col-4-left tbody td:nth-child(4) {text-align:left;padding-left:1%;}
.g_custom table.col-5-left tbody td:nth-child(5) {text-align:left;padding-left:1%;}
.g_custom table.no-border td,.g_custom table.no-border th {border-right-width:0;border-left-width:0;}
.g_custom table tbody.col-1-left td:first-child,.g_custom table tbody.col-1-left th:first-child {text-align:left;padding-left:1%}
.g_custom table.all-align-center td,.g_custom table.all-align-center th{text-align:center;padding-left:0;padding-right:0}

.g_custom table.v-align-top th{padding-top:5px}
.g_custom table.v-align-top td{vertical-align:top;padding-top:5px}
.g_custom table thead tr:first-child {font-weight:bold;}
.g_custom table thead tr:first-child th {padding-top:3px;padding-bottom:3px}
.g_custom table tr > th:last-child{border-right-width:0;vertical-align:middle;}
.g_custom table tr > td:last-child{border-right-width:0;}

/* element */
.g_custom table tbody.no-border td,.g_custom table tbody.no-border th {border-left:0;border-right:0}
.g_custom table td.al,.g_custom table th.al {text-align:left;padding-left:1%;}
.g_custom table td.ar,.g_custom table th.ar {text-align:right;padding-right:1%;}
.g_custom table td.size-20up,.g_custom table th.size-20up {font-size:120%;}

/* pagenate */
.g_custom .pagenate {text-align:center;display:.g_custom table;margin:0 auto;margin-top:20px;margin-bottom:30px;}
.g_custom .pagenate ol li {float:left;width:30px;height:30px;border:1px solid #c2c2c2;font-size:15px;padding:3px;margin:5px;
	text-align:center;vertical-align:middle;
}
.pagenate ol li.on {color:#ffffff;background-color:#333333;border:1px solid #333333;font-weight:bold;}

/* search */
.g_custom .tbl-search select {height:30px;font-size:13px;}
.g_custom .tbl-search select.fr {float:right;}


/* view */
.g_custom .tbl-bbs.view {font-size:15px;width:100%;margin-bottom:30px;}
.g_custom .tbl-bbs.view .wrap-bbs-header {display:inline-block;width:100%;font-size:15px;padding:18px;line-height:32px;border-top:2px solid #2c2c2c;border-bottom:1px solid #dddddd}
.g_custom .tbl-bbs.view .wrap-bbs-header p {margin-right:20px;float:left;}
.g_custom .tbl-bbs.view .wrap-bbs-header p.fr {float:right;}
.g_custom .tbl-bbs.view .wrap-bbs-header .bar {margin-right:10px;margin-left:10px;}
.g_custom .tbl-bbs.view .wrap-bbs-header .title {font-weight:bold;font-size:16px;}
.g_custom .tbl-bbs.view .wrap-bbs-header {font-size:14px;background-color:#f8f8f8}
.g_custom .tbl-bbs.view .desc {padding:30px 17px 30px 17px;border-bottom:1px solid #dddddd}

.g_custom .tbl-bbs.prev-next {border-bottom:1px solid #dddddd;margin-bottom:50px;}
.g_custom .tbl-bbs.prev-next ol li span:first-child {background:url('./../images/bbs/icon-down-arrow.png') no-repeat 0 0;padding-left:30px;padding-right:30px}
.g_custom .tbl-bbs.prev-next ol li span:last-child {background:url('./../images/bbs/icon-up-arrow.png') no-repeat 0 0;padding-left:30px;padding-right:30px}
.g_custom .tbl-bbs.prev-next ol li {border-top:1px solid #dddddd;width:100%;font-size:15px;height:45px;line-height:45px;vertical-align:middle;padding-left:30px;}
.g_custom .tbl-bbs.prev-next ol li a {color:#333333}

.g_custom .wrap-bbs-btn {width:100%;text-align:center;margin-top:20px;margin-bottom:20px;}
.g_custom .wrap-bbs-btn input[type='submit'],.wrap-bbs-btn a,.wrap-bbs-btn a:link,.wrap-bbs-btn a:visited {
.g_custom 	text-decoration:none;display:inline-block;vertical-align:middle;padding:13px 30px 13px 30px;background-color:#333333;color:#ffffff;font-size:16px;
.g_custom 	letter-spacing:3px;margin-right:3px;margin-left:3px;
}
.g_custom .wrap-bbs-btn.right {text-align:right;}

/* input */
.g_custom table input[type="text"],.g_custom table input[type="password"],.g_custom table select
{border:1px solid #cccccc;height:33px;vertical-align:middle;padding-left:8px;padding-right:8px;line-height:33px;border-radius:15px;}
.g_custom table textarea {width:100%;border:1px solid #cccccc;height:200px;vertical-align:middle;padding-left:4px;margin-top:10px;margin-bottom:10px;}

.g_custom table input[type="text"]:hover,.g_custom table input[type="password"]:hover,.g_custom table select:hover {box-shadow:0px 15px 30px 0px rgba(28, 28, 32, 0.05);border-color:#000000}

.g_custom tr.list-img td {position:relative;padding:10px;line-height:1.5}
.g_custom tr.list-img .thumbnail {padding-right:20px;text-align:right;}
.g_custom tr.list-img .thumbnail img {max-height:100px;}
.g_custom tr.list-img .ing-txt {font-size:16px;color:#f25225;font-weight:bold;}
.g_custom tr.list-img .subject {font-size:16px;color:#000000;line-height:1.8;font-weight:bold;}
.g_custom tr.list-img .desc {font-size:13px;color:#000000;}
.g_custom tr.list-img .date {vertical-align:bottom;font-size:13px;color:#000000;line-height:1.9}

/* faq style */
.g_custom table .qa-q {
	position:absolute;left:10px;top:7px;
	width:26px; height:26px; border:1px solid #333333;  border-radius:13px;display:inline-block;background-color:#333333;
	color:#ffffff;font-weight:normal;text-align:center;line-height:1.6;font-size:14px;font-weight:bold;margin-right:6px
}
.g_custom table td.qa a {text-decoration:none;display:block;width:100%;background:url('./../images/bbs/icon-fold.png') no-repeat 98% 50%}
.g_custom table td.qa a:visited {color:#333333;}
.g_custom table .qa-a {
	position:absolute;left:10px;top:7px;
	width:26px; height:26px; border:1px solid #03c8b1;border-radius:13px;display:inline-block;background-color:#03c8b1;
	color:#ffffff;font-weight:normal;text-align:center;line-height:1.6;font-size:14px;font-weight:bold;margin-right:6px
}
.g_custom table tr .qa {padding-left:45px;padding-top:3px;}
.g_custom table tr.dd,.g_custom table tr.dd th {background-color:#ffffff;border-bottom:1px solid #dddddd !important}
.g_custom table tr.dl {background-color:#f8f8f8;border-bottom:1px solid #dddddd !important}


.g_custom .table-overflow-wrapper {width:100%;overflow-x:auto;}
.g_custom .table-overflow-wrapper .g_custom table {width:530px !important;margin-bottom:1px !important;}
.g_custom .table-overflow-wrapper .g_custom table.w700 {width:700px !important}
.g_custom .table-overflow-wrapper .g_custom table.w600 {width:600px !important}

.g_custom .table-overflow-wrapper .g_custom table th {font-size:11px;}
.g_custom .table-overflow-wrapper .g_custom table td {font-size:11px;}

/* 2023-09-07 */
.g_custom table.detail_form td > input[type='text'] {width:100%;}
.g_custom table.detail_form td.sub_list input {margin-top:2px;margin-bottom:2px;}
.g_custom table.detail_form td.sub_list .title {width:120px;display:inline-block;text-align:right;margin-right:5px;}
.g_custom table.detail_form td.sub_list .title input {width:calc(100% - 12px);margin-right:8px;}










/* g_custom 반응형 테이블 CSS 추가 */

/*
<!-- 1. 품목옵션 테이블 (카드형) -->
<table class="all-align-center mobile-card-table">

<!-- 2. 주문정보 테이블 (2열) -->  
<table class="mobile-two-col">

<!-- 3. 연관주문 테이블 (스크롤) -->
<div class="table-overflow-wrapper">
    <table class="all-align-center mobile-scroll-table">

<!-- 4. 모바일 숨김 -->
<th class="mobile-hide">헤더</th>

<!-- 5. 태블릿 숨김 -->
<th class="tablet-hide">헤더</th>

새로 추가된 기능
html<!-- 6. 작업관리 테이블 (카드형) -->
<table class="all-align-center mobile-work-table">

<!-- 7. 태블릿 컴팩트 -->
<table class="all-align-center tablet-compact-table">

<!-- 8. 작은 태블릿 스크롤 -->
<div class="table-overflow-wrapper">
<table class="all-align-center small-tablet-scroll-table">

*/
/* 기본 반응형 처리 */
.g_custom .table-overflow-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.g_custom .table-overflow-wrapper table {
    margin-bottom: 1px !important;
}

/* 모바일 대응 - 768px 이하 */
@media screen and (max-width: 768px) {
    
    /* 품목옵션 테이블을 카드형으로 변경 */
    .g_custom .mobile-card-table {
        display: block;
    }

    .g_custom .mobile-card-table thead {
        display: none;
    }

    .g_custom .mobile-card-table tbody {
        display: block;
    }

    .g_custom .mobile-card-table tbody[style*="border-top"] {
        display: block;
        margin-bottom: 20px;
        border: 2px solid #000 !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .g_custom .mobile-card-table tr {
        display: block;
        border: none !important;
        margin-bottom: 0;
    }

    .g_custom .mobile-card-table td, 
    .g_custom .mobile-card-table th {
        display: block;
        text-align: left !important;
        border: none !important;
        padding: 8px 15px;
        border-bottom: 1px solid #eee !important;
        position: relative;
    }

    .g_custom .mobile-card-table td:last-child {
        border-bottom: none !important;
    }

    /* 첫 번째 행의 첫 번째 셀 (상품명) */
    .g_custom .mobile-card-table tr:first-child td:first-child {
        background-color: #f6f6f6;
        font-weight: bold;
        font-size: 14px;
        padding: 12px 15px;
        border-bottom: 2px solid #ddd !important;
    }

    /* rowspan이 있는 셀은 숨기고 대신 헤더로 처리 */
    .g_custom .mobile-card-table th[rowspan] {
        display: block !important;
        background-color: #f6f6f6;
        font-weight: bold;
        font-size: 14px;
        padding: 12px 15px;
        border-bottom: 2px solid #ddd !important;
        text-align: center !important;
    }

    /* 데이터 셀에 레이블 추가 */
    .g_custom .mobile-card-table tr:nth-child(1) td:nth-child(2):before { content: "옵션: "; font-weight: bold; color: #666; }
    .g_custom .mobile-card-table tr:nth-child(1) td:nth-child(4):before { content: "가격: "; font-weight: bold; color: #666; }
    .g_custom .mobile-card-table tr:nth-child(2) td:nth-child(1):before { content: "취소: "; font-weight: bold; color: #666; }
    .g_custom .mobile-card-table tr:nth-child(2) td:nth-child(3):before { content: "총액: "; font-weight: bold; color: #666; }
    .g_custom .mobile-card-table tr:nth-child(3) td:nth-child(1):before { content: "상태: "; font-weight: bold; color: #666; }
    .g_custom .mobile-card-table tr:nth-child(3) td:nth-child(3):before { content: "수량: "; font-weight: bold; color: #666; }

    /* 일반 테이블을 2열 레이아웃으로 변경 */
    .g_custom .mobile-two-col {
        display: block;
    }

    .g_custom .mobile-two-col tbody {
        display: block;
    }

    .g_custom .mobile-two-col tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px;
    }

    .g_custom .mobile-two-col th, 
    .g_custom .mobile-two-col td {
        display: block;
        width: 50%;
        text-align: left !important;
        border: none !important;
        padding: 10px 8px;
        box-sizing: border-box;
    }

    .g_custom .mobile-two-col th {
        background-color: #f6f6f6;
        font-weight: bold;
        border-right: 1px solid #ddd !important;
    }

    /* 전체 너비 차지하는 셀 */
    .g_custom .mobile-two-col td[colspan="3"] {
        width: 100%;
    }

    /* 연관주문 테이블 - 최소 너비 설정하여 스크롤 유지 */
    .g_custom .mobile-scroll-table {
        min-width: 900px;
    }

    /* 모바일에서 숨길 컬럼들 */
    .g_custom .mobile-hide {
        display: none !important;
    }

    /* 폰트 크기 조정 */
    .g_custom table {
        font-size: 12px;
    }

    .g_custom table th, 
    .g_custom table td {
        padding: 6px 8px;
    }

    .g_custom section h3 {
        font-size: 14px;
        padding: 8px;
    }

    .g_custom .sc-info {
        font-size: 12px;
        padding: 6px;
    }

    /* 버튼 크기 조정 */
    .g_custom .btn {
        font-size: 10px;
        padding: 2px 6px;
    }

    .g_custom .btn.small {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* 태블릿 대응 - 769px ~ 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .g_custom table {
        font-size: 12px;
    }

    .g_custom table th, 
    .g_custom table td {
        padding: 6px 8px;
    }

    .g_custom .table-overflow-wrapper table {
        min-width: 700px;
    }

    /* 일부 컬럼 숨기기 */
    .g_custom .tablet-hide {
        display: none !important;
    }

    /* 긴 텍스트 말줄임 */
    .g_custom .tablet-ellipsis {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 작은 태블릿 - 600px ~ 768px */
@media screen and (min-width: 600px) and (max-width: 768px) {
    .g_custom .small-tablet-hide {
        display: none !important;
    }
}

/* 큰 화면에서의 최대 너비 제한 */
@media screen and (min-width: 1200px) {
    .g_custom .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
}

/* 반응형 유틸리티 클래스 */
.g_custom .responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.g_custom .responsive-table table {
    min-width: 600px;
}

/* 모바일에서 세로 스크롤이 있는 테이블의 높이 제한 */
@media screen and (max-width: 768px) {
    .g_custom .mobile-max-height {
        max-height: 400px;
        overflow-y: auto;
    }
}

/* 반응형 텍스트 크기 */
@media screen and (max-width: 480px) {
    .g_custom table {
        font-size: 11px;
    }
    
    .g_custom section h3 {
        font-size: 13px;
    }
    
    .g_custom .mobile-card-table td:before {
        font-size: 10px;
    }
}

/* 작업관리 테이블 반응형 CSS 추가 */
/* 수정된 작업관리 테이블 CSS */

@media screen and (max-width: 768px) {
    
    /* 작업관리 테이블을 스택형 카드로 변경 */
    .g_custom .mobile-work-table {
        display: block;
        border: none !important;
    }

    .g_custom .mobile-work-table thead {
        display: none;
    }

    .g_custom .mobile-work-table tbody {
        display: block;
    }

    .g_custom .mobile-work-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
    }

    .g_custom .mobile-work-table tr:last-child {
        margin-bottom: 0;
    }

    .g_custom .mobile-work-table td {
        display: flex;
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0 !important;
        position: relative;
        cursor: pointer !important;
        align-items: flex-start;
    }

    .g_custom .mobile-work-table td:last-child {
        border-bottom: none !important;
    }

    /* 레이블과 내용을 나란히 배치 */
    .g_custom .mobile-work-table td:before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        width: 120px;
        min-width: 120px;
        margin-right: 10px;
        font-size: 12px;
        flex-shrink: 0;
    }

    /* data-label이 없는 경우 기본 레이블 */
    .g_custom .mobile-work-table tr td:nth-child(1):before {
        content: "주문/작업번호";
    }

    .g_custom .mobile-work-table tr td:nth-child(2):before {
        content: "제품명";
    }

    .g_custom .mobile-work-table tr td:nth-child(3):before {
        content: "수량";
    }

    .g_custom .mobile-work-table tr td:nth-child(4):before {
        content: "사이즈";
    }

    .g_custom .mobile-work-table tr td:nth-child(5):before {
        content: "배송정보";
    }

    .g_custom .mobile-work-table tr td:nth-child(6):before {
        content: "상태";
    }

    /* 첫 번째 셀 강조 */
    .g_custom .mobile-work-table tr td:nth-child(1) {
        background-color: #f8f9fa;
        font-weight: bold;
        border-bottom: 2px solid #e9ecef !important;
    }

    /* 마지막 셀 (상태) 강조 */
    .g_custom .mobile-work-table tr td:nth-child(6) {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    /* 빈 데이터 행 처리 */
    .g_custom .mobile-work-table td[colspan] {
        display: block !important;
        text-align: center !important;
        padding: 30px 15px;
        color: #999;
        font-style: italic;
    }

    .g_custom .mobile-work-table td[colspan]:before {
        display: none;
    }

    /* 상태 컬러 개선 */
    .g_custom .mobile-work-table td div[style*="color:#ff0000"] {
        background-color: #fff5f5;
        color: #dc3545 !important;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: bold;
        display: inline-block;
    }

    /* 클릭 효과 */
    .g_custom .mobile-work-table tr:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* 태블릿 대응 - 작업관리 테이블 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    /* 태블릿에서는 일부 컬럼 숨기고 텍스트 축약 */
    .g_custom .tablet-compact-table th,
    .g_custom .tablet-compact-table td {
        padding: 6px 4px;
        font-size: 11px;
    }

    /* 긴 텍스트 말줄임 */
    .g_custom .tablet-compact-table .ellipsis {
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 사이즈 정보 축약 */
    .g_custom .tablet-compact-table .size-compact {
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 작은 태블릿 - 작업관리 테이블 */
@media screen and (min-width: 600px) and (max-width: 768px) {
    
    /* 스크롤 테이블로 처리 */
    .g_custom .small-tablet-scroll-table {
        min-width: 600px;
        font-size: 11px;
    }

    .g_custom .small-tablet-scroll-table th,
    .g_custom .small-tablet-scroll-table td {
        padding: 4px 6px;
        white-space: nowrap;
    }
}

/* 추가 유틸리티 */
.g_custom .work-status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.g_custom .work-status-urgent {
    background-color: #fff5f5;
    color: #d63384;
    border: 1px solid #f5c2c7;
}

.g_custom .work-status-normal {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

/* 모바일에서 hover 효과 제거 */
@media (hover: none) {
    .g_custom .mobile-work-table tr:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}