#gritter-notice-wrapper {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;  /* 스크롤 생길 때 컨텐츠가 잘림 방지 */
    width: 321px;
     
} 

.gritter-item-wrapper {
	width: 301px;
}
 

.navbar-brand {
    background-image: url(/static/images/logo.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 70px 40px;
    width: 70px;
    height: 40px;
}

.navbar-dark .navbar-brand {
	background-image: url(/static/images/logo_white.svg);
}

.footer-brand.text-white{
	background-image: url(/static/images/logo_white.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 70px 40px;
    width: 70px;
    height: 40px;
    display: inline-block;
}

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

.ellipsis {
	height: 20px;
  	width: 100%;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	overflow: hidden;
}


[role="button"]{
	cursor: pointer;
}

.cursor-pointer:hover{
	cursor: pointer;
  	text-decoration: underline;
}

.oz_hide {
	display:none  !important;
}

@media (max-width: 575.98px) {
  	.hide-on-mobile {
    	display:none  !important;
  	}
}
@media (min-width: 576px) {
  .hide-on-web {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  	.pagination {
    	margin-top: 10px;
  	}
}

.dp_user_name {
	margin-right: 5px;
}

/* 로그인 */
.login-find a {
	/* color: #6c757d !important; */
	padding-right: .5rem !important;

}


.data_forecast_table {
	max-height: 200px;
	margin-bottom: 20px;
}


.ptype_M {
	color: blue;
	font-weight: bold;
}
.ptype_P {
	color: red;
	font-weight: bold;
}

/* table */

table.dtable {
  	border-collapse: collapse;
	width: 100%;
  	border: 0;
  	margin-bottom: 10px;
}

table.ctable {
	margin-top: 5px;
  	border-collapse: collapse;
	width: 100%;
  	border: 0;
  	margin-bottom: 10px;
}

table.ctable th,
table.ctable td {
	border: 1px solid #aaa;
  	/* padding: 0.6rem; */
  	/* min-width: 6rem; */
  	padding: 5px 5px;
  	text-align: left;

  	margin: 0;
  	white-space: nowrap;
}

table.ctable th {
  	background-color: #e1e1e1;
  	text-align: center;
}

table.ctable tr:hover td {
	background-color: #efeded;
}


#site_lang {
	font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .65) !important;
    background-color: #343a40!important;
    border: 0px;
    padding: 2px 3px;
    height: 20px;
}

/*****************
* 예측생성
******************/
.forecastManual .forecast_table {
	display: none;
}

.forecastManual .data_title {
	width: 500px;
	cursor: pointer;
}
.forecastManual .data_title:hover {
	color: #212529;
    background-color: rgba(0, 0, 0, .075);
}
.forecastManual .count {
	width: 100px;
	float: right;
}
.forecastManual .time {
	width: 100px;
	float: right;
}

.forecastManual.deploy .check_deploy_btn {
	display: none;
}

/*****************
* 메인
******************/
.bg-video-media.blur {
  filter: blur(20px);
  transition: filter 1s ease-in-out;
}

.world {
	/* margin-top: -10rem !important; */
	background-image: url(/static/images/world/world_with_markers.svg);
	opacity: 0;
  	visibility: hidden;
  	transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  	position: relative; /* 필요시 추가 */
  	width: 100%;
  	height: 600px;
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
}

.world.show {
	opacity: 1;
  	visibility: visible;
}


.l7h5 {
	background-image: url(/static/images/world/l7h3.svg);
	opacity: 0;
  	visibility: hidden;

  	position: relative; /* 필요시 추가 */
  	width: 400px;
  	height: 150px;
  	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;

	transition:
    opacity 1s ease-in-out,
    visibility 1s ease-in-out,
    transform 0.5s ease,
    filter 0.5s ease;
}
.l7h5.show {
	opacity: 1;
  	visibility: visible;
}

@media (min-width: 768px) {
    .section-index {
        padding-top: calc(7.5rem + 5.8125rem);
    }
}

@media (max-width: 1199.98px) {
   .section-index .container {
		margin-top: 10px !important;
	}
	.l7h5 {
		height: 50px;
		margin-top: 10px !important;
	}
	.world {
		height: 600px;
		background-position: top;
	}
}

.section-index .container {
	margin-top: calc(-10rem + 5.8125rem);
}

.l7h5:hover {
	transition: transform 0.5s ease;
  	transform: scale(1.2);
  	transform-origin: center;
  	filter: drop-shadow(0 0 5px rgba(255,0,0,.5));

  	cursor: pointer;
}

/*****************
* 예측
******************/
.slider-no-controls .slider-item {
	width: 100%;
	height: 600px;
	background-color: yellow;
	border: 2px solid black;
}


.rank {
	font-size: 16px;
	padding-right: 10px;
}



.radar_select {
	display: none;
}


td.no_border {
	border: 0px;
}
td.l_border {
	border-left: 1px solid rgba(0,0,0,.1)
}
td.b_no_border {
	border-bottom: 0px;
}

#luck_value,
#horse_value {
	border : 2px solid #F1BE16;
}
.radarChart .legend_rect { 
	/* fill: #F1BE16; */
	fill: none;
	stroke:#F1BE16;
	stroke-width:2px;
}
.radarChart .legend {
	/* fill: #333333; */
	fill: #000000;
	cursor: pointer;
	user-select: none;
}

