html {

	cursor: url(/img/mouse.png), url(/img/mouse.png),auto;
	
	scrollbar-width: thin;
	
    animation: fadein 200ms ease-out;
    -moz-animation: fadein 200ms ease-out; /* Firefox */
    -webkit-animation: fadein 200ms ease-out; /* Safari and  Chrome */
    -o-animation: fadein 200ms ease-out; /* Opera */

  background: url(/img/background_img.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	 
}



body { font-family: "Noto Sans KR", sans-serif; line-height: 22px; font-size: 14px; color: floralwhite;overflow-x:hidden;}

a { color: floralwhite; cursor: pointer; text-decoration: none; }
a:hover, a:focus, a:active { color: crimson; text-decoration: none; }
p {margin:0px;padding:0px;}
fieldset legend { display:none; }
label { font-weight:normal; }
label.checkbox, label.radio { line-height:12px; font-size: 12px; font-weight: normal; cursor: pointer; }
hr { margin-top: 20px; margin-bottom:20px; border:0; border-top:1px solid #eee; display:block; }
blockquote { font-size: 12px; margin:0px 0px 20px; }
.en, h1, h2, h3, h4, h5, h1 a, h2 a, h3 a, h4 a, h5 a { font-family: "Roboto", sans-serif; }
.ko, .ko small { font-family:dotum, sans-serif; }
.sns-share-icon img { width:20%; max-width:34px; border-radius:50%; }
div {display:block;}

body {
	padding:0px;
	margin:0px;
	cursor: url(/img/mouse.png), url(/img/mouse.png),auto;
	
	scrollbar-width: thin;
	
    animation: fadein 200ms ease-out;
    -moz-animation: fadein 200ms ease-out; /* Firefox */
    -webkit-animation: fadein 200ms ease-out; /* Safari and  Chrome */
    -o-animation: fadein 200ms ease-out; /* Opera */

	caret-color: transparent;
}


a, input {cursor: url(/img/mouse.png), url(/img/mouse.png),auto}

body::-webkit-scrollbar {
  width: 14px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #444444;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
	background-color: #666666;    /* color of the scroll thumb */
	border-radius: 3px;       /* roundness of the scroll thumb */
	border: 2px solid #444444; 
}

div::-webkit-scrollbar {
  width: 14px;               /* width of the entire scrollbar */
}

div::-webkit-scrollbar-track {
  background: #000000;        /* color of the tracking area */
}

div::-webkit-scrollbar-thumb {
	background-color: #444444;    /* color of the scroll thumb */
	border-radius: 3px;       /* roundness of the scroll thumb */
	border: 2px solid #000000; 
}


@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}

.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px; /* 테이블 전체 너비 설정 */
}
.responsive-table th, .responsive-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #444;
  font-size: 14px;
}
.responsive-table th {
  background-color: #333;
  color: #fff;
}
@media (max-width: 768px) {
  .responsive-table th, .responsive-table td {
    font-size: 12px;
    padding: 6px;
  }
}

