/* 장비 titlebox 상단 여백 공간 */
.equip-titlebox-fix {
    margin: 5px 0px 0px 0px;
}
/* 장비 영역 전용, title 높이 50px 여백 확보 */
.body2col-container-equip {
    height: calc(100vh - (50px + 35px + 52px));
}
.body2col-container-panel {
    height: calc(100vh - (50px + 35px + 62px)); /* 比原本多預留56px給按鈕列 */
}

/* 추가: 4구역 패널 전환 버튼 디자인 개선 */
.panel-switch-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    margin-bottom: 8px;
    background: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0 16px;
}
/* 버튼 내용을 수직 수평 중앙 정렬, 메인 색상은 .bg-purple과 동일하게 설정 */
.panel-switch-btns .el-button {
    flex: 1 1 0;
    margin: 0 8px;
    font-size: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    transition: background 0.2s, color 0.2s;
    background: #d3dce6;
    color: #305079;
    border: none;
}
.panel-switch-btns .el-button.primary, .panel-switch-btns .el-button--primary {
    background: #305079;
    color: #fff;
    box-shadow: 0 2px 8px rgba(67,100,247,0.08);
}
.panel-switch-btns .el-button:not(.el-button--primary) {
    background: #d3dce6;
    color: #305079;
    border: none;
}
html, body {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: auto;
}

#App {
    min-width: 1600px;
    width: 100%;
}

[v-cloak] {
    display: none;
}

.el-row {
    margin-bottom: 2px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
    background: #305079;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}
.bg-purple-light2 {
    background: #e2f4ff;
}

.bg-4thskill-light {
    background: #fffea7;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.text-wrapper {
    white-space: pre-wrap;
}

.detail-summary {
    color: #2d6cdf;
    cursor: pointer;
}

.detail-summary:hover {
    text-decoration: underline;
}

.detail-breakdown {
    margin-top: 2px;
}

.detail-breakdown-item {
    color: #7a7a7a;
    font-size: 12px;
    line-height: 1.3;
}

.ROCalTitle {
    height: 50px;
    position: relative;
    color: white;
    background: #303133;
    border-radius: 4px;
}

.ROCalFooter {
    height: 35px;
    color: white;
    background: #303133;
    border-radius: 4px;
}

.bodycol-container {
    height: calc(100vh - (50px + 35px));
}

.body2col-container {
    height: calc(100vh - (50px + 35px + 42px));
}

.Dialogue-container {
    height: calc(100vh - (50px + 35px + 24px));
}

.Dialogue-container .el-dialog {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.Dialogue-container .el-dialog__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.EquipDBList-container {
    height: calc(100vh - (50px + 35px + 24px + 260px));
}

.EquipList-container {
    height: calc(100vh - (50px + 35px + 240px));
}

.StatusList-container {
    height: calc(100vh - (50px + 35px + 140px));
}

.SkillList-container {
    height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #fff;
}

.Dialogue-container .support-skill-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    height: 100%;
}

.Dialogue-container .support-skill-dialog-header {
    flex: 0 0 auto;
}



.Dialogue-container .support-skill-dialog-body .SkillList-container {
    height: 100%;
    max-height: 100%;
}

.Dialogue-container .support-skill-dialog-body .optionbox {
    height: 100%;
    min-height: 0;
}

.Dialogue-container .support-skill-dialog-body .el-scrollbar {
    height: 100%;
}

.Dialogue-container .support-skill-classlist {
    overflow-y: auto;
}

.Dialogue-container .support-skill-classlist .el-button {
    font-size: 16px;
}

.Dialogue-container .support-skill-list .el-scrollbar__wrap {
    height: 100%;
    overflow-y: auto;
}

.Dialogue-container .support-skill-classlist .el-scrollbar__wrap {
    height: 100%;
    overflow-y: auto;
}

/* Element UI 스크롤바 스타일이 올바르게 적용되도록 보장 */
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}

.el-scrollbar .el-scrollbar__view {
    padding: 5px;
}

.EquipText-container {
    height: calc(100vh - (50px + 35px + 130px));
}

.ThanksList-container {
    height: calc(100vh - (50px + 35px + 130px));
}

.Announce-container {
    height: calc(60vh - 40px);
}

.UpdateList-container {
    height: calc(60vh - 250px);
}

.AboutList-container {
    height: calc(100vh - (50px + 35px + 250px));
}

.EffectList-container {
    height: calc(100vh - (50px + 35px + 24px));
}

.EquipEffectList-container {
    height: calc(100vh - (50px + 35px + 240px));
}

.RaceSelectDialog {
    display: flex;
    flex-direction: column;
}

.RaceSelectDialog .el-dialog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 6px 0;
    overflow: hidden;
}

.RaceSelectDialog .el-scrollbar {
    flex: 1 1 auto;
    height: 100%;
}

.RaceSelectList-container {
    height: 100%;
}

.RaceSelectDialog .el-scrollbar__wrap {
    height: 100%;
}

.RaceSelectDialog .el-scrollbar__view {
    padding: 0;
}

.ElementSelectDialog {
    display: flex;
    flex-direction: column;
}

.ElementSelectDialog .el-dialog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 6px 0;
    overflow: hidden;
}

.ElementSelectDialog .el-scrollbar {
    flex: 1 1 auto;
    height: 100%;
}

.ElementSelectList-container {
    height: 100%;
}

.SelectDialogCenter .el-table th,
.SelectDialogCenter .el-table td,
.SelectDialogCenter .el-table .cell {
    text-align: center;
}

.SelectDialogCenter .statusbox {
    max-width: 720px;
    margin: 0 auto;
}