.radarChart .tooltip {
	fill: #333333;
	font-weight:bold;
}

.radar_label {
	padding: 4px 5px;
	font-size: .75rem;
}
.radar_label.defaultValue {
	background-color: #E97132;
	color: white;
}

.slabel {
	position: absolute;
	bottom: 10px;
	left: 30px;
}

.radar_label.value {
	background-color: #156082;
	color: white;
}

.forecast .title {
	font-weight: bold;
	font-size: 14px;
}
.forecast .title:after {
	content: none;
  	display: none;
}

.forecast .운칠기삼 {
	user-select: none;
}

.forecast .word,
.forecast .number ,
.forecast .link
/* .forecast .podcast,
.forecast .youtube
 */
{
	display: inline-block;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
}
.forecast .number {
	cursor: pointer;
}
 
.oz_link_podcast.active {
	color: #e30839 !important;
	text-transform: none;
}
.oz_link_podcast:before {
	border-top:0px !important;
}
.oz_link_podcast:not(.active):focus  {
    color: #212529 !important;
}

.podcast_link .fa-stop{
	display: none;
}
.podcast_link.active .fa-play{
	display: none;
}
.podcast_link.active .fa-stop{
	display: inline-block;
}

.forecast .word.운 {background-image: url(/static/images/number/운.svg); }
.forecast .word.마 {background-image: url(/static/images/number/마.svg); }
.forecast .number[data-number='0']{background-image: url(/static/images/number/0.svg);  }
.forecast .number[data-number='1']{background-image: url(/static/images/number/1.svg);  }
.forecast .number[data-number='2']{background-image: url(/static/images/number/2.svg);  }
.forecast .number[data-number='3']{background-image: url(/static/images/number/3.svg);  }
.forecast .number[data-number='4']{background-image: url(/static/images/number/4.svg);  }
.forecast .number[data-number='5']{background-image: url(/static/images/number/5.svg);  }
.forecast .number[data-number='6']{background-image: url(/static/images/number/6.svg);  }
.forecast .number[data-number='7']{background-image: url(/static/images/number/7.svg);  }
.forecast .number[data-number='8']{background-image: url(/static/images/number/8.svg);  }
.forecast .number[data-number='9']{background-image: url(/static/images/number/9.svg);  }
.forecast .number[data-number='10']{background-image: url(/static/images/number/10.svg);  }


.forecast .운칠기삼 .link {
	width: 30px;
	height: 30px;
	margin-left: 20px;
	cursor: pointer;
}


.tarot_area {
	margin-left: 20px;
}
.tarot {
	cursor: pointer;
	display: inline-block;
	width: 30px;
	height: 50px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
}

.tarot_1 {
	background-image: url('/static/images/card/메이저 아르카나/JPG1/0. 바보 카드.jpg');
}
.tarot_2 {
	background-image: url('/static/images/card/메이저 아르카나/JPG1/9. 은둔자 카드.jpg');
}

.forecast #history_table tr {
	cursor: pointer;
}
.forecast #history_table tr.active,
.forecast #history_table tr:hover {
	color: #e79b0d;
}

.forecast th,
.forecast td {
	vertical-align: middle;
	text-align: center;
	padding: 2px 3px;
	font-size: 12px;
}

.forecast .rank {
	/* font-size: 16px; */
}

.forecast th {
	background-color: #e1e1e1;
}

.radarChart {
	min-width: 220px;
}


.no_bg {
	background-color: white !important;
}



#podcast4_drop {
	top: 10px !important;
	left: 60px !important;
	max-width: 110px !important;
	min-width: 110px !important;
}

#podcasdall_drop {
	top: -10px !important;
	left: 35px !important;
	max-width: 110px !important;
	min-width: 110px !important;
}

#podcastlove_drop {
	top: -10px !important;
	left: 360px  !important;
	max-width: 110px !important;
	min-width: 110px !important;
}

.podcast_drop .fa-play,
.podcast_drop .fa-stop{
    float: right;
}


.rank_bold {
	font-weight: bold;
}

#btn_simulation_w {

}
#btn_simulation_m {

}



/**************************************
 [S]경기예측   별
*****************************************/
.star_svg {
	margin: auto;
}
  .star_svg_text {
    font-size: 20px;
    font-weight: bold;
    fill: #1d3b00;
    dominant-baseline: middle;
    text-anchor: middle;
  }

  .star_svg_horse {
    font-size: 12px;
    font-weight: bold;
    fill: #1d3b00;
    dominant-baseline: middle;
    text-anchor: middle;
  }

  .star_svg_label {
    font-size: 10px;
    font-weight: bold;
    fill: blue;
    dominant-baseline: middle;
    text-anchor: middle;
  }


