/*
:root {
    --font-sans: "Meiryo UI", "Meiryo", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
}
*/

.menu_logo{
	cursor: pointer;	
}

dialog {
	color: white;
	padding: calc(var(--spacing) * 6);
}
dialog button {
	background-color: #1d293d; 
}
  
.bg-\[url\(\/jp\/main-03\.svg\)\] {
	background-image: url(../assets/jp/main-03.svg)
}

.bg-\[url\(\/kr\/main-03\.svg\)\] {
	background-image: url(../assets/kr/main-03.svg)
}

th {
white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}



/* 상단메뉴 meet추가에 따라 변경 */
@media (min-width: 640px) {
    .sm\:gap-x-6 {
        column-gap: calc(var(--spacing) * 6);
    }  
    
    .sm\:gap-x-4 {
        column-gap: calc(var(--spacing) * 4);
    }  
    

  	.sm\:order-none {
    	order: 0;
  	}

  	.sm\:flex-nowrap {
    	flex-wrap: nowrap;
  	}
  	
  	
		.sm\:w-1\/2 {
			width: 50%
		}
  	
  	
	#paging div.grow {
		flex-grow: 0;
		padding: 0px 10px;
	}
	
}

.custom-select.disabled .selected-value {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

body[data-lang='jp'] .hide-jp {
	display: none !important;
}

body[data-lang='kr'] .hide-kr {
	display: none !important;
}

/****************************************************/
/* 일본 음성 막기 */
/* body[data-lang='jp']:not([data-gd='0']) td.media.audio { */
body[data-lang='jp'] td.media.audio {
	background-image: none;
	cursor: not-allowed !important;
	pointer-events: none;
}
/* body[data-lang='jp']:not([data-gd='0']) button.media.audio */
body[data-lang='jp']  button.media.audio {
	display: none !important;
}
/*******************************************************/

.use_ad_block,
.use_ad_flex {
	display: none !important;
}
body[data-gd='0'] .use_ad_block {
    display: block !important;
}

body[data-gd='0'] .use_ad_flex {
    display: flex !important;
}
 
.show-on-mobile {
  	display:none !important;
}


.mafeel_title {
	font-size: 34px;
}

@media (max-width: 575.98px) {
  	.hide-on-mobile {
    	display:none !important;
  	}
  	.show-on-mobile {
    	display:block !important;
  	}
  	
  	body[data-gd='0'] .hide-on-mobile {
        display: none !important;
    }
  	
  	.horse_detail_popup colgroup col:nth-child(0),
  	.horse_detail_popup colgroup col:nth-child(1){
  		width:80px;
  	}
  	
  	.horse_result_weight_td   { 
  		vertical-align: top; /* 상단 정렬 */
  		height: 70px;
  	}
  	
  	.horse_result_weight_td .line-result-wrap  { 
  		vertical-align: top; /* 상단 정렬 */
  		height:100%;
  	}
  	
  	.horse_result_weight_td .line-result-wrap .line {
  		top: 5px;
  	}
  	
  	.line-result-wrap .line div,
  	.line-result-wrap .line div,
  	.horse_result_weight_td .line-result-wrap .line div  { 
  		height:15px !important;
  	}
  	
  		
	.mafeel_title {
    	font-size: 28px;
  	}
  	
  	
	#race_dt_icon {
	display: none !important;
	}
}


/* 회원가입 selectbox */
.forturn select,
.member_step_2 select {
	background-color: var(--color-slate-950);
} 

/* head menu 고정용 */
.fix-body__ {
	padding-top: calc(var(--spacing) * 20) !important;
}
.fix-body__ header {
	padding-block: calc(var(--spacing) * 6) !important;
	padding-inline: calc(var(--spacing) * 6) !important;
	height: calc(var(--spacing) * 20) !important;
}