.SelectDialogCenter .el-table {
    margin: 0 auto;
}

.ElementSelectDialog .el-scrollbar__wrap {
    height: 100%;
}

.ElementSelectDialog .el-scrollbar__view {
    padding: 0;
}

.ConsumableList1-container {
    height: calc(100vh - (50px + 35px + 212px));
}

.ConsumableList2-container {
    height: calc(100vh - (50px + 35px + 160px));
}


.DBlist-container {
    height: calc(40vh - (50px));
}

.effectline {
    line-height: 3;
    margin: auto;
}

.boxborder {
    padding: 5px 5px;
    border: 1px solid #d7dae2;
    border-radius: 4px;
    min-height: 100px;
}

.EffectType.effect-tag-phys,
.EffectType.effect-tag-magic {
    display: inline-block;
    position: relative;
    padding-left: 12px;
}

.EffectType.effect-tag-phys::before,
.EffectType.effect-tag-magic::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.EffectType.effect-tag-phys::before {
    background: #f0a04b;
}

.EffectType.effect-tag-magic::before {
    background: #4aa3ff;
}

.statusbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
}

.statussavebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    background: #f9fafc;
}

.previeweffectbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    text-align: center;
    background: #606266;
    color: white;
}

.previeweffectbox2 {
    border-radius: 2px;
    text-align: center;
    background: #b3dcec;
}

.previeweffectbox3 {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    text-align: center;
    background: white;
    color: #606266;
}

.optionbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
}

.optionsubbox {
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: #c9e9d7;
}

.skillnametext {
    font-family: Microsoft JhengHei;
    font-size: 18px;
    font-weight: bold;
    color: #2c774e;
}

.skillline {
    line-height: 2;
    margin: auto;
    text-align: center;
}

.skilltag {
    border: 1px solid #0c7a47;
    border-radius: 4px;
    text-align: center;
}

.obsidianbox {
    text-align: center;
    background: #e0fdff;
    color:#0a0b38;
}

.goldbox {
    text-align: center;
    background: #fff09a;
    color:#0a0b38;
}

.textcenter {
    text-align: center;
    vertical-align: middle;
}

.titlebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: #606266;
    color: white;
}

.aboutbox {
    background: white;
    color: black;
}

.subtitlebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: #DCDFE6;
}

.ElementTableCellBT100 {
    text-align: center;
    vertical-align: middle;
    color: rgb(33, 153, 79);
    background:rgb(178, 253, 207);
    font-size: 24px;
    font-weight: bold;
}

.ElementTableCellST100 {
    text-align: center;
    color: white;
    background:rgb(240, 169, 76);
}

.ElementTableCellST50 {
    text-align: center;
    color: rgb(201, 46, 46);
    background:rgb(252, 175, 175);
    font-size: 24px;
    font-weight: bold;
}

.ElementTableCellST25 {
    text-align: center;
    color: rgb(70, 70, 70);
    background:rgb(170, 170, 170);
    font-size: 24px;
    font-weight: bold;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
}

.ElementRowColTitle {
    border-radius: 2px;
    font-size:21px;
    text-align: center;
    border: 1px solid #0c7a47;
    border-radius: 2px;
}

/* 드롭다운 메뉴가 하단에 있을 때 발생하는 표시 문제 수정 */
.el-select-dropdown {
    max-height: 300px !important;
    z-index: 9999 !important;
    padding-bottom: 8px !important;
    /* 여기의 overflow-y를 제거하고, 내부 wrap이 스크롤을 처리하게 함 */
}

.el-select-dropdown.is-multiple .el-select-dropdown__item {
    padding-right: 40px;
}

/* 공간이 부족할 때 드롭다운 메뉴가 위로 펼쳐지도록 보장 */
.el-popper[x-placement^="top"] {
    margin-bottom: 12px;
}

.el-popper[x-placement^="bottom"] {
    margin-top: 12px;
}

/* 드롭다운 메뉴 항목이 너무 많을 때, 높이를 제한하고 스크롤바 추가 - 여기에서만 스크롤 설정 */
.el-select-dropdown__wrap {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
}

.el-select-dropdown__list {
    padding: 6px 0 8px 0 !important;
}

/* 옵션 항목에 충분한 하단 공간 확보 */
.el-select-dropdown__item {
    padding: 8px 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 1px !important;
}

.el-select-dropdown__item:last-child {
    margin-bottom: 4px !important;
}

/* 스크롤바 스타일 수정 */
.el-select-dropdown__wrap::-webkit-scrollbar {
    width: 6px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 메뉴 하단 공간 문제 강제 수정 */
.el-scrollbar__view {
    padding-bottom: 10px !important;
}

/* 팝업 레이어에 충분한 z-index 보장 */
.el-popper {
    z-index: 10000 !important;
}

/* 사용자 정의 드롭다운 메뉴 스타일, 하단 가려짐 문제 해결 */
.custom-select-dropdown {
    max-height: 300px !important;
    /* overflow-y를 제거하고, __wrap이 스크롤을 처리하게 함 */
    padding: 8px 0 12px 0 !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.custom-select-dropdown .el-select-dropdown__item {
    padding: 8px 20px !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

.custom-select-dropdown .el-select-dropdown__item:last-child {
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
}

.custom-select-dropdown .el-select-dropdown__wrap {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
}

.custom-select-dropdown .el-scrollbar__view {
    padding-bottom: 12px !important;
}

/* 모든 드롭다운 메뉴에 충분한 하단 공간이 있도록 강제 보장 */
.el-select-dropdown__item:last-of-type {
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
}