#love_table tr:nth-child(3),
#love_table tr:nth-child(5) {
  border-bottom: 3px solid #e1e1e1;
}


.weight_table {
  	display: block;
  	margin: 0 auto; /* 중앙정렬 */
  	vertical-align: middle;
  	width: 195px;
}

.weight_table_label  {
	display: none;
}

/**************************************
 [E]경기예측   별
*****************************************/



/**************************************
 [S]경기예측   타로
*****************************************/

.eachChardContainer {
	width: 800px;
	overflow-x: auto;    /* X축 스크롤 */
	overflow-y: hidden;  /* Y축 스크롤 제거 */
	white-space: nowrap; /* 줄바꿈 방지 */
	padding: 10px 0;
}
.cardContainer {
	position: relative;
	width: 100%;
	height: 250px;
}

.cardContainer .card {
	width:  calc(412px * 0.3);
   	height: calc(691px * 0.3);
   	background: url('/static/images/card/card.png') no-repeat center/cover;
	position: absolute;
   	top: 40px;
   	left: 50%;
   	transform-origin: bottom center;
   	transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
   	cursor: pointer;
}

.cardContainer  .card:hover {
   	/* top: 20px; */
   	transform: translateX(-50%) scale(1.05);
   	z-index: 10;
   	background: url('/static/images/card/card_over.png') no-repeat center/cover;
}

.cardContainer  .card.hidden {
   	opacity: 0;
   	pointer-events: none;
   	transform: translateX(-50%) scale(0.8);
}

.selected_card {
	width: 100px;
   	height: 160px;
   	display: block;
	user-select: none;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}

.card_wrap {
	width: 240px; /* 카드 하나가 충분히 보이도록 최소 너비 설정 */
  	padding: 10px;
  	background-color: #f8f9fa;
  	border-radius: 8px;
  	border: 1px solid #ddd;
	margin-right: 10px;
}

.tarot_hrnm  {
	display: block;
	color: black;
	font-size: 14px;
}
/**************************************
 [E]경기예측   타로
*****************************************/
















/**************************************
 [S]switch
*****************************************/

    .form-switch {
      padding-left: 2.5em;
    }

    .form-switch .form-check-input {
      width: 2em;
      height: 1em;
      margin-left: -2.5em;
      background-color: #dee2e6;
      background-position: left center;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: 2em;
      transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out;
      appearance: none;
      -webkit-appearance: none;
      position: relative;
    }

    .form-switch .form-check-input:checked {
      background-color: #0d6efd;
      background-position: right center;
    }

    .form-switch .form-check-input::before {
      content: "";
      position: absolute;
      top: 0.1em;
      left: 0.1em;
      width: 0.8em;
      height: 0.8em;
      background-color: #fff;
      border-radius: 50%;
      transition: transform 0.15s ease-in-out;
    }

    .form-switch .form-check-input:checked::before {
      transform: translateX(1em);
    }

/**************************************
 [E]switch
*****************************************/

/****************************************
 [S]login menu
*****************************************/
.menu_se_ok {
	display: none;
}
.menu_se_ok[data-se='true'] {
	display: block;
}
.menu_se_nk {
	display: none;
}
.menu_se_nk[data-se='false'] {
	display: block;
}
/****************************************
 [E]login menu
*****************************************/



.csv_table {
	display: block;
    max-height: 200px !important;
    max-width: 1000px;
    overflow: auto;
}


.tarot_button {
	padding: 4px 5px;
	font-size: .75rem;
	background-color: #F1BE16;
	color: black;
	cursor: pointer;
}

.tarot_hrnm_love {
	display: block;
	color: black;
	font-size: 14px;
	font-weight: bold;
}
.love_tarot_desc_wrapper {
	display: inline-block;
	 height: calc(100% - 40px);
 	 width: calc(100% - 210px);
 	 top: 0px;
}
.love_tarot_desc {
	  display: table;
	  justify-content: center; /* 가로 가운데 */
	  align-items: center;     /* 세로 가운데 */
	  color: white;
	  font-weight: bold;
	  background-color: black;
	  height: 100%;
	  width: 100%;
	  padding: 10px;
	  font-size: 20px;
	  user-select: none;
	  font-family: 궁서체;
}

#cardForLove .selected_card{
	vertical-align: top !important;
}




/*#############################################*/

/* 예측 이력 */
.step_header_3 {
  	width: 80px;
  	text-align: center;
}


.fixed-table {
   table-layout: fixed; /* td width 강제 적용 */
  width: 100%;
}

#step_header th {
	font-size: 10px;
}
#step_header th.fix_header,
.td_db,
.td_step {
	width: 100px;
	word-break: break-all;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;

}


#step_2_1_7.next_step,
#step_9_1_7.next_step,
#step_body td.next_step {
	cursor: pointer;
	text-decoration: underline;
}