/* sub menu 고정용 */
.sub_menu__ {
  position: sticky;
  top: calc(var(--spacing) * 20); 
  z-index: 1000; 
}
.sub_menu.fixed__ {
  	background-color: color-mix(in oklab, var(--color-indigo-600) 10%, #161631);
}

/* 테이블 점선 border가 안보여서 */
table {
    border-collapse: separate;
    border-spacing: 0;
}

/* 선택 시 border = 0 */ 
span.num-badge {
	user-select: none;
}

/* 링크 */
.link {
	cursor: pointer; 
}

/* 상세화면에서 일자 회차 선택못하게 */
.area_disabled {
    /* opacity: 0.6; */          /* 흐리게 */
    pointer-events: none;  /* 클릭/이벤트 막기 */
}
.area_disabled button {
    opacity: 0.6;    
}
.area_disabled button.active {
	 opacity: 0.8 !important; 
}
 
/*타로카드*/
.deck.active img.open {
	transform-style: preserve-3d;
	transform-origin: 50%;
	transition: transform 1s cubic-bezier(.4, .2, .2, 1);
	animation: .5s ease-in-out forwards openCard;
	transform: rotateX(var(--rev, 0deg));
}
.deck.active img.open.rev {
	--rev: 180deg;
}
 
@keyframes openCard {
  0% {
    transform: translate(calc(var(--m) * 72px), -261px) rotateY(180deg) rotateX(var(--rev, 0deg));
  }
  100% {
    transform: translate(calc(var(--m) * 72px), -261px) rotateY(0deg) rotateX(var(--rev, 0deg));
  }
}

/*예측 경주일,경주회차*/
.race-dt.active,
.race-no.active {
  	/* bg-indigo-600/30 */
  	background-color: #4f39f64d;

  	/* border + border-indigo-600 */
  	border-style: solid;
 	border-width: 1px;
  	border-color: var(--color-indigo-600);

  	/* font-bold */
  	font-weight: var(--font-weight-bold);
}
@supports (color: color-mix(in lab, red, red)) {
	.race-dt.active,
  	.race-dt.active {
    	background-color: color-mix(
      		in oklab,
      		var(--color-indigo-600) 30%,
      		transparent
    	);
  	}
}

/* 마이크 처리 */   
button.media.standalone {
	padding: 10px !important; 
}

td.media.audio,
button.media.audio { 
	background-image: none;/*url(/static/images/media/ic-microphone-not-use.svg);*/
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 21px 21px;
  	cursor: not-allowed !important; 
}
 
button.media.audio {  
  	padding: 18px;
  	background-image: url(/static/images/media/ic-microphone-not-use.svg);
}
 
td.media.audio.ready,
button.media.audio.ready {
	background-image: url(/static/images/media/ic-microphone-stop.svg);
	cursor: pointer !important; 
}

td.media.audio.start,
button.media.audio.start {
	background-image: url(/static/images/media/ic-microphone-start.svg);
	cursor: pointer !important; 
}

button.media.audio.group.ing {
	background-image: url(/static/images/media/ic-microphone-start.svg);
	cursor: pointer !important; 
}

li[data-content_type="professional"],
li[data-content_type="comic"]{
	background-image: url(/static/images/media/ic-microphone-not-use.svg);
	background-repeat: no-repeat;
  	background-position: right;
  	background-size: 21px 21px;
}

li[data-content_type="professional"].ready,
li[data-content_type="comic"].ready{
	background-image: url(/static/images/media/ic-microphone-stop.svg);
	background-repeat: no-repeat;
  	background-position: right;
  	background-size: 21px 21px;
}
li[data-content_type="professional"].start,
li[data-content_type="comic"].start{
	background-image: url(/static/images/media/ic-microphone-start.svg);
	background-repeat: no-repeat;
  	background-position: right;
  	background-size: 21px 21px;
}

li.media.audio {  
   
}
li.media.audio.ready {
	 
} 
li.media.audio.start {
	background-color: color-mix(in oklab, var(--color-indigo-600) 40%, transparent);
}


/* youtube 처리 */ 
td.media.video,
button.media.video { 
	background-image: none;/*url(/static/images/media/ic-youtube-not-use.svg)*/;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 21px 21px;
  	cursor: not-allowed !important; 
}
button.media.video {  
  	padding: 18px;
  	background-image: url(/static/images/media/ic-youtube-not-use.svg);
}
td.media.video.ready,
button.media.video.ready {
	background-image: url(/static/images/media/ic-youtube-stop.svg);
	cursor: pointer !important; 
}
td.media.video.start,
button.media.video.start {
	background-image: url(/static/images/media/ic-youtube-start.svg);
	cursor: pointer !important; 
}

/* video modal */ 
body:has(dialog#videoModal[open]) {
	overflow: hidden
}
#videoModal button {
  outline: none; /* 가장 기본 */
  border: none;  /* 버튼 기본 테두리도 제거 */
}
#videoModal video {
  position: fixed;       /* 화면 기준으로 고정 */
  top: 50%;              /* 화면 중앙 정렬 */
  left: 50%;
  transform: translate(-50%, -50%); /* 중앙 맞춤 */
  
  width: 80vw;           /* 화면 너비 대비 80% */
  height: auto;          /* 비율 유지 */
  max-height: 80vh;      /* 화면 높이 80% 이상 안 되게 */
  
  background-color: #000; /* 영상 로딩 시 검은 배경 */
  z-index: 9999;         /* 위에 표시 */
  
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border-radius: 8px;
}

/* select box 주로 */
.going_options {
	width: calc(var(--spacing) * 20);
}


/* 나의예측 > 전체 보기 */
#btn_all_hide {
	display: none;
}
.etc_rank {
	display: none;
}




/* body에 edit를 추가 삭제 하여 처리하는 */
/* 영역 - 나의예측 > 완료 , 되돌리기*/
.edit_show_hide{
	display: none  !important;
}
.edit .edit_show_hide {
	display: flex  !important;
}

.not_allowe {
    cursor: not-allowed;
}

.edit_allow_disallow {
	opacity: 1;
	cursor: not-allowed !important;
}
.edit_allow_disallow input.custom-checkbox ,
.edit_allow_disallow label.custom-checkbox ,
.edit_allow_disallow input.custom-radio ,
.edit_allow_disallow label.custom-radio ,
.edit_allow_disallow .custom-select {
    pointer-events: none;
}

.edit .edit_allow_disallow input.custom-checkbox ,
.edit .edit_allow_disallow label.custom-checkbox , 
.edit .edit_allow_disallow input.custom-radio ,
.edit .edit_allow_disallow label.custom-radio ,
.edit .edit_allow_disallow {
	opacity: 1;
	cursor: pointer !important; 
}
.edit .edit_allow_disallow input.custom-checkbox ,
.edit .edit_allow_disallow label.custom-checkbox ,
.edit .edit_allow_disallow input.custom-radio ,
.edit .edit_allow_disallow label.custom-radio ,
.edit .edit_allow_disallow .custom-select {
    pointer-events: auto;
}

/* 변경사항이 발생하여 on/off되는  */
/* 나의예측 > 예측하기 버튼 실행 가능 */
.btn_ready{
	/* .opacity-30 */
	opacity: 0.3;
	cursor: not-allowed !important;
}
.btn_ready.ready{
	opacity: 1;
	cursor: pointer !important; 
}




