@charset "utf-8";
/* 폰트적용 */
@import "fonts.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* 기본설정 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding:0; margin:0; line-height:1.4em; font-weight: 350; font-family:'Noto Sans Korean', 'Malgun Gothic', 'Open Sans', sans-serif; word-wrap:break-word; -webkit-text-size-adjust:none; color:black}
h_title, p {color:black;}
ol, ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%;}
form, fieldset { border:0; }
address, caption, em { font-weight:normal; font-style:normal; }
img { border:0; margin:0; padding:0; }
a { text-decoration:none; }
a:link, a:visited, a:hover, a:active { text-decoration:none !important; }
/* 라이트 모드 (기본) */
body {
    background-color: #f7f7f7;
    color: #1f1f1f;
    transition: background-color 0.3s, color 0.3s;
}

/* 다크 모드 */
.dark body {
    background-color: #2b2b2b;
    color: #d6d6d6;
}

/* 링크, 버튼 등 강조색 */
.dark a,
.dark p:not(
  .skill-desc,
  .skill-active,
  .skill-passive,
  .material-name,
  .material-count,
  .combine-material-name,
  .combine-material-count,
  .itemView-drop_date
),
.dark th,
.dark td,
.dark span:not(
  .skill-desc span,
  .skill-active span,
  .skill-passive span,
  .etc_effect,
  .point_red,
  .point,
  .attr-value,
  .stat_color,
  .no-comment,
  .comment-item span,
  .btn span
),
.dark .dist_box,
.dark .dist_box_item,
.dark .page_box,
.dark .p-treetable,
.dark .p-treetable-column-title,
.dark .p-treetable-body-cell-content,
.dark .input_box_item,
.dark .table_type_queue div,
.dark .card_type_mapdeck div,
.dark .table_type_queue span,
.dark .table_type_queue td div,
.dark .combine-arrow,
.dark .h_title {
  color: #d6d6d6 !important;
}
.dark .btn{
  color: #666 !important;
}
.dark .character-trait{
  color: rgb(223 145 0) !important;
}
.dark .skill-active {
  color: #e74c3c !important;
}
.dark .skill-passive {
  color: #27ae60 !important;
}
.dark .skill-desc {
  color: #555 !important;
}

/* 다크모드 전체 테이블 배경 톤 */
.dark .table_type_queue table {
    background-color: #2c2c2c;
    border-collapse: collapse;
    width: 100%;
  }

  /* 헤더 스타일 */
  .dark .table_type_queue th {
    background-color: #3a3a3a !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
    padding: 10px;
    font-weight: 600;
  }

  /* 셀 스타일 */
  .dark .table_type_queue td {
    background-color: #2b2b2b !important;
    color: #dddddd !important;
    border: 1px solid #444 !important;
    padding: 8px;
  }

  /* 입력창 스타일 */
  .dark .table_type_queue input.inputbox {
    background-color: #1f1f1f;
    color: #eee;
    border: 1px solid #444;
  }

  /* 참고 안내 문구 */
  .dark .table_type_queue span {
    color: #84aaff !important;
  }



.dark .table_type8 th {
    background-color: #3a3a3a !important;
    color: #f5f5f5 !important;
    border-bottom: 1px solid #444 !important;
    border-left: 1px dotted #555 !important;
}

.dark .table_type8 td {
    background-color: #2b2b2b !important;
    color: #dddddd !important;
    border-bottom: 1px solid #444 !important;
    border-left: 1px dotted #555 !important;
}

.dark button {
    background-color: #3a3a3a;
    color: #eee;
    border: 1px solid #555;
}

  /* 토글 버튼 스타일 */
  .toggle-btn {
    padding: 0.5rem 1rem;
    background-color: #e0e0e0;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin: 1rem;
  }
  .dark .toggle-btn {
    background-color: #444;
    color: #eee;
  }



#app a { transition: all .3s ease;}
#app a:hover { transition: all .3s ease;}
/* #app div { transition: all .3s ease;}
#app div:hover { transition: all .3s ease;} */

/* 숨김영역 */
#accessibility, #accessibility_footer, hr, legend, .skip { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
caption { display:none; }

/* float 속성 초기화 */
.space { display:block; clear:both; float:none; width:100%; height:0; line-height:0 !important; font-size:0 !important; margin:0 !important; padding:0 !important; overflow:hidden; }
.clearfix { display: block; }
.clearfix:after { display:block; clear:both; content:"."; visibility:hidden; height:0; }
* html .clearfix { height:1%; }

/* form css */
input, textarea, select, img { vertical-align: middle; }
input, textarea, select { font-family:inherit; font-size:inherit;}