.tippy-box {
  white-space: normal !important;  /* 줄바꿈 허용 */
  word-break: break-word;          /* 긴 단어도 잘림 */
}
.tippy-content {
  white-space: normal !important;
}


#horse_video {
    width: 100%;
    height: auto;
    max-height: 70vh; /* PC에서 화면 높이 70%까지만 */
    object-fit: contain; /* 비율 유지하며 잘리지 않도록 */
}


.m1_true,
.m2_true,
.m3_true,
.result_match,
.om1_true,
.om2_true,
.om3_true {
	color: red;
	font-weight: bold;
	font-size:20px;
}
.om4_true {
	color: blue;
	font-weight: bold;
	font-size:20px;
}

#btn_simulation_w,
#btn_simulation_m {
	background-color: #F1BE16;
}

#btn_simulation_w:focus,
#btn_simulation_m:focus,
#btn_simulation_w:hover,
#btn_simulation_m:hover {
	color: black;
}

.mafeel_result_bg_1 {
	background-color: #f3d77d !important;
}

.mafeel_result_bg_2,  
.mafeel_result_bg_3,
.reault_rank,
.mafeel_result_bg {
	background-color: #cac5ef !important;
}

img.podcast,
img.youtube {
	width: 25px;
	height: 25px;
	cursor: pointer;
}


image.podcast,
image.youtube {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

img.podcast.disabled,
img.youtube.disabled,
image.podcast.disabled,
image.youtube.disabled {
	cursor: not-allowed;
}

.whoami .top_header {
	font-weight: bold;
	background-color: #DCEAF7;
}

.whoami .left_header {
	font-weight: bold;
	background-color: #F2F2F2;
}

#radar_switch {
	position: absolute;
	bottom:10px;
	left: 50%;   /* 중앙 근처로 이동 */
    transform: translateX(-20%); /* 정확히 가운데 정렬 */
}



/* PC에서는 숨김 */
/* #left_arrow_btn, 
#right_arrow_btn {
    display: none;
} */


#chk_change_slideer {
    background-color: #09b309; 
}
#chk_change_slideer:checked {
    background-color: blue; 
}

	.audio-ai-race-btn-group .btn:focus,
	.audio-ai-race-btn-group .btn:hover { 
		color: #212529 !important;
	}
	.audio-ai-race-btn-group .btn:disabled:hover {
		user-select: none;
		cursor: not-allowed;
		color: #212529  !important;
	}
	.audio-ai-race-btn-group .btn i{
    	width: 16px;        /* 아이콘 영역 고정 폭 */
    	text-align: left;   /* 왼쪽 정렬 */
    	margin: 0;          /* 기본 여백 제거 */
    }
    .fa-play-stop:before {
	    content: "\f04b";
	}
	.active .fa-play-stop:before {
	    content: "\f04d";
	    color: red;
	}
	
	#audio_daily:disabled .fa-play-stop:before,
	.audio-ai-race-btn-group .btn:disabled .fa-play-stop:before {
		content: "";
	}
	
	#audio_daily {
		height: 43px;	
	}





@media (min-width: 1200px) {
    .manager.container {
        max-width: 1300px;
    }
}
 




#dropZone {
    cursor: pointer;
    transition: 0.3s;
}

#dropZone.dragover {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.video-upload-list {
	padding: 5px 15px
}


.file-list-remove {
   color: red;
}


td.hover,
th.hover { 
    background-color: rgba(0, 0, 0, .075);
}

.podcast_horse image { display: none; } 
.podcast_horse  image.horse_default { display: block; }
.podcast_horse:not(.active):not(.disabled):hover   image.horse_hover   { display: block; }
.podcast_horse.active   image.horse_active  { display: block; }
.podcast_horse.disabled image.horse_disable { display: block; }

.youtube_horse image { display: none; } 
.youtube_horse  image.horse_default { display: block; }
.youtube_horse:not(.active):not(.disabled):hover   image.horse_hover  { display: block; }
.youtube_horse.active   image.horse_active  { display: block; }
.youtube_horse.disabled image.horse_disable { display: block; }

#youtube_horse_2,
#youtube_horse_3 {
	display:none;
}

div.media.podcast.disabled,
.podcast_horse.disabled,
.horse_disable {
	cursor: not-allowed !important;
}


 
#mafeel_fc,
#podcast_love {
	display:inline-block;
	float:left;
}
#podcast_4_drop .dropdown-item {
	display: block;
}

#mafeel_is {
	display:inline-block;
	float: right;
}


#podcast_use {
	display:inline-block; 
}

.videoAI .media,
.audioAI .media{
	display: inline-block;
	background-color: none !important;
	color:#212529 !important;
} 

.result_info {
	float:right;	
}


.nav_mobile_menu {
	display: flex;
    gap: 0px;           /* a 태그 사이 간격 */
    align-items: center;
}
.nav_mobile_menu a{
	white-space: nowrap; /* 줄바꿈 방지 */
	color: rgba(255, 255, 255, .5);
	padding: 3px 5px;
}



