/*--------------------테이블 css start--------------------------------*/

/* 컨테이너가 바깥선 담당 → 좌측 2px 방지 */
.table-wrap{
  overflow:auto;
  border:1px solid #e5e7eb;border-right: none; border-bottom: none;
  border-top:3px solid #333; /* 상단 굵은 선 */  overflow-x: hidden
}
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {/* 표 기본 */
.COM_TB table{
  width:100%;
  min-width:720px;
  border-collapse:separate;
  border-spacing:0;
  --hdr1: 46px; /* JS가 실제 높이로 덮어씀 */
}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {/* 표 기본 */
.COM_TB table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  --hdr1: 46px; /* JS가 실제 높이로 덮어씀 */
}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

/* 셀 라인(안쪽 1px) */
.COM_TB  table th, .COM_TB table td{
  border:1px solid #e5e7eb;
  border-width:0 1px 1px 0;
  background:#fff;
  white-space:nowrap;
  position:relative; /* ::before용 */
}

/* sticky header */
.COM_TB table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f8fafc;
}
.COM_TB  table thead tr:nth-child(2) th{
  position:sticky;
  top:var(--hdr1);      /* 첫줄 높이에 맞춰 자동 */
  border-top:0;         /* 이중선 제거 */
}
/* 줄 사이 경계선 1px (스크롤해도 흔들림 없음) */
.COM_TB table thead tr:nth-child(2) th::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:1px; background:#e5e7eb;
}

/* 맨앞 sticky 헤더(교차영역 우선) */
.COM_TB table thead th:first-child{
  left:0; z-index:5; background:#f8fafc;
}

/* 바깥 왼쪽 2px 방지: 표 첫열은 왼쪽선 제거 → 컨테이너 선만 보이게 */
.COM_TB table th:first-child,
.COM_TB table td:first-child{ border-left:0; }

/* ▼ ‘rowspan’이 있으면 2행 첫칸의 위쪽선 자동 제거 (Chrome/Edge/Safari에서 동작) */
.COM_TB table thead:has(tr:first-child th[rowspan]) tr:nth-child(2) th:first-child{
  border-top:0 !important;
}
/* 위 경우에도 1px 경계선은 ::before로 유지 */
.COM_TB table thead:has(tr:first-child th[rowspan]) tr:nth-child(2) th:first-child::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:#e5e7eb;
}

/* 셀별 오버라이드(자동 생성) */
.COM_TB table th,
.COM_TB table td {
  vertical-align: middle;
}

/* 이중선 방지 보더 규칙 */
.COM_TB  th, .COM_TB  td{
  border:1px solid #e5e7eb;
  border-width:0 1px 1px 0;
  background:#fff; white-space:nowrap;
}
.COM_TB  thead tr:first-child th{ border-top-width:1px}
.COM_TB  tbody tr:first-child td{ border-top-width:1px}
/* thead가 있을 때는 tbody 첫줄 top 보더 제거(이중선 방지) */
.COM_TB  thead + tbody tr:first-child td{ border-top-width:0}
.COM_TB  thead th:first-child, .COM_TB  tbody th:first-child, .COM_TB  td:first-child{ border-left-width:1px}