.input_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; height:28px; line-height:28px; padding:0 3px;}
.input_form:focus { border:1px solid #000;}
.select_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; height:28px; padding-left:3px; }
.select_form2 { border:1px solid #ddd; border-radius:6px; color:#666; background:#f5f5f5; box-sizing:border-box; height:36px; padding-left:3px; }
.textarea_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; padding:3px 3px 3px 10px; width:100%;  margin:8px 0; }
.textarea_form:focus { border:1px solid #000;}
.input_file { height:28px; width:80%; }


/* 드래그시 배경컬러 */
::-moz-selection {background:#716365; color:#fff;}
::selection {background:#716365; color:#fff;}

/* login */

#login_wrap {width:100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#login { display: flex; align-items: center; justify-content: center; flex-direction: column;}
#login .p_desc1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px; color: #000;}
#login .p_desc1 span { color: #4b71dc;}
#login .p_desc2 { font-size: 17px; color: #9f9f9f; margin: 10px 0 50px 0;}
#login .login_box { width: 500px; border-top: 2px solid #000; border-bottom: 1px solid #ddd; padding:50px 30px; box-sizing: border-box;}
#login .login_box > ul > li { padding: 10px 0;}
#login .login_box > ul > li input { width: 100%; height: 60px; border: 0; background: #f1f1f1; padding: 10px 30px; box-sizing: border-box; font-family: 'Montserrat', sans-serif; line-height: 1em; font-size: 18px; letter-spacing: 0.05em; font-weight: 500;}
#login .login_box > ul > li input:focus { outline: none; border: 2px solid #4b71dc;}
#login .login_box > ul > li input[type="submit"] { cursor: pointer; background: #4b71dc; font-weight: 600; color: #fff; transition: all .3s ease;}
#login .login_box > ul > li input[type="submit"]:hover { background: #000;}
#login .login_box > ul > li input[type="button"] { cursor: pointer; background: #4b71dc; font-weight: 600; color: #fff; transition: all .3s ease;}
#login .login_box > ul > li input[type="button"]:hover { background: #000;}

@media all and (max-width:600px) {
    #login .p_desc1 { font-size: 30px;}
    #login .p_desc2 { font-size: 16px; margin: 0 0 40px 0;}
    #login .login_box { width: 100%; padding:30px 20px;}
    #login .login_box > ul > li { padding: 10px 0;}
}


/* Layout */
html, body { height:100%;}
body { font-size:15px; word-break:keep-all;} /* 단어 기준으로 줄바꿈 */
#app { width:100%; height: 100%; overflow-x:hidden;}
.wrap_box { width: 100%; position:relative; box-sizing: border-box;}

#container {position:relative; height:100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap;}

#header { width: 100%; height: 80px; background-color: #212a53; padding: 0 3vw; position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
#header .wrap_box { display: flex; align-items: center; justify-content: space-between; gap: 1vw;}
#header h1 { flex:4; color: #fff; font-family: 'Montserrat', sans-serif; line-height: 1em; font-size: 30px; letter-spacing: 0.05em; font-weight: 700;}
#header h1 a { color: #fff;}

#lnb { flex:1;}
#lnb select { width: 100%; height:36px; line-height: 1em; font-weight: 600; padding: 5px 10px; font-family: inherit; background:#fff url("/design/template/bg_select.png") no-repeat calc(100% - 15px) center / auto 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; box-sizing: border-box; border-radius: 5px;  }
#lnb select::-ms-expand { /* for IE 11 */ display: none; }

/*#lnb { width: 50%;}
#lnb > ul { display: flex;}
#lnb > ul > li { width: 100%;}
#lnb > ul > li > a { display: block; color: #fff; width: 100%; font-size: 17px; font-weight: 500; text-align: center; line-height: 80px;}
#lnb > ul > li > a:hover, #lnb > ul > li > a.on { background-color: #265db9;}*/

/* #gnb > a { background: #fff; height:36px; box-sizing: border-box; padding: 7px 25px; color: #212a53; font-size: 14px; font-weight: 500; border-radius: 5px; display: block;}
#gnb > a:hover { background: #265db9; color: #fff; cursor:pointer;} */
/* #gnb{

} */



.lan_icon_wrapper {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }

  .lan_icon_wrapper .lan_icon {
    width: 100%;
    height: 100%;
  }


#gnb > .btn_box{
    gap:3px;
    float: right;
}
#gnb .ver { color:wheat; }.gnb_sub_part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 12px; */
  }

  /* lan 아이콘 + 토글 버튼 묶음 */
  .gnb_row_group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* 모바일 대응 */
  @media all and (max-width: 400px) {
    .gnb_sub_part {
      flex-direction: column;
      align-items: center;
    }

    .gnb_row_group {
      flex-direction: row;
      justify-content: center;
      /* margin-bottom: 8px; */
    }

    .btn_box {
      text-align: center;
    }
  }

#gnb2 > a { background: #fff; height:36px; box-sizing: border-box; padding: 7px 25px; color: #212a53; font-size: 14px; font-weight: 500; border-radius: 5px; display: block;}
#gnb2 > a:hover { background: #265db9; color: #fff; cursor:pointer;}
#contents_box { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height:calc(100% - 80px);}

.stle { font-size:22px; font-weight:700; color: #212a53; height: 60px;}
.stle span { color: #265db9;}
#contents { padding: 3vw; box-sizing: border-box;}

.img_ready { text-align: center; min-height: 670px;}

@media all and (max-width:1000px) {
    #lnb { flex:3;}
}
@media all and (max-width:500px) {
    #header { padding: 0 5vw; }
    #header .wrap_box { gap: 10px;}
    #header h1 { flex:2; font-size: 24px;}
    #lnb { flex:8;}
    /* #gnb > a { padding: 7px 15px;} */
    #contents { padding: 5vw;}
}
@media all and (max-width:400px) {
    .ver{
        display: none;
    }
    .lan_icon_wrapper {
        width: 40px;
        height: 40px;
    }
    .gnb_row_group button{
        height: 28px !important;
    }

}

.cursor{
    cursor:pointer;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}