/* 기본: 안 보임 */
#navbarCollapse .nav-close-wrap {
    display: none;
}

/* 펼쳐졌을 때만 보이기 */
#navbarCollapse.show .nav-close-wrap {
    display: block;
}
.nav-close-hit {
    width: 100%;
    height: 56px;

    display: flex;
    align-items: center;      /* 세로 중앙 */
    justify-content: center;  /* 가로 중앙 */

    text-align: center;
    cursor: pointer;

    margin: 0 auto;           /* 혹시 모를 좌측 밀림 방지 */
    padding: 0;

    -webkit-tap-highlight-color: transparent;
}
.nav-close-hit i {
    display: block;
    margin: 0 auto;
    font-size: 22px;
}
 
 
 
 
 
 .card_row {
 	display: inline;
 }
 /* 카드 감싸는 박스 */
.card_item {
    position: relative;
    display: inline-block;
}

/* 카드 이미지 */
.selected_card {
    display: block;
}

/* 취소 버튼 */
.card_cancel {
    position: absolute;
    top: -6px;
    right: -6px;

    width: 22px;
    height: 22px;
    border-radius: 50%;

    background: rgba(0,0,0,0.7);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: bold;
    cursor: pointer;

    z-index: 5;
}
 .card_cancel:hover {
    transform: scale(0.9);
}

/* 기본: 취소 버튼 숨김 */
.card_cancel {
    display: none;
}

/* 카드에 none 클래스가 없을 때만 표시 */
.selected_card:not(.none) + .card_cancel {
    display: flex;   /* 기존 flex 정렬 유지 */
} 


/*###########################*/
.mafeelTarot .tarot-circle {
  	position: relative;
   	/* top: 50%; */
  	/* left: -20%; */
  	margin: auto;
  	transform-origin: center center;
}

.mafeelTarot .tarot_deck {
	cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mafeelTarot .tarot-card {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 110px;
  	height: 180px;
  	transform-origin: center bottom;
  	cursor: pointer;
  	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mafeelTarot .tarot-card img {
  	width: 100%;
  	height: 100%;
  	border-radius: 10px;
}

/* 선택 강조 */
.mafeelTarot .tarot-card.selected {
  	box-shadow: 0 0 20px rgba(138,43,226,0.7);
}

.mafeelTarot .tarot-card {
  	transition: transform 0.25s ease, box-shadow 0.25s ease;
  	z-index: 1;
}

/* hover 시 강조 */
.mafeelTarot .tarot-card:hover {
  	z-index: 999;
  	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.mafeelTarot .card_cancel {
	position: absolute;
    top: -6px;
    right: 13px;
}

 
.mafeelTarot .tarot-card.picked {
  opacity: 0.3;
  pointer-events: none;
}
 
.mafeelTarot .card-fly {
  position: fixed;
  pointer-events: none;
  transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
  z-index: 9999;
}

.mafeelTarot .selected-slot.highlight {
 /*  box-shadow: 0 0 20px rgba(138,43,226,0.5);
  transition: box-shadow 0.2s ease; */
}

.mafeelTarot .selected_card {
  	transition: opacity 0.2s ease;
}

.mafeelTarot .tarot_desc {
	  display: table;
	  justify-content: center; /* 가로 가운데 */
	  align-items: center;     /* 세로 가운데 */
	  color: white;
	  font-weight: bold;
	  background-color: black;
	  height: 100%;
	  width: 100%;
	  padding: 10px;
	  font-size: 20px;
	  user-select: none;
	  font-family: 궁서체;
	  min-height: 125px;
}
/*###########################*/


#podcast_comic_only {
	
	display: inline-block;
}


.nav-item #mafeel_desc {
	 
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
  	
	position: absolute;
    top: 36px;  
    padding-right: 1rem;
	padding-left: 1rem;
}
.navbar-dark .nav-item #mafeel_desc {
	background-image: url(/static/images/audio_white.svg);
    padding-top: 3rem;
    position: none;
    top: 0px;
 
	background-repeat: no-repeat;
    background-position:  center;
    background-size: 15px 15px;
    width: 15px;
    height: 15px;
    padding-right: 1rem;
    padding-left: 1rem; 
	
} 
 


 
 #event_head td,
 #event_body td {
 	font-size: 18px;
	font-weight: bold;
 }
 
.event_rank {
  display: inline-flex;           /* 가운데 정렬 핵심 */
  align-items: center;            /* 세로 중앙 */
  justify-content: center;        /* 가로 중앙 */

  width: 25px;                    /* 원 크기 */
  height: 25px;

  border-radius: 50%;             /* 둥근 원 */
  background-color: black;      /* 배경색 */
  color: white;                    /* 글자색 */

  font-size: 18px;
  font-weight: 600;
  line-height: 1;                 /* 글자 위아래 여백 제거 */
}
.event_rank.dark_horse {
	background-color: blue;
}