div.lb{ 
	border-left: 1px solid transparent;
}
div.rb{ 
	border-right: 1px solid transparent;
}
div.tb{ 
	border-top: 1px solid transparent;
}
div.bb{ 
	border-bottom: 1px solid transparent;
}


 
td.lb{ 
	border-left-width: 1px;
}

td.rb{ 
	border-right-width: 1px;
}

td.tb{ 
	border-top-width: 1px;
}

td.bb{ 
	border-bottom-width: 1px;
}

.edit .lb{ 
	border-left: 1px dashed #ffffff;
}
.edit .rb{ 
	border-right: 1px dashed #ffffff;
}
.edit .tb{ 
	border-top: 1px dashed #ffffff;
}
.edit .bb{ 
	border-bottom: 1px dashed #ffffff;
}

.edit table td[data-type^="scale_"].editable{
	cursor: pointer !important; 
}

/* 나의예측 > 선두,선행,추격,추임,컨디션,주로 */
td[data-type="scale_1"] , 
td[data-type="scale_b"] , 
td[data-type="scale_g"] , 
td[data-type="scale_w"] , 
td[data-type="scale_y"] , 
td[data-type="scale_n"] , 
td[data-type="scale_d"], 
td[data-type="scale_m"], 
td[data-type="scale_r"] { 
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 21px 21px; 
}

td[data-scale_diff]{
  position: relative;
}

/* badge 기본 스타일 */
td[data-scale_diff]:not([data-scale_diff="0"])::after{ 
  position: absolute;
  top: calc(var(--spacing)*1);
  right: calc(var(--spacing)*1);

  min-width: 20px;
  /* padding-inline: calc(var(--spacing)*1); */
  padding-block: calc(var(--spacing)*1);

  border-radius: var(--radius-md);

  font-size: 10px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  text-align: center;

  color: var(--color-white);
  box-shadow: 0 1px 2px #0000000d;

  user-select: none;
  pointer-events: none;
}

td[data-scale_diff^="-"]::after{
  content: attr(data-scale_diff);
}
td[data-scale_diff]:not([data-scale_diff="0"]):not([data-scale_diff^="-"])::after{
  content: "+"attr(data-scale_diff);	
}

td[data-scale_diff^="-"]::after{
	background-color: var(--color-blue-500);
}
td[data-scale_diff^="-"]{
	background-color: color-mix(in oklab, var(--color-blue-600) 40%, transparent) !important;
}

td[data-scale_diff]:not([data-scale_diff="0"]):not([data-scale_diff^="-"])::after{
	background-color: var(--color-red-500);
}
td[data-scale_diff]:not([data-scale_diff="0"]):not([data-scale_diff^="-"]){
	background-color: color-mix(in oklab, var(--color-red-600) 40%, transparent) !important;
}

td[data-scale_diff="0"]::after{
	display:none;
}


 
td[data-type="scale_1"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_1_1.svg);
}
td[data-type="scale_1"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_1_2.svg);
}
td[data-type="scale_1"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_1_3.svg);
}
td[data-type="scale_1"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_1_4.svg);
}
td[data-type="scale_1"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_1_5.svg);
}

 
td[data-type="scale_b"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_b_1.svg);
}
td[data-type="scale_b"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_b_2.svg);
}
td[data-type="scale_b"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_b_3.svg);
}
td[data-type="scale_b"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_b_4.svg);
}
td[data-type="scale_b"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_b_5.svg);
}

 
td[data-type="scale_g"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_g_1.svg);
}
td[data-type="scale_g"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_g_2.svg);
}
td[data-type="scale_g"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_g_3.svg);
}
td[data-type="scale_g"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_g_4.svg);
}
td[data-type="scale_g"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_g_5.svg);
}

 
td[data-type="scale_w"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_w_1.svg);
}
td[data-type="scale_w"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_w_2.svg);
}
td[data-type="scale_w"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_w_3.svg);
}
td[data-type="scale_w"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_w_4.svg);
}
td[data-type="scale_w"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_w_5.svg);
}

 
td[data-type="scale_y"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_y_1.svg);
}
td[data-type="scale_y"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_y_2.svg);
}
td[data-type="scale_y"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_y_3.svg);
}
td[data-type="scale_y"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_y_4.svg);
}
td[data-type="scale_y"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_y_5.svg);
}

 
td[data-type="scale_d"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_d_1.svg);
}
td[data-type="scale_d"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_d_2.svg);
}
td[data-type="scale_d"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_d_3.svg);
}
td[data-type="scale_d"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_d_4.svg);
}
td[data-type="scale_d"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_d_5.svg);
}
td[data-type="scale_d"][data-scale_change^="6"]{
	background-image: url(/static/images/scale/scale_d_6.svg);
}
td[data-type="scale_d"][data-scale_change^="7"]{
	background-image: url(/static/images/scale/scale_d_7.svg);
}
td[data-type="scale_d"][data-scale_change^="8"]{
	background-image: url(/static/images/scale/scale_d_8.svg);
}
td[data-type="scale_d"][data-scale_change^="9"]{
	background-image: url(/static/images/scale/scale_d_9.svg);
}

