@import url('https://fonts.googleapis.com/css2?family=Asta+Sans:wght@300..800&display=swap');

@font-face {
    font-family: 'dgm';
    src: url('https://cdn.jsdelivr.net/gh/iqj8jd-crypto/assets@main/DungGeunMo.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/iqj8jd-crypto/assets@main/DungGeunMo.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/iqj8jd-crypto/assets@main/DungGeunMo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*{
  padding	: 0;
  margin	: 0;
  line-height	: 1.25em;
  font-family: "Asta Sans", sans-serif;
  font-optical-sizing: auto;
  overflow:inherit;
  font-size: 16px;
}
/* [추가] body 태그에 pixel-font 클래스가 있을 때만 둥근모 적용 */
body.pixel-font, body.pixel-font * {
    font-family: "dgm", "Asta Sans", sans-serif;
	font-weight: normal !important;
}
img{
  border:0px;
}
html{
  height:100%;
}
body{
  height	:100%;
  text-align	: center;
}
* html div#main_frame{
  height	: 100%;
}
body > #main_frame{
  height	: auto;
}
p{
  margin-bottom	: 1em;
}
.align-right{
  text-align	:right;
}
.align-center{
  text-align	:center;
}
.bold{
  font-weight	: bold;
}
.u{
  /* text-decoration	: underline; */
  font-size: 1.25em !important;
  font-weight: 800;
  padding: 5px 10px;
  margin: 5px 0;
  background: #123456;
}
ul{
  /*list-style-type:disc;*/
}
li{
  margin-left:40px;
}
.vcent{
  vertical-align	: middle;
  margin	: 0 5px;
}
.c-both{
  clear:both;
}
.clear{
  clear:both;
  line-height:0;
  height:0;
}
.land{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_grass{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_grass.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_grass01{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_grass01.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_sea{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_sea.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_cave{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_cave.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_snow{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_snow.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_swamp{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_swamp.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_ocean{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_ocean.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_sand{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_sand.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_mount{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_mount.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_lava{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_lava.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_pavement01{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_pavement01.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_build01{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_build01.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.land_jungle{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(../image/other/land_jungle.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
/* for battle */
.dmg{
  color:#cc3300;
}
.recover{
  color:#3366ff;
}
.support{
  color:#66cc66;
}
.spdmg{
  color:#993399;
}
.levelup{
  font-weight:bold;
  color:#ffff33;
}
/* 詠唱や貯めの色 */
.charge{
  color:#ffcc33;
}

/* ------------------------------------------------------- */
/* [추가] 픽셀 폰트 사용 시 아이콘 깨짐 방지 코드 (v6 호환) */
/* ------------------------------------------------------- */

/* .pixel-font 모드일 때, 아이콘 클래스들은 픽셀 폰트 강제 적용에서 제외 */
.pixel-font .fa, 
.pixel-font .fas, 
.pixel-font .far, 
.pixel-font .fab,
.pixel-font .fa-solid,   /* FontAwesome 6 Solid */
.pixel-font .fa-regular, /* FontAwesome 6 Regular */
.pixel-font .fa-brands   /* FontAwesome 6 Brands */
{
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

/* 버튼이나 입력창 내부의 아이콘도 깨지지 않게 처리 */
.pixel-font button .fa, .pixel-font button .fas, .pixel-font button .fa-solid,
.pixel-font input .fa, .pixel-font input .fas, .pixel-font input .fa-solid {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}

/* ------------------------------------------------------- */
/* [추가] 시스템 메시지 (토스트 팝업 스타일) */
/* ------------------------------------------------------- */

.system-msg-box {
    position: fixed;            /* 화면 스크롤과 상관없이 고정 */
    top: 80px;                  /* 화면 위에서 80px 떨어진 위치 (헤더 아래쯤) */
    left: 50%;                  /* 화면 가로 중앙 */
    transform: translateX(-50%);/* 정확한 가운데 정렬 보정 */
    
    min-width: 300px;           /* 최소 너비 */
    max-width: 90%;             /* 모바일 대응 */
    padding: 15px 25px;
    
    background: rgba(0, 0, 0, 0.9); /* 반투명 검정 배경 */
    border-radius: 8px;         /* 둥근 모서리 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 그림자 */
    
    font-weight: bold;
    font-size: 1.1em;
    z-index: 9999;              /* 다른 요소보다 무조건 위에 표시 */
    
    animation: slideDown 0.25s ease-out forwards; /* 나타날 때 애니메이션 */
    
    /* 텍스트 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 성공 메시지 색상 */
.msg-success {
    border: 2px solid #4CAF50;  /* 초록색 테두리 */
    color: #fff;
}
.msg-success i { color: #4CAF50; }

/* 에러 메시지 색상 */
.msg-error {
    border: 2px solid #FF5252;  /* 빨간색 테두리 */
    color: #fff;
}
.msg-error i { color: #FF5252; }

/* 나타나는 애니메이션 (위에서 아래로 툭) */
@keyframes slideDown {
    from { top: -100px; opacity: 0; }
    to { top: 80px; opacity: 1; }
}

/* 사라지는 애니메이션 (투명해지며 위로) */
.system-msg-box.fade-out {
    animation: fadeOut 0.25s ease-in forwards;
}

@keyframes fadeOut {
    from { top: 80px; opacity: 1; }
    to { top: -100px; opacity: 0; }
}