.em_tail {
	display: inline-block;
	padding-left: 10px;
	font-size: 14px;
	display: inline-block;
	color: gray;
}
   



 
	.rank {
	  display: inline-flex;          
	  align-items: center;           
	  justify-content: center;       
	                                 
	  width: 25px;                   
	  height: 25px;                  
	                                 
	  border-radius: 50%;            
	  background-color: black;       
	  color: white;                  
	                                 
	  font-size: 18px;               
	  font-weight: bold;             
	  line-height: 1;                
		padding-right: 0px;
	  padding-top: 4px;
	}
	
	.rank_etc {
		 background-color: #959292;       
	}
	
	.m1_true,
	.m2_true,
	.m3_true,
	.result_match,
	.om1_true,
	.om2_true,
	.om3_true {
		background-color: red;
		font-weight: bold;
		font-size:20px;
	}
	.om4_true {
		background-color: blue;
		font-weight: bold;
		font-size:20px;
	}
	
 	.rank.default {
 		background-color: white;
 		color: black;
 		border: 1px solid black;
 	}
  	
  	.rank_title {
  	             
	 display: inline-flex;          
	  align-items: center;           
	 /*  justify-content: center;        */
	                                 
	  width: 25px;                   
	  height: 25px;                  
	                               
	  font-size: 18px;               
	  font-weight: bold;             
	  line-height: 1;                
		padding-right: 0px;
	  padding-top: 4px;
  	}
 
 #em_1,
 #em_2,
 #em_3,
 #em_4,
 #em_5 {
 	cursor: pointer;
 	
 }
 
 
 
 
 
 
 
 
 
 .star_svg tspan.podcast {
	background-image: url('/static/images/audio.svg');

	width: 30px;
	height: 50px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
}

div.media.podcast {
	background-image: url("/static/images/audio.svg");
	
	background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px 25px; 
    
	width:25px;
	height:25px;
	
	cursor: pointer;
}
div.media.podcast.disabled {
	background-image: url("/static/images/audio_disabled.svg");
	
  	pointer-events: none; 
}
div.media.podcast:not(.active):not(.disabled):hover {
	background-image: url("/static/images/audio_hover.svg");
}
div.media.podcast.active {
	background-image: url("/static/images/audio_active.svg");
}

.audioAI button.media div.playNstop {
	background-image: url('/static/images/audio.svg');

	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
	 
	display: inline-block; 
	margin-right: 5px;
	
	vertical-align: middle;
}
 
.audioAI button.media.active div.playNstop {
	background-image: url('/static/images/audio_active.svg'); 
}
.audioAI button.media:not(.active):not(.disabled):hover div.playNstop {
	background-image: url('/static/images/audio_hover.svg'); 
}
.audioAI button.media.disabled div.playNstop {
	background-image: url('/static/images/audio_disabled.svg'); 
	  	pointer-events: none; 
}

.videoAI button.media div.playNstop {
	background-image: url('/static/images/video.svg');

	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
  	background-position: center;
  	background-size: contain;
	 
	display: inline-block; 
	margin-right: 5px;
	
	vertical-align: middle;
}
 
.videoAI button.media.active div.playNstop {
	background-image: url('/static/images/video_active.svg'); 
}
.videoAI button.media:not(.active):not(.disabled):hover div.playNstop {
	background-image: url('/static/images/video_hover.svg'); 
}
.videoAI button.media.disabled div.playNstop {
	background-image: url('/static/images/video_disabled.svg'); 
	  	pointer-events: none; 
}

.audioAI button.media.disabled,
.videoAI button.media.disabled {
	cursor: not-allowed;
	  	pointer-events: none; 
}
	
 
 
 
 /*###########################################################*/
 /*###########################################################*/
 /*###########################################################*/
 /*###########################################################*/
 
 
 