td[data-type="scale_m"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_m_1.svg);
}
td[data-type="scale_m"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_m_2.svg);
}
td[data-type="scale_m"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_m_3.svg);
}
td[data-type="scale_m"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_m_4.svg);
}
td[data-type="scale_m"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_m_5.svg);
}
td[data-type="scale_m"][data-scale_change^="6"]{
	background-image: url(/static/images/scale/scale_m_6.svg);
}
td[data-type="scale_m"][data-scale_change^="7"]{
	background-image: url(/static/images/scale/scale_m_7.svg);
}
td[data-type="scale_m"][data-scale_change^="8"]{
	background-image: url(/static/images/scale/scale_m_8.svg);
}
td[data-type="scale_m"][data-scale_change^="9"]{
	background-image: url(/static/images/scale/scale_m_9.svg);
}




 
td[data-type="scale_r"][data-scale_change^="1"]{
	background-image: url(/static/images/scale/scale_r_1.svg);
}
td[data-type="scale_r"][data-scale_change^="2"]{
	background-image: url(/static/images/scale/scale_r_2.svg);
}
td[data-type="scale_r"][data-scale_change^="3"]{
	background-image: url(/static/images/scale/scale_r_3.svg);
}
td[data-type="scale_r"][data-scale_change^="4"]{
	background-image: url(/static/images/scale/scale_r_4.svg);
}
td[data-type="scale_r"][data-scale_change^="5"]{
	background-image: url(/static/images/scale/scale_r_5.svg);
}


td[data-type="scale_n"] { 
	position: relative;
}
td[data-type="scale_n"]::before { 
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
   	
  	color: white;
  	z-index: 0;
  	
  	/* .font-bold */
  	--tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    /*  .text-xl   */
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height)); 
}
 
td[data-type="scale_n"][data-scale_change^="1"]::before {
  	content: "1"; 
}
td[data-type="scale_n"][data-scale_change^="2"]::before {
  	content: "2"; 
}
td[data-type="scale_n"][data-scale_change^="3"]::before {
  	content: "3"; 
}
td[data-type="scale_n"][data-scale_change^="4"]::before {
  	content: "4"; 
}
td[data-type="scale_n"][data-scale_change^="5"]::before {
  	content: "5"; 
}


td[data-type^="scale_"].scale-plus {
	position: relative;
	/* 
	@supports (color:color-mix(in lab,red,red)) {
    .\!bg-blue-600\/40 {
     */
    background-color: color-mix(in oklab, var(--color-blue-600) 40%, transparent) !important;
	 
	/* .\!bg-blue-600\/40 */ 
	background-color: #155dfc66 !important; 
}
td[data-type^="scale_"].scale-minus {
	position: relative;
	/* 
	@supports (color:color-mix(in lab,red,red)) {
    .\!bg-blue-600\/40 {
     */
   	background-color: color-mix(in oklab, var(--color-red-600) 40%, transparent) !important; 
	 
	/* .\!bg-blue-600\/40 */ 
	background-color: #e4001466 !important;
}




/* 회원가입 */
.all_agree {
	background-color: var(--color-indigo-500);
	color: var(--color-white)
}

/* 회원정보변경 */
.dialog_bg::backdrop {
  background: rgba(0, 0, 0, 0.7); /* 검정 반투명 */
  backdrop-filter: blur(4px);     /* 선택: 블러 효과 */
}


/*
예측 table bg 처리
*/
.bg_1 {
	background-color: #0000;
}
.bg_2 {
	background-color: #0f172a;
} 



/*나의 예측 > history 링크 처리*/
.history_uuid {
	cursor: pointer;
}
.history_uuid:hover  p,
.history_uuid.active p{
	color: white;
}


/* 달력 */
.ui-datepicker {
    z-index: 9999 !important;
}

.ui-datepicker * {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    box-sizing: content-box; 
}

.ui-datepicker {
    display: block;
    position: absolute;
    width: auto;
    background: #fff; 
    border: 1px solid #ccc;
    padding: 0.2em;
    z-index: 9999;
    font-size: 0.9em;
}

.ui-datepicker table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.ui-datepicker th {
    padding: 0.2em 0.4em;
    font-weight: bold;
}

.ui-datepicker td {
    padding: 0.2em 0.4em;
    text-align: center;
}

.ui-datepicker table tr th:first-child,
.ui-datepicker table tr td:first-child { 
	border-left-width: 0px
}

.ui-datepicker td a {
    display: block;
    text-decoration: none;
    padding: 0.2em 0.4em;
    color: #333;
    background: #fff;
}

.ui-datepicker td a:hover,
.ui-datepicker td a.ui-state-hover {
    background: #eee;
    border-radius: 3px;
}

.ui-datepicker td a.ui-state-active {
    background: #4f39f6;
    color: #fff;
    border-radius: 3px;
}



/*복병마 상세*/
.line-wrap {
	position: relative;
  	left: 5px;   /* 시작 위치 이동 */
	height: 100%;
}

.line {
	position: absolute;
  	display:grid;
  	grid-template-columns: repeat(5,1fr);
  	gap:1px;
  	width:100%;
}

.line div{
  	height:6px; 
}
 

/* 5단계 위치 */
.step-5 { top: 0%; }
.step-4 { top: 25%; }
.step-3 { top: 50%; }
.step-2 { top: 75%; }
.step-1 { top: 100%; transform: translateY(-100%); }