table {border-collapse: collapse;border: 1px solid #777777;}
table th{border-collapse: collapse;font-size:10pt;color:darkgoldenrod;border:solid 1px #777777;}
table td{border-collapse: collapse;font-size:10pt;color:lightgray;border:solid 1px #878787;}

.table_event {border-collapse: collapse;}
.table_event th{border-collapse: collapse;font-size:10pt;color:floralwhite;border:solid 1px #777777;}
.table_event td{border-collapse: collapse;font-size:10pt;color:lightgrey;border:solid 1px #878787;}

tr.striped {background-color: #ffffff;}
.tr_head_rank {border-right-width:1px; border-right-color:#999999; border-right-style:solid;border-bottom-width:1px; border-bottom-color:#999999; border-bottom-style:solid;}
.tr_head_rank2 {border-bottom-width:1px; border-bottom-color:#999999; border-bottom-style:solid;}
.td_line {border-right-width:1px; border-right-color:#999999; border-right-style:solid;}
.td_line2 {border-right-width:1px; border-right-color:#cccccc; border-right-style:solid;}

.title{ color:#ffffcc; background-color:#222222; padding:10px; font-weight:bold; text-align:center}
.message{ color:#ffffcc; background-color:#444444; padding:10px;}
.ef_user_message{ width:auto}


.tb {width:100%;}
.tb td{padding:5px; border-bottom:solid 1px #666666;}
.tb_top{padding:5px; font-weight:bold;border-bottom:solid 1px #999999; text-align:center;}


.ef_item_table{border-collapse: collapse;border: none;}
.ef_item_table td{border-collapse: collapse;border: none;}

.character { width:100%;}
.character td { padding:5px; border:solid 1px #222222}

.message_box {font-size:12px;color:#D3C6AB;padding:5px; background-color:#330000;border: solid 1px #D3C6AB;margin-bottom:10px;}
.message_box p{font-size:16px;font-weight:bold;margin:0px;}


.item_auth_color1{color:#828282; !important}
.item_auth_color2{color:#5895c0; !important;}
.item_auth_color3{color:#dc5353; !important;}
.item_auth_color4{color:#c0a875; !important;font-size:12pt;}


.ef_button{ margin-bottom:5px;background-color:#000;float:right;color:#c7beb1;font-weight:bold;border:none;width:117px;height:42px;background-image : url('/img/button_bg.png');text-shadow:1px 1px 2px #56544e;}
.ef_button_disable{margin-bottom:5px;opacity: 0.5; background-color:#000;float:right;color:#c7beb1;font-weight:bold;border:none;width:117px;height:42px;background-image : url('/img/button_bg.png');text-shadow:1px 1px 2px #56544e;}


.drop_box_magic{border:solid 1px #5895c0;color:#5895c0; margin:10px;padding:10px;}
.drop_box_magic p{color:#eeeeee;}
.drop_box_rare{border:solid 1px #dc5353;color:#dc5353; margin:10px;padding:10px;}
.drop_box_rare p{color:#eeeeee;}
.drop_box_unique{border:solid 1px #c0a875;color:#c0a875; margin:10px;padding:10px;}
.drop_box_unique p{color:#eeeeee;}

.button{
	 background-color:#000;float:right;color:#c7beb1;font-weight:bold;border:none;width:117px;height:42px;background-image : url('/img/button_bg.png');text-shadow:2px 2px 2px #56544e;
}

.battle_status_tb {width:100%;max-width:300px;border:none;}
.battle_status_tb td{border:none;}


.login_form_id {margin:10px;}
.login_form_id input{width:100%;font-size:16px;line-height:160%;}
.login_form_pw {margin:10px;}
.login_form_pw input{width:100%;font-size:16px;line-height:160%;}

.auto_login {margin-left:10px;}










/* Character box styling ------------------------------------------------ 시작*/
.avatar {
  max-width: 130px;
  border-radius: 8px;
}

.character-box {

  width: 100%;
  height: 100px;
  background-color: #2c3e50;
  border: solid 1px #34495e;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: all 0.3s ease;
}

.character-box:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.character-box-active {

  width: 100%;
  height: 100px;
  background-color: #34495e;
  border: solid 2px #3498db;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.character-table {
  border: none;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  border-spacing: 0;
}

.character-table td {
  border: none !important;
}

.character-image {
  margin: 6px;
  width: 84px;
  height: 84px;
  background-color: #000000;
  border: solid 1px #555;
  border-radius: 6px;
  object-fit: cover;
}

.character-info {
  margin: 8px;
  margin-top: 10px;
  line-height: 150%;
}

.character-name {
  color: #ecf0f1;
  font-size: 12pt;
  font-weight: bold;
}

.character-class {
  color: #bdc3c7;
}

.character-level {
  color: #e74c3c;
}

.character-exp {
  font-size: 10pt;
  color: #2ecc71;
}

.character-dealy {
  color: #bdc3c7;
  font-size: 10pt;
}

.progress-bar {
  opacity: 0.7;
  margin-top: 6px;
  margin-left: 5px;
  margin-right: 10px;
  height: 4px;
  background-color: #555;
  border-radius: 2px;
}

.hp-bar {
  height: 4px;
  background-color: #e74c3c;
  border-radius: 2px;
}

.mp-bar {
  height: 4px;
  background-color: #3498db;
  border-radius: 2px;
}

.character-stats {
  font-size: 9pt;
  margin: 5px;
  color: #95a5a6;
}

/* Character box styling ------------------------------------------------ 끝*/






.map_top_btn{margin:3px;width:58px;height:58px;}

.map_top_btn:hover{margin:3px;width:52px;height:52px;filter: drop-shadow(5px 5px 5px #000);}

.map_top_btn_text {position:absolute;font-size:8px;top:50px;text-align:center;width:58px;}

.map_right_btn{background-image:url(/img/top_btn_bg.png);width:58px;height:58px;line-height:58px;text-align:center;font-size:9pt;margin-bottom:5px}

.map_right_btn_red{background-image:url(/img/map_button_red.png);background-size:100%;width:54px;height:54px;line-height:54px;text-align:center;font-size:9pt;margin-bottom:7px}
 
.map_right_btn_gray{background-image:url(/img/map_button_gray.png);background-size:100%;width:54px;height:54px;line-height:54px;text-align:center;font-size:9pt;margin-bottom:7px}

.map_right_btn_blue{background-image:url(/img/map_button_blue.png);background-size:100%;width:54px;height:54px;line-height:54px;text-align:center;font-size:9pt;margin-bottom:7px}

.map_right_btn_purple{background-image:url(/img/map_button_purple.png);background-size:100%;width:54px;height:54px;line-height:54px;text-align:center;font-size:9pt;margin-bottom:7px}

.map_right_btn_green{background-image:url(/img/map_button_green.png);background-size:100%;width:54px;height:54px;line-height:54px;text-align:center;font-size:9pt;margin-bottom:7px}


.town_intro{width:100%;background:none;border:none;}
.town_intro td{border:none;padding:10px; font-size:14pt;}

.town_inn{width:100%;background:none;border:none;}
.town_inn td{border:none;padding:10px; font-size:14pt;}

.town_bank{width:100%;background:none;border:none;}
.town_bank td{border:none;padding:10px; font-size:14pt;}

.town_dice{width:100%;background:none;border:none;}
.town_dice td{border:none;padding:10px; font-size:14pt;}

.town_attackddang{width:100%;background:none;border:none;}
.town_attackddang td{border:none;padding:10px; font-size:14pt;}

.town_hotel{width:100%;background:none;border:none;}
.town_hotel td{border:none;padding:10px; font-size:14pt;}

.town_item_send{width:100%;background:none;border:none;}
.town_item_send td{border:none;padding:10px; font-size:14pt;}

.town_lotto{width:100%;background:none;border:none;}
.town_lotto td{border:none;padding:10px; font-size:14pt;}

.town_powerup_hp{width:100%;background:none;border:none;}
.town_powerup_hp td{border:none;padding:10px; font-size:14pt;}

.town_powerup_mp{width:100%;background:none;border:none;}
.town_powerup_mp td{border:none;padding:10px; font-size:14pt;}

.town_shop{width:100%;background:none;border:none;}
.town_shop td{border:none;padding:10px; font-size:14pt;}

.town_shop_potion{width:100%;background:none;border:none;}
.town_shop_potion td{border:none;padding:10px; font-size:14pt;}

.town_shop_scroll{width:100%;background:none;border:none;}
.town_shop_scroll td{border:none;padding:10px; font-size:14pt;}

.town_shop_skill{width:100%;background:none;border:none;}
.town_shop_skill td{border:none;padding:10px; font-size:14pt;}

.town_shop_user{width:100%;background:none;border:none;}
.town_shop_user td{border:none;padding:10px; font-size:14pt;}

.town_shop_user_point{width:100%;background:none;border:none;}
.town_shop_user_point td{border:none;padding:10px; font-size:14pt;}

.town_stock{width:100%;background:none;border:none;}
.town_stock td{border:none;padding:10px; font-size:14pt;}

.town_shop_user{width:100%;background:none;border:none;}
.town_shop_user td{border:none;padding:10px; font-size:14pt;}

.town_shop_user_point{width:100%;background:none;border:none;}
.town_shop_user_point td{border:none;padding:10px; font-size:14pt;}

.town_char_box_hp {border:none;}
.town_char_box_mp {border:none;}
.town_char_box_hp td{border:none;}
.town_char_box_mp td{border:none;}



.ef_table { 
	margin:5%;
    width: 90%; 
    max-width: 600px; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    background-color:  rgba(0,0,0,0.3); 
    border: 1px solid #333; 
} 

.ef_table td { 
    padding: 15px; 
    color: #e0e0e0;
} 

.ef_table tr:first-child td { 
    background-color: #2c3e50; 
    color: #e0e0e0; 
    font-size: 18px; 
    padding: 15px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

hr { 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); 
    margin: 20px 0; 
} 

strong { 
    display: inline-block; 
    color: #4fc3f7; 
    font-size: 16px; 
    margin-bottom: 8px; 
} 

#reload { 
    background-color: #263238; 
    border-radius: 6px; 
    padding: 10px; 
    margin: 15px 0; 
    font-size: 14px; 
    color: #e0e0e0; 
    border-left: 4px solid #4fc3f7; 
} 

#reload b { 
    color: #ff8a65; 
    font-size: 16px; 
}

p[align="center"] { 
    background-color: #263238; 
    border-radius: 6px; 
    padding: 12px !important; 
    font-weight: bold; 
    color: #e0e0e0; 
} 

form { 
    margin: 15px 0; 
} 

.btn { 
    display: inline-block; 
    padding: 8px 16px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 14px; 
    transition: all 0.2s ease; 
    border: none; 
} 

.btn-primary { 
    background-color: gainsboro; 
    color: #121212; 
    box-shadow: 0 2px 5px rgba(79, 195, 247, 0.3); 
} 

.btn-primary:hover { 
    background-color: #29b6f6; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(79, 195, 247, 0.5); 
} 

input[type="text"] { 
    padding: 8px; 
    border-radius: 4px; 
    background-color: #333; 
    color: #e0e0e0;
    border: 1px solid #555; 
} 

.service-description { 
    line-height: 1.6; 
    color: #bdbdbd; 
    margin-bottom: 5px; 
} 

.cost-highlight { 
    font-weight: bold; 
    color: #ff8a65; 
    background-color: #3e2723; 
    padding: 3px 6px; 
    border-radius: 4px; 
    display: inline-block; 
}



/* 전투결과 ------------------------------------------------시작*/

.battle_result {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(20, 20, 30, 0.85);
  border: 1px solid #444;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  font-family: 'Malgun Gothic', sans-serif;
  color: #e0e0e0;
}

.victory_header {
  background: linear-gradient(to right, #8b0000, #c62828);
  color: #fff;
  padding: 10px 0;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.victory_header {
  background: linear-gradient(to right, #8b0000, #c62828);
  color: #fff;
  padding: 10px 0;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
}

.defeat_header {
  background: linear-gradient(to right, #1a1a1a, #333333);
  color: #aaaaaa;
  padding: 10px 0;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  letter-spacing: 2px;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  opacity: 0.9;
}

.result_content {
  background-color: #1a1a2a;
  padding: 15px;
  text-align: center;
  line-height: 1.7;
}

.exp_gain {
  color: #FFD54F;
  font-weight: bold;
}

.skill_gain {
  color: #81C784;
  font-weight: bold;
}

.gold_gain {
  color: #64B5F6;
  font-weight: bold;
}

.tax_paid {
  color: #9575CD;
  font-weight: normal;
}

.warning_text {
  color: #ef9a9a;
  margin: 10px 0;
  font-size: 0.95em;
}

.buff_table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.buff_header {
  background: linear-gradient(to right, #4a4a5a, #333345);
  color: #FFD54F;
  padding: 8px;
  font-weight: bold;
  letter-spacing: 1px;
}

.buff_row {
  background-color: #252535;
}

.buff_row:nth-child(odd) {
  background-color: #2a2a3a;
}

.buff_name {
  padding: 8px;
  width: 40%;
  color: #e0e0e0;
  text-align: left;
  border-bottom: 1px solid #3a3a4a;
}

.buff_value {
  padding: 8px;
  width: 60%;
  color: #64B5F6;
  text-align: right;
  border-bottom: 1px solid #3a3a4a;
}
/* 전투결과 ------------------------------------------------끝*/


/* 캐릭터 정보 테이블 스타일 ------------------------------------------------ 시작*/
.character-info-table {
    border-collapse: collapse;
    background-color: rgba(15, 15, 20, 0.9);
    color: #e0e0e0;
    font-family: 'Malgun Gothic', sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #333;
}

/* 헤더 영역 */
.character-header {
    background-color: #1e2430;
    padding: 15px;
    border-bottom: 2px solid #3a3f4b;
}

.character-name {
    color: #a0cfff;
    font-size: 20px;
    margin: 0 0 10px 0;
    text-shadow: 0 0 5px rgba(160, 207, 255, 0.3);
}

.character-basic-info {
    color: #b8b8b8;
    line-height: 1.6;
    font-size: 14px;
}

/* 섹션 제목 */
.section-header {
    background-color: #2c3e50;
    color: #f0f0f0;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 10px 0;
    border-top: 1px solid #3a3f4b;
    border-bottom: 1px solid #3a3f4b;
}

/* 스탯 정보 */
.stat-row {
    display: table-row;
    background-color: rgba(30, 30, 40, 0.5);
}

.stat-row:nth-child(odd) {
    background-color: rgba(35, 35, 45, 0.5);
}

.stat-label {
    padding: 8px 12px;
    border: 1px solid #333;
    color: #a0cfff;
    font-weight: bold;
}

.stat-value {
    padding: 8px 12px;
    border: 1px solid #333;
    text-align: right;
    color: #e0e0e0;
}

/* 최대값 스타일 */
.max-value {
    color: #8a8a8a;
    font-size: 0.9em;
}

/* 마스터리 영역 */
.mastery-row td {
    padding: 8px 12px;
    border: 1px solid #333;
    background-color: rgba(40, 40, 50, 0.5);
}

/* 캐릭터 정보 테이블 스타일 ------------------------------------------------끝*/