@media (max-width: 768px) {
	
	 
div.media.podcast:not(.active):not(.disabled):hover {
	background-image: url("/static/images/audio.svg");
} 
.audioAI button.media:not(.active):not(.disabled):hover div.playNstop {
	background-image: url('/static/images/audio.svg'); 
} 
.videoAI button.media:not(.active):not(.disabled):hover div.playNstop {
	background-image: url('/static/images/video.svg'); 
}
 
.podcast_horse:not(.active):not(.disabled):hover   image.horse_hover   { display: none; }  
.youtube_horse:not(.active):not(.disabled):hover   image.horse_hover   { display: none; } 
	

	

	.result_info {
		float:left;	
	}
	#btn_radar_reset {
		float: left;
	}
	#radar_switch {
		left: 45%;
		bottom: 0px;
	}
	.breadcrumb-item {
		font-size: 18px;
	}
  .intro .bg-video-media { 
    object-fit: contain; 
  } 
  .intro .section {
  	position: unset;
  }
  
  .intro .world {
  	background-image: url(/static/images/world/world_with_markers_mobile.svg);
  }
  
  #menu_01,
  #btn_simulation_m,
  #user_point_m {
  	display: none;
  }
  
  /* 
   #left_arrow_btn, 
    #right_arrow_btn {
        display: flex;
        align-items: center;
        justify-content: center;

        position: fixed;
        top: 50%;
        transform: translateY(-50%);

        width: 35px;
        height: 60px;

        font-size: 24px;
        color: #000;

        background: rgba(255, 255, 255, 0.35);   반투명
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0,0,0,0.15);

        z-index: 9999;
        cursor: pointer;
        user-select: none;

        transition: none; 모바일이므로 hover 제거
    }

    좌측 버튼
    #left_arrow_btn {
        left: 0;
        border-radius: 0 6px 6px 0;
    }

    우측 버튼
    #right_arrow_btn {
        right: 0;
        border-radius: 6px 0 0 6px;
    } */
    
    #right_arrow_btn,
     #left_arrow_btn {
        padding: 4px 5px;
	    font-size: .75rem;
	    background-color: #F1BE16;
	    color: black;
	    cursor: pointer;
    }
    
    #btn_simulation_m{
    	padding: 4px 5px;
	    font-size: .75rem;
	    background-color: #F1BE16;
	    color: black;
	    cursor: pointer;
	    margin-left: 10px;
    }
    
    #user_point_m {
    	
    }
    
   	
   	.audio-ai-ract-no,
    .audio-ai-race-btn-group {
        display: block;
        width: 100%;
        padding: 2px !important;
        border: 0px  !important;
    }

    .audio-ai-ract-no {
        margin-bottom: 6px; /* 간격 */
        white-space: nowrap;
    }

    .audio-ai-race-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .audio-ai-race-btn-group .btn {
        width: 24%;
        white-space: nowrap;
        font-size: 12px;
        
        display: inline-flex;
	    align-items: center;
	    gap: 6px; /* 아이콘과 텍스트 거리 */
	    padding-left: 10px;
    }
    
    #videoBody tr,
    #audioBody tr,
    #mafeel_body tr {
        display: none;      /* 기본적으로 전부 숨김 */
    }
    
    #videoBody tr:first-child,
    #audioBody tr:first-child {
        display: table-row;
    }
  	 


  #mafeel_body {
    display: block;
    width: 100%;
  }

  #mafeel_body tr { 
    width: 100%;
  }
  #mafeel_body tr:first-child {
  	display: table-row;
  }

 #mafeel_body tr > td {
    display: block;        /* table-cell 탈출 */
    width: 100%;
    box-sizing: border-box;
  }

  /* 3번째 td부터 2칸 */
  #mafeel_body tr >  td:nth-child(2n + 3) {
    float: left;
    width: 30%;
  }
  /* 짝수 패턴 → 70% */
	#mafeel_body tr > td:nth-child(2n + 4) {
    float: left;
	    width: 70%;
	}

  /* float 정리 */
  #mafeel_body tr::after {
    content: "";
    display: block;
    clear: both;
  }
  
    
    image.podcast,
	image.youtube {
		width: 40px;
		height: 40px; 
	}
    
    #podcast_horse1 image { 
    	x : 90;
    	y : -10;
    } 
    #youtube_horse1 image { 
    	x : 175;
    	y : -10;
    }
    #podcast_horse2 image { 
    	/* x : -30; */
    	x : -32;
    	y : 85;
    } 
    #youtube_horse2 image { 
    	x : 50;
    }  
    #podcast_horse3 image { 
    	x : 215;
    	y : 85;
    } 
    #youtube_horse3 image { 
    	x : 300;
    } 
    
    #podcast_horse4 image { 
    	/* x : 15; */
    	 x : 0;
    } 
    #youtube_horse4 image { 
    	/* x : 95; */
    	x : 105;
    } 
    #star_horse_2 {
    	y : 165;
    }
    
    #menu_01_ai_label{
    	float: left;
    }
    #menu_01_u7m3_label{
    	float: right;
    }
    
    #menu_02_ai_label {
    	float: left;
    }
    #menu_02_u7m3_label {
    	float: right;
    }
    
     /*
    #mafeel_body tr td:nth-child(3),
    #mafeel_body tr td:nth-child(4),
    #mafeel_body tr td:nth-child(5),
    #mafeel_body tr td:nth-child(6) {
    	border-right: 1px solid black;
    }
	*/








/*##########################################*/
	/* 카드 한 묶음 */
    
    .card_wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 100%;
        align-items: stretch;
    }

    .love_tarot_desc_wrapper {
        width: 100%;
        height: 100px;
        padding: 14px;
        background: #f8f9fa;
        border-radius: 8px;
        flex: 0 0 auto;
    }

    .love_tarot_desc { 
        line-height: 1.7;
    }
 /*##########################################*/
 
 
 
 
 


/* 전체 range 이벤트 차단 */
.weightRange {
    pointer-events: none;
}

/* Webkit (Chrome, Android, iOS) */
.weightRange::-webkit-slider-thumb {
    pointer-events: auto;
}

