@charset "UTF-8";
@import url("https://fonts.cdnfonts.com/css/04b03");
@import url("https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css");

@font-face{
  font-family:"morris9";
  src:url("../css/fonts/morris9.woff") format("woff"),
      url("../css/fonts/morris9.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}

/* =========================
  (기본) 로그인 폼
========================= */
.login-skin-basic{
  display:block;
  position:relative;
  padding: 30px 36px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.login-skin-basic fieldset{
  display:block;
  position:relative;
  margin-bottom:3px;
}

.login-skin-basic fieldset input[type=text],
.login-skin-basic fieldset input[type=password]{
  display:block;
  width:100%;
  padding-left:30px;
  background: #333333;
  border: none;
  color: #ffffff;
}

.login-skin-basic .box-id:before{
  content:"\e976";
  font-family:"icon";
  display:block;
  position:absolute;
  top:0; bottom:0;
  left:10px;
  line-height:30px;
  color: #ffffff;

}

.login-skin-basic .box-pw:before{
  content:"\e98d";
  font-family:"icon";
  display:block;
  position:absolute;
  top:0; bottom:0;
  left:10px;
  line-height:30px;
  color: #ffffff;
}

.login-skin-basic fieldset.box-btn{
  top:0; right:0;
  width:72px;
  height:63px;
}

.login-skin-basic fieldset.box-btn button{
  width:100%;
  height:100%;
}

.login-skin-basic fieldset.box-join{ text-align: right;}
.login-skin-basic fieldset.box-join .ui-btn{ width:100%; }

/* =========================
  커스텀스킨
========================= */
.logined-skin{
  padding: 30px 36px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* 썸네일 */
.logined-skin .ui-thumb{
  width:140px;
  height:162px;
  padding:9px;
  box-sizing:border-box;
  /* background:url("ch_empty1.png") no-repeat left top; */
  position:relative;
}

.logined-skin .ui-thumb a{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logined-skin .ui-thumb a img{
  width:100%;
  max-height:100%;
  margin:8px;
  object-fit:contain;
  aspect-ratio:125/131;
  image-rendering:pixelated;
  display:block;
}

/* 텍스트/메뉴 */
.logined-skin a{ color:inherit; }

.logined-skin .character{
  margin:0;
  font-family:"04b03","Morris9",sans-serif;
  font-size:22px;
  line-height:normal;
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

.logined-skin .control-group{ margin-top:8px; }

.logined-skin .outlogin-menu{
  display:block;
  margin-bottom:4px;
  font-family:"04b03","Morris9",sans-serif;
  font-size:24px;
  line-height:1;
}

/* .logined-skin .outlogin-menu img{ margin-right:5px; } */

.logined-skin .name{
  margin:7px 0 0;
}

/* =========================
  HP/SP 바 (ui-bars)
========================= */
.ui-status.ui-bars{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:0;
}

.ui-bar{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  gap:6px;
}

.ui-bar-label{
  font-weight:700;
  color:#020202;
  font-size:12px;
  line-height:1;
}

.ui-bar-track{
  position:relative;
  height:24px;
  background:#2b1b12;
  box-sizing:border-box;
  overflow:hidden;
  border:2px dotted #3A0000;
}

/* has(기본/최대치) */
.ui-bar-has{
  position:absolute;
  left:0; top:0; bottom:0;
  background:#AD3535;
  z-index:1;
}

/* now(현재치) */
.ui-bar-now{
  position:absolute;
  left:0; top:0; bottom:0;
  background:#7D0000;
  z-index:2;
}

/* 숫자 텍스트 */
.ui-bar-text{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  font-weight:700;
  font-size:12px;
  color:#fff;
  z-index:3;
  font-style:normal;
  line-height:1;
  pointer-events:none;
}


.login-profile-wrap {
  display: flex;
}