/* thead */
.COM_TB  thead th{
  position:sticky; z-index:2;
  padding:12px 12px;font-size:calc(var(--tx-sm-size) * 1); text-align:center; font-weight:900; background:#f8fafc;
}
/* 좌측 th */
.COM_TB tbody th{
  position:sticky; left:0; z-index:1;
  padding:14px 14px; font-size:calc(var(--tx-sm-size) * 1);text-align:left; background:#f1f5f9;
}
/* td 기본 */
.COM_TB  td{ padding:14px 14px; font-size:calc(var(--tx-sm-size) * 0.9); text-align:center; background:#ffffff; }
/* 열/행별 정렬 */

/*세로형일때 사용*/
@media (max-width: 767px){
  /* 모바일에서는 좌측 고정 강제 해제 */
  .COM_TB table thead th:first-child { left: auto !important; }
  .COM_TB tbody th { position: static !important; left: auto !important; z-index: auto !important; }
}

 .COM_TB td.left{ text-align:left!important;  }

/* 다운로드 전용: 화살표/하단바 최소 스타일 */
.frame{position:relative;}
.arrow{
  position:absolute; top:auto; transform:translateY(-50%);
  z-index:8; background:#fff; border:1px solid #d0d7de;
  width:34px; height:34px; border-radius:50%;
  display:none; justify-content:center; align-items:center;
  font-weight:800; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.arrow.left{left:-10px} .arrow.right{right:-10px}
.hbar{position:absolute; left:10px; right:10px; bottom:8px; height:14px; z-index:7}

.hbar .bar{height:14px; overflow-x:auto; overflow-y:hidden}
.hbar .inner{height:1px}
.hbar .bar::-webkit-scrollbar{height:10px}
.hbar .bar::-webkit-scrollbar-thumb{background:#c9d2f6; border-radius:10px}

/* ===== PC (1025px+) : 가로스크롤/보조UI 전부 비활성 ===== */
@media (min-width:1025px) {
  .table-wrap {
    overflow-x: hidden;
	  overflow-y: auto;
  }
  .arrow, .hbar {
    display: none !important;
  }
	
  .table-wrap::-webkit-scrollbar {
    height: 0
  } /* 혹시 모를 스크롤바 숨김 */
}
/* ===== 모바일/태블릿 (<=1024px) ===== */
@media (max-width:1024px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .table-wrap::-webkit-scrollbar {
    display: none;
    height: 0
  }
  /* 아래 커스텀 스크롤바 보이기 */
  .hbar {
    display: block;
  }
  .arrow {
    display: flex;
  } /* 필요시 화살표 보이기 */
  .hbar .bar::-webkit-scrollbar {
    height: 5px
  }
  .hbar .bar::-webkit-scrollbar-thumb {
    background: #c9d2f6;
    border-radius: 10px
  }
}



/* 1) 보조 UI가 터치를 막지 않게(당장은 손가락 스와이프만 쓰고 싶으시니 비활성화) */
.hbar{ display:none !important; }    /* 하단 가짜 스크롤바 완전 숨김 */
.arrow{ pointer-events:none; }       /* 화살표 위에서 스와이프해도 표가 움직이게 */

/* 2) 프레임이 자식 스크롤을 방해하지 않게(클리핑만 하고 터치는 통과) */
.frame{ position:relative; }

/* 처음엔 숨김 → JS init 후 .tb-ready에서 노출 */
.frame .arrow{
  position:absolute;
  /* 세로 중앙 트릭 */
  top:0; bottom:0;               /* 위·아래에 0으로 붙이고 */
  margin-block:auto;             /* 세로 마진 auto → 남은 공간에서 가운데 */
  height:36px; width:36px;       /* 높이가 있어야 중앙 정렬이 성립 */
  display:flex; align-items:center; justify-content:center;

  /* 좌우 위치 */
  left:-10px;                      /* 왼쪽 화살표 */
  z-index:10;
  visibility:hidden;             /* 초기 깜빡임 방지 */
  /* 클릭 보장 */
  pointer-events:auto;
}

.frame .arrow.right{
  left:auto; right:-10px;     left: auto/* 오른쪽 화살표 */
}

/* 논리 속성 지원 브라우저에서 더 견고하게 (선택) */
@supports (inset-block: 0 auto){
  .frame .arrow{
    inset-block: 0 auto;         /* top/bottom 대체 */
    margin-block:auto;
  }
  
}

/* 초기화 완료 시 노출 */
.frame.tb-ready .arrow{ visibility:visible; }
/* 초기화 완료되면 보이기 */
.frame.tb-ready .arrow{ visibility:visible; }
/* 3) 모바일 구간에서도 확실히 적용되도록 보강 */
@media (max-width:1024px){
  .COM_TB .table-wrap{
    overflow-x: auto !important;     /* 중복 보강 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
}



/*--------------------테이블  css end--------------------------------*/

/* ===== 생성기 오버라이드(사용자 지정값) ===== */
.table-wrap.YJM_3060_1_1_wrap{  }
@media (max-width:1024px){
  .table-wrap.YJM_3060_1_1_wrap{ }
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.COM_TB table.YJM_3060_1_1{ width:100%; min-width:720px !important }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) { .COM_TB table.YJM_3060_1_1{ width:140%; min-width:720px !important }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

.YJM_3060_1_1 thead th{ padding:16px 16px!important; font-size:18px; text-align:center; font-weight:700; background:#f8fafc;  transform: skew(-0.201deg);}
.YJM_3060_1_1 tbody th{ padding:14px 14px!important; font-size:18px; text-align:left; background:#f1f5f9; }
.YJM_3060_1_1 td{       padding:14px 14px!important;   font-size:18px;   text-align:center;   background:#ffffff; }

/* ===== Per-cell rules (auto) ===== */
.YJM_3060_1_1 th.k-h-0-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#f8fafc !important; transform: skew(-0.201deg);}
.YJM_3060_1_1 th.k-h-0-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#f8fafc !important; transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-0-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-0-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important; transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-1-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important; transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-1-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-2-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-3-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-4-0{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-2-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-3-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-4-1{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-0-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-1-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-2-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-0-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-0-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-1-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-2-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-1-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-2-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-3-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-4-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-3-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-4-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-3-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 td.k-b-4-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#ffffff !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 th.k-h-0-2{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#f8fafc !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 th.k-h-0-3{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#f8fafc !important;;transform: skew(-0.201deg);}
.YJM_3060_1_1 th.k-h-0-4{padding:14px 14px !important;font-size:18px !important;text-align:center !important;background:#f8fafc !important;;transform: skew(-0.201deg);}