/* Firefox */
.weightRange::-moz-range-thumb {
    pointer-events: auto;
}

/* IE / Edge */
.weightRange::-ms-thumb {
    pointer-events: auto;
}

/* 모바일 터치 안정화 */
.weightRange::-webkit-slider-thumb {
    touch-action: none;
}



:root {
    /* 디폴트 느낌 색상 */
    --track-bg: #d0d0d0;
    --track-fill: #0078d7;
    --thumb: #0078d7;
}

.weightRange {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    pointer-events: none;
}

/* ===== Webkit (Chrome / Mobile / iOS) ===== */
.weightRange::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background:
        linear-gradient(
            to right,
            var(--track-fill) 0%,
            var(--track-fill) var(--percent),
            var(--track-bg) var(--percent),
            var(--track-bg) 100%
        );
}

.weightRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--thumb);
    margin-top: -4px;
    pointer-events: auto;
    touch-action: none;
}

/* ===== Firefox ===== */
.weightRange::-moz-range-track {
    height: 10px;
    background: var(--track-bg);
    border-radius: 2px;
}

.weightRange::-moz-range-progress {
    height: 10px;
    background: var(--track-fill);
    border-radius: 2px;
}

.weightRange::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--thumb);
    border: none;
    pointer-events: auto;
}



.oz_tarot  .card_item {
	width:  49%;
   	height: 100%;
}
.oz_tarot  .card_item .selected_card {
	width:  100%;
   	height: 100%;
}

.oz_tarot .love_tarot_desc {
	width:  100%;
}

.oz_tarot .cardContainer {
 	top: -50px;
}
.oz_tarot .modal-header {
	padding: 5px;
}

/* 
 .breadcrumb .col-auto {
 padding-left: 2px;
	padding-right: 2px;
 }
	
.breadcrumb-item.active {
	float: right;
	padding-left: 2px;
	padding-right: 2px;
}
 */
.user_point_area{
	max-width: 120px !important;
	padding: 3px;
} 

	.mafeelTarot .tarot_deck {
		cursor: pointer;
	    display: inline-block;
	    width: 50%;
	    height: 200px;
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: contain;
	}
	.mafeelTarot .tarot-circle {
		position: relative;
	    top: 10%;
	     left: 50px; 
	    margin: auto;
	    transform-origin: center center;
	}
	
	.mafeelTarot .tarot-card {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: calc(110px * 0.8);
	    height: calc(180px * 0.8);
	    transform-origin: center bottom;
	    cursor: pointer;
	    transition: transform 0.3s ease, box-shadow 0.3s ease;
	    
	}
	
	.navbar-nav a {
		font-size: 20px !important;
		font-weight: bold  !important;
	}
	
	.audioAI button.media ,
	.videoAI button.media {
		padding: 5px 5px;
	}
	
	.audioAI button.media div.playNstop,
	.videoAI button.media div.playNstop { 
		margin-right: 0px;
	} 

	.range_warm_m {
		width:225px;
	}
	
	#race_no.pagination li {
		width: 30px;
	}
	.pagination li a{
		font-size: 15px !important;
		font-weight: bold;
		color: black  !important;
		
	}
	
	.pagination li.disabled a,
	.pagination li.isAIReady a{
		color: #d3d3d3  !important;
	}
	
	
	
	.m_title {
		font-size: 15px !important;
		font-weight: bold;
	}
	
	.m_title_2 {
		font-size: 18px !important;
		font-weight: bold;
	}
	
  .star_svg_horse ,
  .star_svg_label {
    font-size: 25px; 
  }
	
	.radarChart .legend {
    font-size: 15px !important; 
	}
	
	.radarChart {
		width: 230px;
	}
	
	.nav_btn {
		font-size: 14px !important;
		font-weight: bold;
		padding: 4px 5px; 
        background-color: #F1BE16;
        color: black;
        cursor: pointer;
	}
	
	.intro #btn_nav_simulation,
	.intro #btn_nav_audio_ai,
	.intro #btn_nav_video_ai,
	.intro #btn_nav_result {
		display: none;
	
	}
	.forecast #btn_nav_simulation {
		display: none;
	}
	
	.audioAI #btn_nav_audio_ai {
		display: none;
	}
	
	.videoAI #btn_nav_video_ai {
		display: none;
	}
	.result #btn_nav_result{
		display: none;
	} 
	
	 
	 .navbar-brand {
	 	margin-right: 0px;
	 }
	 .nav_btn {
	 	margin-right: 1px !important;
	 }
	 .navbar-toggler {
	 	padding: 2px 3px;
	 }
	 
	  .navbar:has(.navbar-collapse.collapsing) .nav_btn,
	 .navbar:has(.navbar-collapse.show) .nav_btn {
        display: none;
    }
	
	#cardContainerLove {
		background-color: white !important;
	}
	
	.navbar-nav .nav-link {
		padding-top: 8px;
    	padding-bottom: 8px;
	}
}