body[data-lang='kr'] .line1  div{ background:#ffffff; } /* 백 */
body[data-lang='kr'] .line2  div{ background:#ffd700; } /* 황 */
body[data-lang='kr'] .line3  div{ background:#ff0000; } /* 적 */
body[data-lang='kr'] .line4  div{ background:#000000; border: 1px solid white;} /* 흑 */ 
body[data-lang='kr'] .line5  div{ background:#0033cc; } /* 청 */
body[data-lang='kr'] .line6  div{ background:#00aa00; } /* 녹 */
body[data-lang='kr'] .line7  div{ background:#8b4513; } /* 다 */
body[data-lang='kr'] .line8  div{ background:#ff99cc; } /* 도 */
body[data-lang='kr'] .line9  div{ background:#800080; } /* 자 */
body[data-lang='kr'] .line10 div{ background:#87ceeb; } /* 수 */

body[data-lang='kr'] .line11 div{
  background: repeating-linear-gradient(
    45deg,
    #ffffff,
    #ffffff 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

body[data-lang='kr'] .line12 div{
  background: repeating-linear-gradient(
    45deg,
    #ffd700,
    #ffd700 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

body[data-lang='kr'] .line13 div{
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

body[data-lang='kr'] .line14 div{
  background: repeating-linear-gradient(
    45deg,
    #000000,
    #000000 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

body[data-lang='kr'] .line15 div{
  background: repeating-linear-gradient(
    45deg,
    #0033cc,
    #0033cc 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

body[data-lang='kr'] .line16 div{
  background: repeating-linear-gradient(
    45deg,
    #00aa00,
    #00aa00 6px,
    #87ceeb 6px,
    #87ceeb 12px
  );
}

/* 1 ~ 10 : 단색 */
body[data-lang='jp'] .waku1  div{ background: #ffffff;} /* 흰  */
body[data-lang='jp'] .waku2  div{ background: #45556C;     border: 1px solid #7b7b7b;} /* 검정 */
body[data-lang='jp'] .waku3  div{ background: #dc3c3c;} /* 빨강 */
body[data-lang='jp'] .waku4  div{ background: #2c53a9;} /* 파랑 */
body[data-lang='jp'] .waku5  div{ background: #e4ca3b;} /* 노랑 */
body[data-lang='jp'] .waku6  div{ background: #58af4a;} /* 초록 */
body[data-lang='jp'] .waku7  div{ background: #de8a26;} /* 주황 */
body[data-lang='jp'] .waku8  div{ background: #dc6179;} /* 분홍 */ 

body[data-lang='jp'] .waku1  { --waku-color: #ffffff; }
body[data-lang='jp'] .waku2  { --waku-color: #45556C; }
body[data-lang='jp'] .waku3  { --waku-color: #dc3c3c; }
body[data-lang='jp'] .waku4  { --waku-color: #2c53a9; }
body[data-lang='jp'] .waku5  { --waku-color: #e4ca3b; }
body[data-lang='jp'] .waku6  { --waku-color: #58af4a; }
body[data-lang='jp'] .waku7  { --waku-color: #de8a26; }
body[data-lang='jp'] .waku8  { --waku-color: #dc6179; } 

body[data-lang='jp'] .horse.waku1 rect {fill: #ffffff;}  /* 흰색 */ body[data-lang='jp'] .horse.waku1 text {fill: #000000;} 
body[data-lang='jp'] .horse.waku2 rect {fill: #45556C; stroke:#7b7b7b;}  /* 검정 */ body[data-lang='jp'] .horse.waku2 text {fill: #FFFFFF;} 
body[data-lang='jp'] .horse.waku3 rect {fill: #dc3c3c;}  /* 빨강 */ body[data-lang='jp'] .horse.waku3 text {fill: #FFFFFF;} 
body[data-lang='jp'] .horse.waku4 rect {fill: #2c53a9;}  /* 파랑 */ body[data-lang='jp'] .horse.waku4 text {fill: #FFFFFF;} 
body[data-lang='jp'] .horse.waku5 rect {fill: #e4ca3b;}  /* 노랑 */ body[data-lang='jp'] .horse.waku5 text {fill: #000000;} 
body[data-lang='jp'] .horse.waku6 rect {fill: #58af4a;}  /* 초록 */ body[data-lang='jp'] .horse.waku6 text {fill: #FFFFFF;} 
body[data-lang='jp'] .horse.waku7 rect {fill: #de8a26;}  /* 주황 */ body[data-lang='jp'] .horse.waku7 text {fill: #FFFFFF;} 
body[data-lang='jp'] .horse.waku8 rect {fill: #dc6179;}  /* 분홍 */ body[data-lang='jp'] .horse.waku8 text {fill: #FFFFFF;} 
	  

.connect-line.gwaku1 {
	border-top: 2px dotted var(--waku-color);
}
.connect-line.gwaku2 {
	border-top: 2px dashed var(--waku-color);
}
.connect-line.gwaku3 {
	border-top: 2px double var(--waku-color);
}

/* 같은 waku일때 구분을 위해 
.waku1  { --waku-color:  #FFFFFF; }
.waku2  { --waku-color:  #45556C; }
.waku3  { --waku-color:  #FF0000; }
.waku4  { --waku-color:  #0000FF; }
.waku5  { --waku-color:  #FFFF00; }
.waku6  { --waku-color:  #008000; }
.waku7  { --waku-color:  #FFA500; }
.waku8  { --waku-color:  #FFC0CB; } 
body[data-lang='jp'] .gwaku1  div{ 
	  background:
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        #87ceeb 5px,
        #87ceeb 7px
    ),
    var(--waku-color);  
}
body[data-lang='jp'] .gwaku2  div{
	border-bottom: 1px solid red;
}
body[data-lang='jp'] .gwaku3  div{
	background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        #87ceeb 5px,
        #87ceeb 7px
    ),
    var(--waku-color); 
}
*/
 


.box {
  	position: relative;
}
.overlay {
	/* position: absolute; */
    inset: 0;                 /* top, left, right, bottom 0 */
    background: rgba(0,0,0,0.6);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.overlay_login {    /* top, left, right, bottom 0 */
    position: absolute;
    inset: 0;                 /* top, left, right, bottom 0 */
    background: rgba(0,0,0,0.6);
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;   /* 🔥 이거 추가 */
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.overlay_login button {
	font-size: 22px;
	padding: 5px;
}
.mosaic {
  filter: blur(10px);
}


/* 결과 분석 */
.hr_no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* background-color: black;
    color: white; */
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding-right: 0px;
    padding-top: 2px;
    
    background-color: white;
    border: 1px solid black;
    color: black;
}
/* 
.hr_no.result_not_match {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: black;
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    padding-right: 0px;
    padding-top: 2px;
    
    background-color: gray;
    border: 1px solid black;
    color: white;
}
 */


/* 케미 */
.bg-\[linear-gradient\(to_top_right\,var\(--color-lime-600\)_0\%\,var\(--color-lime-200\)_50\%\,var\(--color-indigo-200\)_50\%\,var\(--color-indigo-600\)_100\%\)\] {
    background-image: linear-gradient(to top right, oklch(0.48 0.2 15.85) 0%, oklch(0.81 0.12 10.47) 50%, var(--color-indigo-200) 50%, var(--color-indigo-600) 100%);
}


/* 예측결과 가중치 분석*/
.line-result-wrap {
	position: relative; 
	height: 30px;
}

.line-result-wrap .line {
	position: absolute;
  	display:grid;
  	grid-template-columns: repeat(6,1fr);
  	gap:1px;
  	width:90%;
  	top: calc(40%);
  	left: 3px;
}

.line-result-wrap .line div{
  	height:8px; 
  	border: 1px solid gray;
}

td[data-scale="0"] .line-result-wrap .line div{
	background-color: transparent;
}
.line-result-wrap .line div:nth-child(1) {
	background-color: blue;
}
.line-result-wrap .line div:nth-child(2) {
	background-color: #4c4cf7;
}
.line-result-wrap .line div:nth-child(3) {
	background-color: #8080e3;
}
.line-result-wrap .line div:nth-child(4) {
	background-color: #ed8a8a;
}
.line-result-wrap .line div:nth-child(5) {
	background-color: #ef4a4a;
}
.line-result-wrap .line div:nth-child(6) {
	background-color: red;
}

td[data-scale="1"] .line-result-wrap .line div:nth-child(+n+2) {
	background-color: transparent;
}
td[data-scale="2"] .line-result-wrap .line div:nth-child(+n+3) {
	background-color: transparent;
}
td[data-scale="3"] .line-result-wrap .line div:nth-child(+n+4) {
	background-color: transparent;
}
td[data-scale="4"] .line-result-wrap .line div:nth-child(+n+5) {
	background-color: transparent;
}
td[data-scale="5"] .line-result-wrap .line div:nth-child(+n+6) {
	background-color: transparent;
}

.result_btn {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-lime-200: oklch(93.8% .127 124.321);
    --color-lime-600: oklch(64.8% .2 131.684);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-3xs: 16rem;
    --container-5xl: 64rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1/.75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25/.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75/1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75/1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2/1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.2;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --blur-lg: 16px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    color-scheme: light dark;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    /* opacity: 1; */
    background-color: #0000;
    cursor: pointer;
    appearance: none;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing)*2);
    border-radius: var(--radius-sm);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-indigo-600);
    background-image: linear-gradient(90deg, #2e2190, #3f2dc3, #2e2190);
    padding-block: calc(var(--spacing)*4);
    font-family: Museum;
    --tw-leading: calc(var(--spacing)*4.5);
    line-height: calc(var(--spacing)*4.5);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    
    font-family: Pretendard, Museum;
	font-weight: 500;
    line-height: 22.4px;
    padding: 3px 5px;
    margin-bottom: 3px;
	font-size: var(--text-sm);
}
/* 취소마 */
.horse_cancel { 
    color: #999;
    opacity: 0.6;
}

 
.horse_cancel td.hr_name {
    text-decoration: line-through;
}

.edit table tr.horse_cancel td[data-type^="scale_"].editable {
    cursor: not-allowed !important;
}

/*경주정보 */
.race_no_info {
	padding-left: 3px;	
}
@media (max-width: 575.98px) {
	.race_no_info {
		width: 55%;
	}
	
	.race_no_info.show-on-mobile {
		width: 100%;
	}
}

/* 복병마 체크박스 */
.darkhorse_checkbox {
	border-color: #f3f5f9;
}
.darkhorse_checkbox path{
	stroke: #f3f5f9;
}

/* 복병마 상세 점선 연결*/
#line-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}


.connect-line {
  position: fixed;
  border-top: 2px dashed #999;
  transform-origin: 0 0;
  pointer-events: none;
}


#bar_result1 .time1{
	padding:2px 4px;
}
#bar_result1 td, 
#bar_result2 td {
	padding:0px 4px;
	height:30px;
}

.bt_1 td{
	border-top: 1px solid gray; 
}



.horse_wrap {
  /* display: flex; */
  align-items: center;
  gap: 8px;
}
.horse_wrap * {
	display: inline;
}

/* 모바일에서만 */
@media (max-width: 768px) {
  .horse_wrap {
   /*  flex-wrap: wrap; */   /* 줄바꿈 허용 */
    width: 100%;
  }

  .horse_info {
    /* flex: 0 0 90%; */    /* 한 줄 차지 */
    /* margin-top: 4px;
    margin-left: 45px; */
  }

  /* 글자 쪼개짐 방지 */
  #txt_jk_name,
  #txt_hr_name,
  .rank {
    white-space: nowrap;
  }
}


/* 결과분석 > 예측결과가중치분석 > 상세 */
td.rank_1 {background-color: #6b48f1 !important}
td.rank_2 {background-color: #6b48f1 !important}
td.rank_3 {background-color: #6b48f1 !important}
td.td_1 {background-color: #5d5a5a } 

td.number { text-align: right;}

tr.weight_result_tr td {
	line-height: 10px;
	padding: 6px 4px;
}

tr.weight_result_tr td .line {
	
    grid-template-columns: repeat(1, 1fr);
}
 
 
tr.weight_result_tr .point {
	  position: absolute;
	  width: 0;
	  height: 0;
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-top: 10px solid blue; /* 색상 */
	  top: -10px; 
	  transform: translateX(-50%);  /* 중앙 정렬 핵심 */
}
 
 
tr.weight_result_tr.o_match .point { 
	  border-top: 10px solid red; /* 색상 */ 
	  
}

#detailResult td {
  position: relative;
}

.weight_horse_info {
	position: absolute;
  	right: 4px;   /* 오른쪽 여백 */
  	bottom: 2px;  /* 아래 여백 */
  	font-size: 10px; /* 선택 */
}
 
.my_horse_info {
	position: absolute;
  	right: 4px;   /* 오른쪽 여백 */
  	bottom: 2px;  /* 아래 여백 */
  	font-size: 10px; /* 선택 */
}
 
 
 
 


 
 
 
/* =========================
   언어별 폰트 설정
   ========================= */
 
/* noto-sans-jp-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Noto_Sans_JP/noto-sans-jp-v56-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-500 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Noto_Sans_JP/noto-sans-jp-v56-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Noto_Sans_JP/noto-sans-jp-v56-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kaisei-decol-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Kaisei_Decol/kaisei-decol-v11-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kaisei-decol-500 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Kaisei_Decol/kaisei-decol-v11-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* kaisei-decol-700 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Kaisei Decol';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Kaisei_Decol/kaisei-decol-v11-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* 일본어 */
body[data-lang='jp'] {
  font-family: 'Kaisei Decol', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
} 
	
body[data-lang='jp'] :root, :host {
    --font-sans:  'Kaisei Decol', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    --font-mono:  'Kaisei Decol', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
/* hr_no는 제외 (다시 덮어쓰기) */
body[data-lang='jp'] #race_dt_ctrl button,
body[data-lang='jp'] #race_no_ctrl button,
body[data-lang='jp'] .hr_no {
  font-family: 'Pretendard', system-ui, sans-serif;
}

body[data-lang='jp'] .font-\[\'Museum\'\],
body[data-lang='jp'] .font-\[Museum\],
body[data-lang='jp'] .font-\[Pretendard\] {
    font-family: 'Kaisei Decol', 'Noto Sans JP', 'Meiryo', sans-serif !important;
}









/*admin*/
.group.active span::before{
 	content: "*";  
 	color: white;
  	clear: both; 
  	overflow:hidden;
  	padding-right: 10px;
}


.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table-wrap table {
  table-layout: auto;
  width: max-content; /* 내용만큼 늘어남 */
  min-width:100%;
}

.table-wrap th,
.table-wrap td {
  white-space: nowrap;
}

.pr-4 {
  padding-right: 16px;
}


.right{
	text-align: right;
}

.left{
	text-align: left;
}

.center{
	text-align: center;
}

select.ma  option,
body[data-type='ma'] select  option {
  background-color: #020618;
}


.step_body td[data-result] {
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: 21px 21px; 
  	cursor: pointer;
}
.step_body td[data-result="OK"] {
    background-image: url(/static/images/icon/check-circle-fill.svg); 
}
.step_body td[data-result="ING"] { 
    background-image: url(/static/images/icon/play-circle-fill.svg); 
}
.step_body td[data-result="NK"] { 
    background-image: url(/static/images/icon/x-circle-fill.svg); 
}

.step_body td[data-result="READY"] { 
    background-image: url(/static/images/icon/arrow-right-circle.svg); 
}

.step_body td[data-result="AGAIN"] { 
    background-image: url(/static/images/icon/again-circle-fill.svg); 
}

.step_body td[data-result=""] { 
    background-image: url(/static/images/icon/circle.svg); 
}



/* 관리자 배포관리 달력 날짜 강조 */
.race-date a {
    background-color: #c3d6f9 !important; /* 노란색 */
    color: #000 !important;
}
body.deploy_page .ui-datepicker td a.ui-state-active  {
	background: #7565ef !important;
    color: #ffffff !important;
}

/* 관리자 배포관리 테이블 구분 */
#step_head .hover, 
#step_body .hover {
	background-color: var(--color-indigo-400);
}
#step_head .rb,
#step_body .rb {
	border-right: 1px solid gray;
}



/*guide */
.guide_scale_table td {
	    padding: 4px 4px;
	    background-color: transparent;
	    height:30px;
	    width:30px;
} 
.jstree-default-dark .jstree-audio {
	background-image: url(/static/images/media/ic-microphone-stop.svg) !important;
	background-repeat: no-repeat  !important;
  	background-position: center  !important;
  	background-size: 21px 21px  !important;
}

.jstree-default-dark .jstree-clicked .jstree-audio {
	background-image: url(/static/images/media/ic-microphone-start.svg) !important;
}


.jstree-default-dark .jstree-audio-backup {
	background-image: url(/static/images/file/audio.svg) !important;
	background-repeat: no-repeat  !important;
  	background-position: center  !important;
  	background-size: 21px 21px  !important;
}

.jstree-default-dark .jstree-clicked .jstree-audio-backup {
	background-image: url(/static/images/file/audio-start.svg) !important;
}


.jstree-default-dark .jstree-file-backup {
	background-image: url(/static/images/file/file.svg) !important;
	background-repeat: no-repeat  !important;
  	background-position: center  !important;
  	background-size: 21px 21px  !important;
}

.jstree-default-dark .jstree-clicked .jstree-file-backup {
	background-image: url(/static/images/file/file.svg) !important;
}

 
.jstree-default-dark .jstree-hovered,
.jstree-default-dark .jstree-clicked {
    background: #25b2f1 !important;
    border-radius: 2px;
    box-shadow: inset 0 0 1px #999999;
}


table {
    
	border-color: #50555d;
}

table tr th, table tr td {
	border-color: #50555d;
	
}

#user_list tr.active td ,
#join_list tr.active td ,
#days_list tr.active td ,
#result_list tr.active td{
	background-color: #50555d  !important;
}


.horse {
	width: 20px;
  	height: 20px;
  	display: block;
  	flex-shrink: 0; /* 아이콘 찌그러짐 방지 */
}
.horse rect {        
	rx: 10; /* 모서리 둥글기 */ 
}
.horse.rec rect {      
	rx: 4; /* 모서리 둥글기 */ 
}

.horse text {
  	dominant-baseline: central;
  	text-anchor: middle;
  	font-family:Pretendard;
  
  	fill: white;           
  	font-size: 14px;
  	font-weight: bold;
} 

	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
.beta-top {
  position: absolute;
	top: 20px;
	left: 180px;
  transform: translateX(-50%);
  
  background: linear-gradient(45deg, #ff003c, #ff8c00);
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 20px;
  
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;

  animation: pulse 2s infinite;
}

/* 애니메이션 (살짝만) */
@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

/* 📱 모바일 대응 */
@media (max-width: 768px) {
  .beta-top {
    top: 10px;
    left: 160px;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
  }
}



/* 결고보기  */ 
.about_result #queryResult .chemi_rank img.result_not_match,
.about_result #queryResult .chemi_rank svg.result_not_match,
.prediction_result #queryResult .chemi_group.result_not_match,
.prediction_result #queryResult .chemi_rank svg.result_not_match,
.prediction_result #queryResult .chemi_rank img.result_not_match{
	opacity: 0.5;
	background: none;
} 

.about_result #queryResult .chemi_rank img.result_match,
.about_result #queryResult .chemi_rank svg.result_match,
.prediction_result #queryResult .chemi_rank img,
.prediction_result #queryResult .chemi_rank svg,
.prediction_result #queryResult .chemi_group {
	background: white;
}


.about_result #queryResult tr {
	cursor: pointer;
}






.table-fix {
  overflow: auto; /* 스크롤 컨테이너 */
  max-height:500px;
}

 
.table-fix table {
  border-collapse: separate;
  border-spacing: 0; 
}
 
/* 헤더 1행 고정 */
.table-fix thead tr:nth-child(1) th {
  position: sticky;
  top: 0;
  z-index: 2; 
}

/* 헤더 2행 고정 */
.table-fix thead tr:nth-child(2) th {
  position: sticky;
  top: 65px; /* 1행 실제 높이로 교체 */
  z-index: 2; 
}
 

/* 첫 번째 열 고정 */
.table-fix tbody td:first-child {
  position: sticky !important;
  left: 0;
  z-index: 1; 
}
 

.predictionResult_weight_detail .table-fix thead tr:nth-child(1) th,
.predictionResult_weight_detail .table-fix thead tr:nth-child(2) th {
	 background: #020618;
}

.predictionResult_weight_detail .table-fix tbody tr:nth-child(odd) td:first-child {
    background: #020618;
}

.predictionResult_weight_detail .table-fix tbody tr:nth-child(even) td:first-child {
    background: #0F172A;
}

 
.table-fix thead tr:nth-child(1) th,
.table-fix thead tr:nth-child(2) th {
	 background: #242424;
}

.table-fix tbody tr:nth-child(odd) td:first-child {
    background: #242424;
}

.table-fix tbody tr:nth-child(even) td:first-child {
    background: #0F172A;
}
 

/* 헤더 1행 + 첫 번째 열 교차점 */
.table-fix thead tr:nth-child(1) th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
}

.table-fix thead {
	
	user-select: none;
}


.table-fix-outer {
    position: relative;
  }
  .table-fix-outer .scroll-btn {
	  position: absolute;
	  top: 20px; /* thead 세로 중앙 */
	  transform: translateY(-50%);
	  width: 35px;
	  height: 35px;
	  border-radius: 50%; /* 둥근 버튼 */
	  z-index: 10;
	  border: none;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity 0.2s;
	  background: rgba(128, 128, 128, 0.8);
	  color: #ffffff;
  }
  .table-fix-outer .scroll-btn.left  { left: 0;   }
  .table-fix-outer .scroll-btn.right { right: 20px;  }
  .table-fix-outer .scroll-btn.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .table-fix-outer .scroll-btn:active {
    background: rgba(128,128,128,0.45);
  }
  
  
  
  
  
  
  
@media print {
  .no-print {
    visibility: hidden;
  }
 
}
  
  
  
.g1,
.g2,
.g3 {
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    line-height: 1.2;
}

.g1 {
    background: #464EB7 !important;
    border-color: #464EB7;
}
.g2 {
    background: #E53031 !important;
    border-color: #E53031;
}
.g3 {
	background: #5AAA48 !important;
    border-color: #5AAA48;
}



#fileList .active .jstree-audio {
    background-image: url(/static/images/media/ic-microphone-start.svg) !important;
}