.bg_black { background-color: #222; }
.bg_dark { background-color: #24292e; }
.bg_grey { background-color: #d0d7de; }
.bg_light { background-color: #e1e4e8; }
.bg_pale { background-color: #f6f8fa; }
.bg_white { background-color: #fff; }
.bg_pale_green { background-color: #76c7c0}
.bg_transparent {background-color: transparent;}

.border_24292e { border: 1px solid #24292e; }
.border_d0d7de { border: 1px solid #d0d7de; }
.border_e1e4e8 { border: 1px solid #e1e4e8; }
.border_f6f8fa { border: 1px solid #f6f8fa; }
.border_white { border: 1px solid #fff;}

.border_dark { border: 1px solid #24292e; }
.border_grey { border: 1px solid #d0d7de; }
.border_light { border: 1px solid #e1e4e8; }
.border_pale { border: 1px solid #f6f8fa; }

.border_bottom_dark { border-bottom: 1px solid #24292e; }
.border_bottom_grey { border-bottom: 1px solid #d0d7de; }
.border_bottom_light { border-bottom: 1px solid #e1e4e8; }
.border_bottom_pale { border-bottom: 1px solid #f6f8fa; }

.border_right_dark { border-right: 1px solid #24292e; }
.border_right_grey { border-right: 1px solid #d0d7de; }
.border_right_light { border-right: 1px solid #e1e4e8; }
.border_right_pale { border-right: 1px solid #f6f8fa; }

.border_left_dark { border-left: 1px solid #24292e; }
.border_left_grey { border-left: 1px solid #d0d7de; }
.border_left_light { border-left: 1px solid #e1e4e8; }
.border_left_pale { border-left: 1px solid #f6f8fa; }

.border_top_dark { border-top: 1px solid #24292e; }
.border_top_grey { border-top: 1px solid #d0d7de; }
.border_top_light { border-top: 1px solid #e1e4e8; }
.border_top_pale { border-top: 1px solid #f6f8fa; }

.border_top_none { border-top: none;}
.border_bottom_none { border-bottom: none;}
.border_right_none { border-right: none;}
.border_left_none { border-left: none;}

.border_round_0d5_rem { border-radius: 0.5rem;}
.border_round_1_rem { border-radius: 1rem;}
.border_round_1d5_rem { border-radius: 1.5rem;}
.border_round_2_rem { border-radius: 2rem;}
.border_round_2d5_rem { border-radius: 2.5rem;}
.border_round_3_rem { border-radius: 3rem;}

.box_shadow_0 { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }

.border_box { box-sizing: border-box; }

.center_overlay {
    position: fixed; /* 화면 기준으로 고정 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    z-index: 9999; /* 가장 위로 올리기 */
    padding: 2rem;
    color: white;
    border-radius: 8px;
}

.color_black { color: #222; }
.color_dark { color: #24292e; }
.color_mild { color: #888f96; }
.color_grey { color: #d0d7de; }
.color_light { color: #e1e4e8; }
.color_pale { color: #f6f8fa; }
.color_white { color: #fff; }
/* .border_ { border: 1px solid #; }
.border_ { border: 1px solid #; ;}
.border_ { border: 1px solid #; }
.border_ { border: 1px solid #; } */

.pointer { cursor:pointer; }
.pointer_events_auto { pointer-events: auto;}
.pointer_events_none { pointer-events: none;}

.font_xxs { font-size: 0.5rem;}
.font_xs { font-size: 0.7rem;}
.font_s { font-size: 0.8rem;}
.font_n { font-size: 1rem;}
.font_l { font-size: 1.2rem;}
.font_xl { font-size: 1.4rem;}
.font_xxl { font-size: 1.6rem;}

h1 { font-size: 1.6rem;}
h2 { font-size: 1.4rem;}
h3 { font-size: 1.2rem;}
h4 { font-size: 1rem;}
h5 { font-size: 0.8rem;}
h6 { font-size: 0.7rem;}

.line_height_0d5_rem { line-height: 0.5rem; }
.line_height_1_rem { line-height: 1rem; }
.line_height_1d5_rem { line-height: 1.5rem; }
.line_height_2_rem { line-height: 2rem; }

.height_0d5_rem { height: 0.5rem; }
.height_1_rem { height: 1rem; }
.height_1d5_rem { height: 1.5rem; }
.height_2_rem { height: 2rem; }
.height_2d5_rem { height: 2.5rem; }
.height_3_rem { height: 3rem; }

.font_light { font-weight:lighter}
.font_bold { font-weight: bold; }
.bold { font-weight: bold; }
.right { text-align: right; }
.text_left { text-align: left; }
.text_center { text-align: center; }
.text_right { text-align: right; }

.display_none { display:none; }
.display_inline { display:inline; }
.display_inline_block { display:inline-block; }
.display_block { display:block; }
.display_flex { display:flex; }
.display_grid { display: grid; }
.inline_block { display:inline-block; }

.flex { display: flex; }
.grid { display: grid; }

.flex_row { flex-direction: column;}

.align_center {align-items:center;}
.align_end {align-items:end;}
.space_between {justify-content: space-between;}
.space_around { justify-content: space-around;}
.center_center {
    align-items:center;
    justify-content: center;;
}

.opacity_1 { opacity: 0.1; }
.opacity_3 { opacity: 0.3; }
.opacity_5 { opacity: 0.5; }
.opacity_7 { opacity: 0.7; }
.opacity_9 { opacity: 0.9; }

.pos_top_0_px {top: 0px;}
.pos_left_0_px {left: 0px;}
.pos_right_0_px {right: 0px;}
.pos_bottom_0_px {bottom: 0px;}
.pos_top {top: 0px;}
.pos_left { left:0px;}
.pos_right { right:0px;}
.pos_bottom { bottom:0px;}

.max_width_100_px { max-width: 100px; }
.max_height_100_px {max-height:100px;}

.max_height_1_rem { max-height: 1rem; }
.max_height_2_rem { max-height: 2rem; }
.max_height_3_rem { max-height: 3rem; }
.max_height_4_rem { max-height: 4rem; }
.max_height_5_rem { max-height: 5rem; }
.max_height_6_rem { max-height: 6rem; }
.max_height_7_rem { max-height: 7rem; }
.max_height_8_rem { max-height: 8rem; }
.max_height_9_rem { max-height: 9rem; }
.max_height_10_rem { max-height: 10rem; }
.max_height_20_rem { max-height: 20rem; }

.margin_bottom_0d5_rem { margin-bottom: 0.5rem; }
.margin_bottom_1_rem { margin-bottom: 1rem; }
.margin_bottom_1d5_rem { margin-bottom: 1.5rem; }
.margin_bottom_2_rem { margin-bottom: 2rem; }

.margin_top_0d5_rem { margin-top: 0.5rem; }
.margin_top_1_rem { margin-top: 1rem; }
.margin_top_1d5_rem { margin-top: 1.5rem; }
.margin_top_2_rem { margin-top: 2rem; }

.margin_left_0d5_rem { margin-left: 0.5rem; }
.margin_left_1_rem { margin-left: 1rem; }
.margin_left_1d5_rem { margin-left: 1.5rem; }
.margin_left_2_rem { margin-left: 2rem; }

.margin_right_0d5_rem { margin-right: 0.5rem; }
.margin_right_1_rem { margin-right: 1rem; }
.margin_right_1d5_rem { margin-right: 1.5rem; }
.margin_right_2_rem { margin-right: 2rem; }

.margin_0d5_rem { margin: 0.5rem; }
.margin_1_rem { margin: 1rem; }
.margin_1d5_rem { margin: 1.5rem; }
.margin_2_rem { margin: 2rem; }

.no_deco {text-decoration: none;}
.no_border {border:none;}
.no_margin {margin:0;}
.no_padding {padding:0;}

.overflow_auto {overflow: auto;}
.overflow_scroll {overflow: scroll;}
.overflow_hidden {overflow: hidden;}
.scroll { overflow: scroll; }

.padding_0d5_rem { padding: 0.5rem; }
.padding_1_rem { padding: 1rem; }
.padding_1d5_rem { padding: 1.5rem; }
.padding_2_rem { padding: 2rem; }

.padding_bottom_0d5_rem { padding-bottom: 0.5rem; }
.padding_bottom_1_rem { padding-bottom: 1rem; }
.padding_bottom_1d5_rem { padding-bottom: 1.5rem; }
.padding_bottom_2_rem { padding-bottom: 2rem; }

.padding_top_0d5_rem { padding-top: 0.5rem; }
.padding_top_1_rem { padding-top: 1rem; }
.padding_top_1d5_rem { padding-top: 1.5rem; }
.padding_top_2_rem { padding-top: 2rem; }

.padding_right_0d5_rem { padding-right: 0.5rem; }
.padding_right_1_rem { padding-right: 1rem; }
.padding_right_1d5_rem { padding-right: 1.5rem; }
.padding_right_2_rem { padding-right: 2rem; }

.padding_left_0d5_rem { padding-left: 0.5rem; }
.padding_left_1_rem { padding-left: 1rem; }
.padding_left_1d5_rem { padding-left: 1.5rem; }
.padding_left_2_rem { padding-left: 2rem; }

.padding_h_0d5_rem { padding: 0 0.5rem;}
.padding_h_1_rem { padding: 0 1rem;}
.padding_h_1d5_rem { padding: 0 1.5rem;}
.padding_h_2_rem { padding: 0 2rem;}

.padding_v_0d5_rem { padding: 0.5rem 0;}
.padding_v_1_rem { padding: 1rem 0;}
.padding_v_1d5_rem { padding: 1.5rem 0;}
.padding_v_2_rem { padding: 2rem 0;}

.position_absolute { position: absolute; }
.position_fixed { position:fixed; }
.position_relative { position: relative; }
.position_static { position:static; }
.position_sticky { position: sticky; }
.position_inherit { position:inherit; }
.position_initial { position:initial; }
.position_unset { position:unset; }
.relative { position: relative;}
.absolute {position:absolute;}
.fixed { position: fixed;}

.gap_0d5_rem { gap: 0.5rem;}
.gap_1_rem { gap: 1rem;}
.gap_1d5_rem { gap: 1.5rem;}
.gap_2_rem { gap: 2rem;}

.gap_1_px {gap : 1px;}

.height_10 { height: 10%;}
.height_15 { height: 15%;}
.height_20 { height: 20%;}
.height_30 { height: 30%;}
.height_40 { height: 40%;}
.height_50 { height: 50%;}
.height_60 { height: 60%;}
.height_70 { height: 70%;}
.height_80 { height: 80%;}
.height_90 { height: 90%;}
.height_100 { height: 100%;}

.width_10 { width: 10%;}
.width_15 { width: 15%;}
.width_20 { width: 20%;}
.width_30 { width: 30%;}
.width_40 { width: 40%;}
.width_50 { width: 50%;}
.width_60 { width: 60%;}
.width_70 { width: 70%;}
.width_80 { width: 80%;}
.width_90 { width: 90%;}
.width_100 { width: 100%;}

.width_0d5_rem { width: 0.5rem;}
.width_1_rem { width: 1rem;}
.width_1d5_rem { width: 1.5rem;}
.width_2_rem { width: 2rem;}

.width_100_px { width: 100px; }

.sticky { position: sticky; }

.z_1 { z-index: 1;} 
.z_2 { z-index: 2;} 
.z_3 { z-index: 3;} 
.z_10000 { z-index: 10000;} 
.z_10001 { z-index: 10001;} 
.z_10002 { z-index: 10002;} 

/* 기본 테이블 스타일 */
table.ctable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 14px;
    color: #24292e;
  }
  
  /* 헤더 */
  table.ctable thead {
    background-color: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
  }
  
  table.ctable th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    border-right: 1px solid #e1e4e8;
    white-space: nowrap;
  }
  
  /* 셀 */
  table.ctable td {
    padding: 8px 12px;
    border-top: 1px solid #e1e4e8;
    border-right: 1px solid #e1e4e8;
    white-space: nowrap;
  }
  
  /* 마지막 열엔 border 없앰 */
  table.ctable th:last-child,
  table.ctable td:last-child {
    border-right: none;
  }
  
  /* 짝수줄 배경 */
  table.ctable tbody tr:nth-child(even) {
    background-color: #f6f8fa;
  }

  /* 마우스 오버했을때 줄 배경색 */
  table.ctable tbody tr:hover {
    background-color: #e3f2fd;
  }

  /* indicator */
.animation_slide_2s_linear_infinite { animation: slide_0 5s ease-in-out infinite; }
@keyframes slide_0 {
    0% {left: -30%; }
    50% {left: 70%; }
    100% {left: -30%;}
}

.animation_none { animation: none; }