/* ============================================================
   BASE & RESET
   ============================================================ */

body {
    font-family: 'NanumGothic', 'Roboto', sans-serif, 'Noto Sans KR', 'Noto Sans CJK KR', '나눔고딕', '맑은 고딕', 'Helvetica', sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    overflow: hidden;
    background: #ffffff;
    scrollbar-arrow-color: #bfbfbf;
    scrollbar-shadow-color: #f7f7f7;
    scrollbar-dark-shadow-color: #f7f7f7;
}

* {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

pre * {
    font-family: 'NanumGothic', 'Roboto', sans-serif, 'Noto Sans KR', '나눔고딕', '맑은 고딕', 'Helvetica', sans-serif;
}

div  { box-sizing: border-box; }
span { display: inline; }

a, a:visited, a:link, .quasilink { text-decoration: none; }
a { box-sizing: border-box; }

ul { list-style: none; padding: 0; margin: 0; }

input { font-size: 11px; }
input:focus { outline: none; }

input[type="number"]:focus,
input[type="text"]:focus,
textarea:focus {
    border-color: #5c7cfa;
    outline: none;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
}


/* ============================================================
   FONTS
   ============================================================ */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/Sys/font/goo/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    /* static/ 아래에는 .ttf 만 있다. .otf 는 한 단계 위에 있어서 매번 404 가 났다 */
    src: url('/Sys/font/goo/Noto_Sans_KR/NotoSansKR-Medium.otf') format('opentype'),
         url('/Sys/font/goo/Noto_Sans_KR/static/NotoSansKR-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: 400;
    src: url(/Sys/font/nam/NANUMGOTHIC.eot);
    src: url(/Sys/font/nam/NanumGothic.woff) format('woff2'),
         url(/Sys/font/nam/NanumGothicBold.woff) format('woff'),
         url(/Sys/font/nam/NanumGothicBold.woff) format('truetype');
}

.txthanbod {
    font-family: 'NanumGothic';
    font-weight: bold;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalfadeIn {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}


/* ============================================================
   LAYOUT
   ============================================================ */

.wrap          { min-width: 320px; width: 100%; position: relative; }
.container     { margin: 0 auto; width: 100%; }
.main-container{ position: relative; }
.left          { flex: 0 0 80%; }
.right         { flex: 1; }
#htmlBody      { height: 100vh; }

.main_body_tab1.active,
.main_body_tab2.active,
.main_body_tab3.active { display: block; }

.title { margin-bottom: 20px; }


/* ============================================================
   TOP HEADER
   ============================================================ */

.main_top {
    height: 38px;
    padding: 5px 15px 0 20px;
    background: #494c4f;
}

.extendtopmenu {
    position: fixed;
    top: -5px;
    left: 0;
    z-index: 1000000;
    width: 100%;
    height: 45px;
    background: #494c4f;
    border-bottom: 1px solid #e9e9e9;
}

.top_headbody {
    display: flex;
    justify-content: space-between;
    border: 1px solid #d2d9e1;
    padding: 0;
    height: 40px;
    white-space: nowrap;
    border-left: none;
    

    background: #fff;
    border-bottom: 1px solid #dde2ea;
}

.main_log {
    display: inline-block;
    position: absolute;
    top: 19px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #745359;
    font-weight: bold;
    border: 1px solid #ebebeb;
    width: 190px;
    text-align: center;
    height: 25px;
    background: #eff1ef;
    border-radius: 3px;
    padding: 3px;
}

#selDomain {
    font-weight: bold;
    top: 5px;
    border-radius: 3px;
    position: absolute;
    left: 10px;
    font-size: 12px;
    color: #d1d1d1;
    width: 145px;
    display: inline-block;
    overflow: hidden;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.main_mbutton {
    display: inline-block;
    text-align: right;
    padding-top: 4px;
    padding-right: 14px;
}

.main_subtit_block {
    padding: 3px;
    padding-top: 8px;
    white-space: nowrap;
    border-bottom: 1px solid #d8d8d8 !important;
    background: #fafafa;
}

.main_fram_menu {
    width: 40px;
    float: left;
    overflow: hidden;
    border-left: none;
    text-align: center;
    height: 100vh;
    color: white;
    background: #494C4F;
    padding-top: 40px;
}

.main_fram_tree  { width: 207px; float: left; white-space: nowrap; margin-top: 0; }
.main_fram_content { overflow: hidden; }
.main_tmenu_icon { width: 100%; height: 66px; float: left; padding-top: 0; }

.main_tfrm_tab_title {
    display: inline-block;
    width: 50% !important;
    cursor: pointer;
    border: 1px solid #d1d9e2;
    white-space: normal;
}
.main_tfrm_tab_content { clear: both; width: 100%; }
.main_tfrm_tab_title:focus + .main_tfrm_tab_content { display: block; }
.main_tfrm_tab_title:focus + .main_tfrm_tab_content + .main_tfrm_tab_title { border-bottom-color: blue; }

.main_tabs { justify-content: space-between; padding-top: 9px; display: inline-block; }
.main_tab  { padding: 10px 20px; background-color: lightgray; border: none; cursor: pointer;


}
.tabs      { justify-content: space-between; display: inline-block; }
.tab       { padding: 10px 20px; background-color: lightgray; border: none; cursor: pointer; }


/* ============================================================
   MAIN MENU (DROPDOWN)
   ============================================================ */

.main_menu { display: inline-block; }

.main_menu_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 1000000;
}

.main_menu_dropdown {
    position: relative;
    display: inline-block;
    z-index: 10000;
    width: 100px;
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 0;
}

.main_menu_dropdown:after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background-color: #ccc;
    position: absolute;
    top: 7px;
    right: 0;
}

.main_menu_dropdown:hover { background-color: #5c5c5c; z-index: 1000000; }
.main_menu_dropdown:hover .main_menu_dropdown_content { display: block; z-index: 1000000; }

.main_menu_dropdown_content {
    display: none;
    position: absolute;
    background-color: #413a33;
    min-width: 130px;
    padding: 15px 0;
    z-index: 1000000;
    left: -2px;
    top: 30px;
}

.main_menu_dropdown_content a {
    color: #f3f3f3;
    padding: 0 16px;
    text-decoration: none;
    display: inline-block;
    z-index: 1000000;
    font-size: 12px;
    font-weight: 400;
    font-feature-settings: "liga" on, "calt" on;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.main_menu_dropbtn {
    color: black;
    padding: 0;
    font-size: 13px;
    border: none;
    cursor: pointer;
    z-index: 1000000;
    position: relative;
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: 90px;
    font-weight: bold;
}

.main_menu_dropbtn:hover { background-color: #f1f1f1; z-index: 1000000; }

.main_menu_dropbtn_more::after {
    content: "\25BE";
    position: absolute;
    top: 46%;
    right: 10px;
    transform: translateY(-50%);
}

.main_menu_sub_drop {
    position: relative;
    height: 26px;
    padding-top: 6px;
}

.main_menu_sub_drop > a { width: 100px; font-size: 12px; }
.main_menu_sub_drop:hover { background-color: #cd1b1b; z-index: 1000000; }
.main_menu_sub_drop:hover .main_menu_sub_dropdown { display: block; z-index: 1000000; }

.main_menu_sub_dropdown {
    display: none;
    position: absolute;
    background-color: #413a33;
    width: 87px;
    z-index: 1000000;
    left: 128px;
    padding: 0 0 15px 0;
    top: 0;
}

.main_menu_sub_dropdown a {
    display: block;
    color: #f3f3f3;
    height: 26px;
    padding-top: 6px;
    text-decoration: none;
    z-index: 1000000;
    font-size: 12px;
}

.main_menu_sub_dropdown a:hover { background-color: #cd1b1b; z-index: 1000000; }

.main_menu_sub_dropdown_menu { color: #bda6a6; font-size: 11px; padding: 5px; }

.main_menu_tmenu { color: #d9d9d9 !important; }

.main_menu_menu a {
    font-family: var(--inter-font-family, "Inter"), sans-serif;
    font-weight: 600;
    color: #dbdbdb;
}

.main_menu_select { background: white; color: black; }
.main_menu_select path { fill: #494C4F; }

.main_menu > li:last-child { margin: 0; padding-right: 0; }

.domainlist:hover { background-color: #f1f1f1; z-index: 1000000; }

.separator {
    width: calc(95% - 10px);
    height: 1px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-top: 1px solid #4a4a4a;
    border-bottom: 1px solid #383838;
    margin-top: 8px;
}

.svg-container {
    display: inline-block;
    margin-left: auto;
    padding-left: 3px;
    fill: var(--color-icon-menu, var(--fg-overlay-right-arrow));
    color: var(--color-text-menu, var(--fg-overlay-right));
}

.svg-container path:not([fill="none"]) { fill: #f3f3f3; }

.tmenu_title { position: absolute; display: inline-block; top: 7px; left: 37px; font-size: 12px; }


/* ============================================================
   TABS (PAGE TABS)
   ============================================================ */

.main_pg_tabtop_tab_m {
    color: #727272;
    font-size: 13px;
    font-family: var(--inter-font-family, "Inter"), sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    padding: 5px;
    display: inline-block;
}

.main_pg_tabtop_tab_m path { fill: #2c2c2c; }

.main_pg_tabtop_tab_mtre {
    color: #999595;
    font-size: 13px;
    font-family: var(--inter-font-family, "Inter"), sans-serif;
    font-weight: 600;
    letter-spacing: 0;
}

.top_tree { font-weight: bold; }

.top_tab_m {
    height: 40px;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    color: #000;
}

.tree_tab_select {
   background: #fff;
    color: #4a6fd4;
    border-color: #dde2ea;
    border-bottom: 2px solid #4a6fd4;
    font-weight: 700;
}

.tree_tab_select div { color: #2c2c2c !important; text-shadow: none; }

.edit_tab_select {
    border-bottom: 1px solid green !important;
    border: 1px solid gray;
    border-radius: 3px;
    background: #6495ff;
    color: white !important;
    width: 70px;
}

.edit_tab_select path { fill: #f1f1f1 !important; }

.main_pgtab_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 1000000;
}

.main_pgtab_menu > li {
    margin-top: -15px;
    display: inline-block;
    width: 90px;
    position: relative;
}

.main_pgtab_menu > li:after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background-color: #ccc;
    position: absolute;
    top: 10px;
    right: 0;
}

.main_pgtab_block {
    position: relative;
    display: inline-block;
    z-index: 1000000;
    width: 100px;
}

.main_pgtab_block:hover { background-color: #f1f1f1; z-index: 1000000; }
.main_pgtab > li:last-child { margin: 0; padding-right: 0; }

.textdeep { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #ccc; }


/* ============================================================
   BUTTONS
   ============================================================ */

.gen_button {
    width: 90px;
    height: 30px;
    background: white;
    border: 1px solid #CFD9E3;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.SYS_sbutton {
    border: 1px solid silver;
    border-radius: 3px;
    height: 30px;
    padding: 2px 10px;
    cursor: pointer;
}

.SYS_ebutton,
.SYS_button {
    border: 1px solid silver;
    border-radius: 3px;
    height: 30px;
    min-width: 100px;
    margin-left: 5px;
    cursor: pointer;
}

.SYS_sbutton.add {
    padding: 2px 7px 3px 20px !important;
    vertical-align: middle;
    background-image: url(/cms_inc/img/btnimg/add.png) !important;
    background-repeat: no-repeat;
        background-position: 4px;
}

.save-button,
.delete-button {
    padding: 0 20px;
    background-color: #4a8cf7;
    border: none;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

.save-button path,
.delete-button path { fill: #f1f1f1 !important; }

.side-button {
    padding: 0 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    height: 28px;
    font-weight: bold;
}

.side-button2 {
    padding: 0 20px;
    background-color: #f7f7f7;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    height: 28px;
    font-weight: bold;
}

.savefold-button {
    background-color: #4a8cf7;
    border: none;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

.SYS_UI_BUTTON { cursor: pointer; }

.SYS_UI_BUTTON_B { box-sizing: border-box; padding: 0 8px; }
.SYS_UI_BUTTON_B:hover { background-color: #cecece; }

.play_button {
    width: 90px;
    height: 30px;
    background: white;
    border: 1px solid #CFD9E3;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.play_button svg           { position: absolute; left: 15px; top: 7px; }
.play_button svg path      { fill: #bbb6b6; }
.play_button:hover svg path{ fill: #4a8cf7; }

.play_button div {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 43px;
    font-size: 13px;
    font-weight: bold;
}

.rowbutton {
    width: 35px;
    border: 1px solid #bbbbbb;
    border-radius: 3px 5px;
    padding: 5px 2px 0 3px;
    background: #e7e7e7;
    cursor: pointer;
}

.sql_optbtn {
    border: 1px solid #acacac;
    border-radius: 4px;
    background-color: white;
    text-align: center;
    display: inline-block;
}

.sortbtn { display: inline-block; padding-left: 10px; }

.popmenu_svg rect { fill: #808080; }


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

input[type="time"],
input[type="text"],
select,
textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

input::placeholder    { color: rgba(0, 0, 0, 0.3); }
textarea::placeholder { color: rgba(0, 0, 0, 0.3); }

.toggle { align-items: center; justify-content: flex-start; width: 100%; }
.toggle input[type="radio"],
.toggle input[type="checkbox"] { display: none; }
.toggle label { padding: 5px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.toggle label:not(:last-child) { margin-right: 5px; }

/* Native checkbox (hidden + span) */
input[type="checkbox"] {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 400;
    height: 50px;
    display: none;
}

input[type="checkbox"] + span {
    margin: 0;
    padding-left: 30px;
    display: inline-block;
    background: url(/Sys/img/ctrl/bg_check_off.png) 0 0 no-repeat;
    height: 20px;
    box-sizing: border-box;
}

input[type="checkbox"]:checked + span {
    background: url(/Sys/img/ctrl/bg_check_on.png) 0 0 no-repeat;
}

/* sys_input_type checkbox / radio */
input[sys_input_type="checkbox"],
input[sys_input_type="radio"] {
    left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0;
}

input[sys_input_type="checkbox"] + span {
    margin: 0;
    padding-left: 30px;
    display: inline-block;
    background: url('/app/Sys/img/ctrl/bg_check_off.png') 0 0 no-repeat;
    height: 20px;
    box-sizing: border-box;
    transform: translate(-10%, 5px);
}

input[sys_input_type="checkbox"] + span[blank="true"] { padding-left: 20px; }

input[sys_input_type="checkbox"]:checked + span {
    background: url('/app/Sys/img/ctrl/bg_check_on.png') 0 0 no-repeat;
}

input[sys_input_type="checkbox"] + span.btn {
    margin: 0;
    padding: 3px 30px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    height: 20px;
    box-sizing: border-box;
}

input[sys_input_type="radio"] + span {
    margin: 0;
    padding-left: 30px;
    padding-right: 14px;
    display: inline-block;
    height: 20px;
    box-sizing: border-box;
    background: url('/app/Sys/img/btn_radio_n.png') 0 0 no-repeat;
}

input[sys_input_type="radio"]:checked + span {
    background: url('/app/Sys/img/btn_radio_s.png') 0 0 no-repeat;
}

/* Toggle switch (check-toggle / input-toggle) */
.check-toggle input[type="checkbox"],
.input-toggle input[type="checkbox"] { display: none; }

.check-toggle label,
.input-toggle label {
    display: inline-block;
    width: 35px;
    height: 20px;
    background-color: #ccc;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
}

.check-toggle label:before,
.input-toggle label:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.check-toggle input[type="checkbox"]:checked + label,
.input-toggle input[type="checkbox"]:checked + label { background-color: #5cb85c; }

.check-toggle input[type="checkbox"]:checked + label:before,
.input-toggle input[type="checkbox"]:checked + label:before { transform: translateX(14px); }

/* Custom select / downfill */
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: transparent;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA3klEQVR4nO3WMQrCQBCF4Z+AWNkJgpWFB7DQ0iqVrTZ6B/USxkOk0it4AIONoOAZBAUrsRNBFCOBFZbBTjKRJQ+2/phldnYgz58lAmJztkBJC95ZcHIWgKcB14CzwAOU0gbuFvwCBlr4SFR9A1paeCjwE1DVgAvASuBroKiBl4G9wOcopQFcBZ70gEq6prs/8BPoaOGBqPoC1DVgz0yyWIxVd+FpFlfdE831APwsntMwbbQCHAU6c3ZkhgI9mBtINeMv32IzbdQ3XWsvAv0sVp8JLi97SwvdaK63efg1bx9lay4TR1IYAAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
    outline: none;
    padding-right: 30px !important;
    text-align: right;
}

.custom-select:focus { outline: none; }
.custom-select option:checked { background-color: #e0e0e0; }

.downfill {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA3klEQVR4nO3WMQrCQBCF4Z+AWNkJgpWFB7DQ0iqVrTZ6B/USxkOk0it4AIONoOAZBAUrsRNBFCOBFZbBTjKRJQ+2/phldnYgz58lAmJztkBJC95ZcHIWgKcB14CzwAOU0gbuFvwCBlr4SFR9A1paeCjwE1DVgAvASuBroKiBl4G9wOcopQFcBZ70gEq6prs/8BPoaOGBqPoC1DVgz0yyWIxVd+FpFlfdE831APwsntMwbbQCHAU6c3ZkhgI9mBtINeMv32IzbdQ3XWsvAv0sVp8JLi97SwvdaK63efg1bx9lay4TR1IYAAAAAElFTkSuQmCC");
    background-position: right center;
    background-size: 12px;
    background-repeat: no-repeat;
    padding-right: 30px !important;
    text-align: right;
    width: 100%;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}

/* Combo select */
.sys_combo_select {
    display: inline-block;
    position: static;
    width: 110px;
}

.sys_combo_checkbox { display: none; }

.sys_combo_select_label {
    display: block;
    padding: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
    height: 19px;
    padding-left: 0;
}

.sys_combo_select_label::after {
    content: '\25BE';
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}

.sys_combo_dropdown_content {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
    margin-top: -1px;
    width: 110px;
}

.sys_combo_checkbox:checked + .sys_combo_select_label + .sys_combo_dropdown_content { display: block; }

.sys_combo_option { padding: 5px; cursor: pointer; }
.sys_combo_option:hover { background-color: #f9f9f9; }

.searchbox {
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-image: url(/Sys/btnimg/search.gif);
    width: 100% !important;
}

.searchpop {
    background-repeat: no-repeat;
    background-image: url("/Sys/btnimg/search.gif");
    background-position: calc(100% - 8px) center;
}

.input-container { position: relative; width: 200px; }
.input-container input[type="text"] { width: 100%; padding-right: 30px; }
.input-container .clear-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

._sys_next_trap { display: inline-block; vertical-align: middle; margin-right: 5px !important; }
.__sys_label    { padding-right: 5px; }


/* ============================================================
   MODAL
   ============================================================ */

.Sys_Modeal_MsgView_title,
.Sys_Modeal_Msg_title {
    background: linear-gradient(#72757A, #72757A) !important;
    border-radius: 5px 5px 0 0;
}

.__sys_proj_modal { animation: fadeIn 0.2s forwards; }

.sys_modal-bb {
    background: rgba(0, 0, 0, 0.5) !important;
    animation: modalfadeIn 0.2s ease-in-out;
}

.sys_modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    outline: 0;
}

#_opprogress { width: 310px; }
#_opprogress .sys_modal-content { width: 150px !important; min-width: 150px !important; margin: auto; }

.sys_modal-content_back,
.sys_modal-_d97 {
    position: relative;
    background-color: #fff;
    border: 1px solid #797979;
    border-radius: 5px;
    background-clip: padding-box;
    outline: 0;
}

.popmodal-content,
.b-content {
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 1px;
    background-clip: padding-box;
    outline: 0;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.sys_modal-header {
    background-color: white;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 10px !important;
    border-bottom: 1px solid #e5e5e5;
}

.sys_modal-body {
    padding: 0 5px 10px 5px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sys_modal-footer { padding-bottom: 20px; }
.sys_modal-footer > span > span { border: 1px solid #acacac; border-radius: 4px; }
.sys_modal-footer > span > span:hover { background: #acacac; }

.sys_modal-header .__sys_close {
    float: right;
    font-weight: 700;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    margin: 2px 15px 0 0;
    line-height: 27px;
    border: 0 !important;
    color: #fff;
    font-size: 20px !important;
    opacity: 1;
    cursor: pointer;
    width: 16px;
    position: absolute;
    right: 10px;
    top: 11px;
}

.sys_modal-header .__sys_close > path       { stroke: #aeaeae; }
.sys_modal-header .__sys_close:hover > path { stroke: #3d3c3c; }
.sys_modal-header .close > path             { fill: black; }

.__sys_proj_modal .sys_modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 40px;
    padding: 0 !important;
    background: transparent;
    box-sizing: border-box;
    border-bottom: none;
    position: relative;
}

.__sys_proj_modal .sys_modal-header h4 {
    padding: 0 5px 0 15px;
    line-height: 45px;
    font-size: 12px !important;
    font-weight: 500;
    color: #6d6c6c;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 10px 10px 0 0;
}

.__sys_proj_modal .sys_modal-header .__sys_close span { font-size: 32px; color: #979797; }

.__sys_proj_modal .sys_modal-title.bluelink { background: url(../img/logo_bluelink.png) 0 0 no-repeat; padding: 3px 0 0 115px; }

.__sys_proj_modal .sys_modal-dialog { width: 800px; }
.__sys_proj_modal .sys_modal-dialog.__sys_proj_modal .sys_modal-alert { width: 500px !important; }
.__sys_proj_modal .sys_modal-dialog.__sys_proj_modal .sys_modal-alert.__sys_proj_modal .sys_modal-dialog-top { width: 500px !important; top: 150px; }
.__sys_proj_modal .sys_modal-dialog.__sys_proj_modal .sys_modal-md { width: 600px !important; }
.__sys_proj_modal .sys_modal-body.y-scroll { overflow-y: auto; max-height: 600px; }


/* ============================================================
   POP / LAYER POPUP
   ============================================================ */

.pop-box {
    position: absolute;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: height 1s;
    z-index: 10;
}

.pop-box.hidden  { opacity: 0; transform: translateY(-100%); }
.pop-box.growing { transform: scale(0); }
.pop-box.show    { opacity: 1; transform: translateY(0) scale(1); }

.pop-close-button {
    font-size: 16px;
    color: #c2c2c2;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
}

.pop-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    column-gap: 10px;
}

.layer-popup {
    display: block;
    position: fixed;
    top: 0; right: 0; left: 0; bottom: 0;
    z-index: 1000;
    overflow: hidden;
    transform: translateX(100%);
    transition: 0.6s ease-in-out;
}

.layer-popup.open { transform: translateX(0%); transition: 0.6s; }

.layer-popup .layer-popup-area {
    position: relative;
    height: 100%;
    min-height: 100%;
    background: white;
}

.layer-popup-area .btn-popup-close,
.layer-all-menu-area .btn-all-menu-close {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 30px;
    padding: 10px;
    font-size: 0;
    text-indent: -9999em;
    background: url(/app/img/btn_all_menu_close.svg) center no-repeat;
    background-size: 24px;
}

.layer-all-menu .layer-all-menu-area {
    position: relative;
    height: 100%;
    min-height: 100%;
    background: #F5F5F5;
}

.layer-all-menu-area .all-menu-head {
    position: relative;
    height: 328px;
    padding: 70px 30px 35px;
    border-bottom: none;
}

/* Pop menu dropdown */
.pop_menu_dropdown {
    position: relative;
    display: inline-block;
    z-index: 10000;
    width: 50px;
    padding: 5px;
}

.pop_menu_dropbtn {
    color: black;
    padding: 0;
    font-size: 14px;
    border: none;
    cursor: pointer;
    z-index: 1000000;
    position: relative;
    display: block;
    text-align: left;
    box-sizing: border-box;
}

.pop_menu_dropbtn_more::after {
    content: "\25BE";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.pop_menu_dropdown_content {
    display: none;
    position: absolute;
    background-color: #464646;
    min-width: 140px;
    z-index: 1000000;
    left: -2px;
    padding: 10px 0;
}

.pop_menu_dropdown:hover .pop_menu_dropdown_content { display: block; z-index: 1000000; }
.pop_menu_sub_drop:hover .pop_menu_sub_dropdown     { display: block; z-index: 1000000; }

.pop_menu_dropdown_content a {
    padding: 7px 15px;
    text-decoration: none;
    display: block;
    color: #dedbdb;
    font-weight: 600;
    font-size: 12px;
    z-index: 1000000;
}

.pop_menu_dropdown_content a:hover { background-color: #cd1b1b; z-index: 1000000; }

/* Pop head containers */
.pop_head_top_container {
    height: 50px;
    border: 1px solid #ccc;
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0; left: 0;
    width: 100%;
    z-index: 10;
    background: white;
    padding: 3px 10px;
}

.pop_head_top_left  { display: flex; position: relative; width: 500px; }
.pop_head_top_right { display: flex; }

.pop_head_top_textbox { width: 200px; padding: 5px; margin-right: 10px; }

.pop_head_top_button {
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.pop_top_head_fix_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.pop_top_head_fix_title   { font-size: 18px; }
.pop_top_head_fix_buttons { display: flex; }
.pop_top_head_fix_button  { margin-left: 10px; }

/* Full-screen popup */
.popup-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popup-box {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 99vh;
}

.popup-box p { margin: 0; margin-bottom: 20px; font-size: 20px; }

.button-container { display: flex; justify-content: center; }
.button-container button { font-size: 18px; cursor: pointer; margin-left: 10px; }

.right-arrow   { direction: rtl; unicode-bidi: bidi-override; }
.right-triangle{ transform: rotate(45deg); display: inline-block; }


/* ============================================================
   TREE
   ============================================================ */

.SYS__TREE_DIV {
    margin: 0; padding: 0;
    display: block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.SYS__TREE_DIV li {
    padding: 5px 0 0 16px;
    background: url(/Sys/images/tree/treedot.gif) repeat-y 23px 0;
    display: block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #5f5f5f;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
}

.SYS__TREE_DIV li > span {
    font-size: 12px;
    margin-left: 7px !important;
    margin-top: -2px;
    position: absolute;
    top: 7px;
}

.SYS__TREE_DIV li > span:hover { background: #ececec; }

.sys_tree      { display: inline-block; height: 20px; text-align: right; }
.sys_tree_span { display: inline-block; height: 20px; }

.__sys_treedoc   { background: none; background-position: right; }
.__sys_treelnot,
.__sys_treelist  { background-position: right; }

.systreerename {
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 11px;
    height: 22px;
    box-sizing: border-box;
}

.systreeinrename {
    position: absolute;
    top: 5px;
    left: 55px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 11px;
    height: 22px;
    box-sizing: border-box;
}

.tree_opened_container { padding: 10px; margin-bottom: 10px; position: relative; }

.tree_opened_title {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
}

.tree_opened_close {
    float: right;
    cursor: pointer;
    color: #999;
    font-size: 19px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 9px;
}

.tree_opened_content { clear: both; }

.tree_opened_content > ul > li {
    font-size: 12px;
    line-height: 25px;
    padding: 3px 3px 3px 12px;
}

.tree_opened_content > ul > li:hover { background-color: #e7e7e7; }

.tree_opened_clowwse {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 2px;
    text-align: center;
    width: 100%;
}

/* SQL Tree */
#sqlTree,
#sqlTreeOpened {
    border: 1px solid #d2d9e1;
    height: 90vh !important;
    border-top: none;
    scrollbar-width: thin;
}

#sqlTreeOpened { display: none; }

#sqlTree::-webkit-scrollbar       { width: 12px; background-color: #d2d9e1; }
#sqlTree::-webkit-scrollbar-thumb { background-color: #808080; border-radius: 6px; }

/* Web/Mob Trees */
#webTree,
#webTreeOpened,
#mobTree,
#mobTreeOpened {
    border: 1px solid #d2d9e1;
    height: 90vh !important;
    border-top: none;
}

#webTree        { scrollbar-width: thin; }
#webTreeOpened,
#mobTreeOpened  { scrollbar-width: thin; display: none; }

#webTree::-webkit-scrollbar       { width: 12px; background-color: #d2d9e1; }
#webTree::-webkit-scrollbar-thumb { background-color: #808080; border-radius: 6px; }

/* File Trees */
#webFTree,
#webFTreeOpened {
    border: 1px solid #d2d9e1;
    height: 90vh !important;
    border-top: none;
    scrollbar-width: thin;
}

#webFTreeOpened { display: none; }

#webFTree::-webkit-scrollbar       { width: 12px; background-color: #d2d9e1; }
#webFTree::-webkit-scrollbar-thumb { background-color: #808080; border-radius: 6px; }

#mobFTree {
    border: 1px solid #d2d9e1;
    height: 90vh !important;
    border-top: none;
}

#mobFTreeOpened {
    border: 1px solid #d2d9e1;
    height: 90vh !important;
    border-top: none;
    scrollbar-width: thin;
    display: none;
}


/* ============================================================
   PANEL / TABLE
   ============================================================ */

.SYS_scrollhead {
    padding-right: 17px !important;
    background-color: #f6f6f6;
}

.SYS_scrollbody {
    overflow-y: scroll;
    position: relative;
    overflow-x: hidden;
    border: 1px solid #d5cfc8;
    border-top: none;
}

.SYS__panel_scrollhead {
    border-top: 2px solid #565656;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

table.SYS__panel_scrollhead thead {
    width: 100%;
    line-height: 140%;
    border-collapse: separate;
}

table.SYS__panel_scrollhead th {
    text-decoration: none;
    border-bottom: 1px solid #c6c6c6;
    border-right: 1px solid #c6c6c6;
    border-top: 1px solid #c6c6c6;
    font-size: 12px;
    line-height: 15px;
    background: linear-gradient(#f3f4f6, #f6f6f6);
    padding: 5px;
    color: #5f5f5f;
    height: 45px;
    vertical-align: middle;
    font-weight: bold;
}

.SYS__panel_scrollhead tr:first-child { border-left: 1px solid #cbcbcb; }

.SYS__panel_scrollbody {
    table-layout: fixed;
    margin: 0;
    outline-style: none;
    border-collapse: collapse;
}

.SYS__panel_scrollbody .sys_listview_empty { border: none !important; }
.SYS__panel_scrollbody thead { border-top: 2px solid #4f97d2; }

.SYS__panel_scrollbody td {
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
    border-bottom: 1px dashed #d1d1d1;
    height: 40px;
    vertical-align: middle;
}

.SYS__panel_scrollbody tbody th {
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    height: 22px;
    padding: 5px;
    border-bottom: 1px dashed #d1d1d1;
}

tr.sys_rowevent:hover { background-color: #f1f1da; cursor: pointer; }
tr.sys_rowevent td    { background-color: transparent !important; }

.selitem-background  { background-color: #f0f0f0; }
.List_rowclickcss td { background-color: #fdfafa; }


/* ============================================================
   SQL EDITOR
   ============================================================ */

.txttitle {
    overflow-x: hidden;
    overflow-y: visible;
    line-height: 15px;
}

.txttitle::-webkit-scrollbar { display: none; }

#sqlTree > span { width: 204px; }

.sqlptyli       { line-height: 17px; }
.sqlptyli:hover { background: #f3f2f2; }

.sys_sql_top_tit {
    height: 39px;
    padding: 0 5px 30px 5px;
    font-weight: bold;
}

.sql_top_head {
    padding: 2px 10px 5px 5px;
    height: 38px;
    white-space: nowrap;
    display: flex;
    background: #f3f2f2;
}

.sql_body_head {
    padding: 4px 10px 5px 2px;
    height: 40px;
    white-space: nowrap;
    width: 100%;
    background: #f3f2f2;
        border: 1px solid #ebe4e4;
    border-top: none;
    
}

.sql_top_param_head {
    padding: 5px 10px 5px 5px;
    height: 12px;
    white-space: nowrap;
    display: flex;
}

.sql_param_height td { height: 24px !important; }

.sql_main_subtit_conb {
    display: inline-block;
    padding-right: 15px;
    vertical-align: middle;
    line-height: 11px;
}

.sql_apply_btn {
    padding: 0;
    border-radius: 2px;
    top: 14px;
    right: 60px;
    font-size: 18px;
    position: absolute;
    cursor: pointer;
}

.sql_head_body_container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 100%;
    position: relative;
}

.sql_head_body_left { position: relative; height: 90%; }

.sql_head_leftbody { width: 350px; height: 100%; background: white; }

.sql_head_body_middle {
    display: flex;
    position: relative;
    overflow: hidden;
    width: calc(100% - 1000px);
    height: 85vh;
}

.sql_head_body_allright {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 85vh;
}

.sql_head_body_right {
    display: flex;
    position: relative;
    overflow: hidden;
    width: 850px;
    height: 85vh;
}

.sql_head_body_float {
    position: absolute;
    top: 40px;
    right: -700px;
    overflow: hidden;
    width: 700px;
    height: 85vh;
    background-color: white;
    transition: all 0.5s ease;
    z-index: 100;
}

.sys_sql_param_fix {
    display: block;
    right: 0;
    transition: all 0.5s ease;
    width: 769px;
    background: #f0f0f0;
    padding: 0 0 0 10px;
}

.sys_sql_edit_body,
.sys_sql_edit_body > div {
    height: 85vh !important;
    width: 100% !important;
}

.param_right_top_head { height: 40px; }
.sql_td { height: 30px; padding: 0 2px 0 2px !important; }

.CodeMirror-line { padding-left: 17px !important; }


/* ============================================================
   SUBTIT (HEADER INFO BAR)
   ============================================================ */

.main_subtit_con { font-size: small; padding: 0 20px 5px 30px; }

.main_subtit_conb { display: inline-block; padding-right: 15px; }

.main_subtit_con_tit {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 700;
    color: #9099ab !important;
    line-height: 1 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.main_subtit_con_input {
    display: inline-block;
    font-size: 14px;
    
    
    padding-left: 3px;
    line-height: 14px;
    overflow: hidden;
    vertical-align: middle;
}


/* ============================================================
   PAGE MAKER / CREATE MAKER
   ============================================================ */

.pgmaker_button_container,
.pgcreatemaker_button_container { text-align: right; }

.pgmaker_frame_topcontainer,
.pgcreatemaker_frame_topcontainer { display: flex; border-bottom: 1px solid #cbcbcb; }

.pgmaker_frame_topleft,
.pgcreatemaker_frame_topleft { width: 300px; padding: 10px; }

.pgmaker_frame_topright,
.pgcreatemaker_frame_topright { flex-grow: 1; text-align: right; }

.pgmaker_frame_container,
.pgcreatemaker_frame_container { display: flex; height: 500px; }

.pgmaker_frame_left,
.pgcreatemaker_frame_left { width: 200px; border-right: 1px solid #cbcbcb; padding: 10px; padding-top: 20px; }

.pgmaker_frame_right,
.pgcreatemaker_frame_right { flex-grow: 1; padding-top: 20px; overflow: auto; height: 90vh; }

.pgmaker_frame_right.leftcol,
.pgcreatemaker_frame_right.leftcol { padding-left: 20px; }

.pgmaker_listbox_container,
.pgcreatemaker_listbox_container {
    width: 100%;
    height: 40px;
    border: 1px solid #cecece;
    position: relative;
    margin-top: 5px;
    box-sizing: border-box;
    border-radius: 5px;
}

.pgmaker_listbox_name,
.pgcreatemaker_listbox_name { position: absolute; top: 10px; left: 10px; font-size: 14px; }

.pgmaker_listbox_type,
.pgcreatemaker_listbox_type { position: absolute; bottom: 10px; left: 10px; font-size: 12px; color: gray; }

.pgmaker_input_container,
.pgcreatemaker_input_container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 17px;
    flex-direction: column;
    padding-right: 10px;
}

.pgmaker_input_textbox,
.pgcreatemaker_input_textbox {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 30px;
    width: 100%;
}

.pgmaker_input_label,
.pgcreatemaker_input_label {
    width: 100px;
    padding-bottom: 7px;
    margin-right: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.pgmaker_pgitem_create_select    { background-color: #e2e3d2; }
.pgcreatemaker_pgitem_create_select { background-color: #e8eacd; }

/* SQL Frame */
.pgmaker_sqlframe_container { display: flex; height: 500px; }

.pgmaker_sqlframe_left {
    border-right: 1px solid #cbcbcb;
    padding: 10px;
    padding-top: 20px;
    height: 100vh;
}

.pgmaker_sqlframe_right           { flex-grow: 1; padding-top: 20px; padding-left: 20px; }
.pgmaker_sqlframe_right.leftcol   { padding-left: 20px; }

.pgmaker_frame_topcrtfoldleft { width: 500px; padding: 10px; font-size: 16px; padding-left: 3px; }

.tdcontainer { padding-bottom: 10px; }
.tdhead      { display: inline-block; padding: 10px; }
.tdbody      { display: inline-block; padding: 10px; }

/* pgcreatemaker only */
.noname { color: #b8b8b8; }

.program_name_msg     { padding: 0; color: red; display: block; }
.program_name_msg_boc { display: block; height: 10px; }

.imgcardbodyview { width: 600px; height: 400px; margin-top: 25px; }

.pg_temp_container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 400px;
    width: 80vh;
}

.pg_temp_content {
    width: 600px;
    height: 400px;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 10px;
}


/* ============================================================
   SUBMENU (NESTED MENU ITEMS)
   ============================================================ */

.menu-item-with-submenu { position: relative; }

.main-menu-item { display: block; padding: 8px 12px; text-decoration: none; color: #333; }

.submenu-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #666; }

.submenu {
    display: none;
    position: absolute;
    left: 100%; top: 0;
    background: #464646;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    z-index: 1000;
}

.main-menu-item:hover + .submenu,
.submenu:hover { display: block; }

.submenu-item { display: block; padding: 6px 12px; text-decoration: none; color: #333; border-bottom: 1px solid #eee; }
.submenu-item:hover { background-color: #f5f5f5; }
.submenu-item:last-child { border-bottom: none; }

.toggle-button .double-arrow { font-size: 12px; font-weight: bold; color: white; line-height: 1; }


/* ============================================================
   MG MAIN (MANAGEMENT PAGE)
   ============================================================ */

.mg_main_container { display: flex; justify-content: space-around; padding-bottom: 0; }

.mg_main_section_title       { font-size: 24px; margin-bottom: 10px; }
.mg_main_section_subtitle    { font-size: 18px; margin-top: 20px; }
.mg_main_body_section        { width: 40%; }
.mg_main_section_description { font-size: 16px; margin-bottom: 20px; }

.mg_main_section_list    { list-style: none; padding-left: 0; }
.mg_main_section_list li { margin-bottom: 5px; }

.mg_main_section_link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff !important;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.mg_main_section_link:hover { background-color: #0056b3; text-decoration: underline; }


/* ============================================================
   TEMP COMPONENTS
   ============================================================ */

.temp_frame_container { display: flex; flex-direction: column; height: 500px; overflow: hidden; }
.temp_frame_top    { height: 60px; }
.temp_frame_middle { height: 50px; }
.temp_frame_bottom { flex-grow: 1; }

.temp_tab_container {
    display: flex;
    justify-content: space-between;
    background-color: #f0f0f0;
    padding: 10px;
}

.temp_tab_item { padding: 10px 20px; border-radius: 5px 5px 0 0; cursor: pointer; font-weight: bold; }
.temp_tab_item.active { background-color: #007bff; color: #fff; }

.temp_tab_content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.temp_tab_content.active { display: block; }

.temp_card_container { overflow: hidden; width: 1040px; white-space: nowrap; padding-top: 50px; }

.temp_card {
    width: 335px;
    height: 385px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    margin-left: 10px;
    display: inline-block;
}

.temp_card_title { font-size: 14px; margin-bottom: 5px; }

.temp_card_text {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    color: #6c6c6c;
    background: #c2c1c1;
    text-align: center;
    font-weight: bold;
    max-width: 170px;
    margin: auto;
    margin-top: -60px;
    overflow: hidden;
    height: 30px;
    position: relative;
}

.temp_card_button {
    position: absolute; right: 10px; bottom: 10px;
    background-color: #007bff; color: #fff;
    padding: 5px 10px; border: none; cursor: pointer;
}

.temp_card_buttonview {
    position: absolute; left: 10px; bottom: 10px;
    background-color: #007bff; color: #fff;
    padding: 5px 10px; border: none; cursor: pointer;
}

.temp_sample_box {
    width: 20px; height: 20px;
    background-color: #f7fbff;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    border: 1px solid #dddddd;
    border-radius: 10px;
}

.temp_sample_box.active {
    width: 603px; height: 603px;
    top: 65%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.temp_sample_close { position: absolute; top: 5px; right: 10px; cursor: pointer; color: #3e3c3c; font-size: 16px; }

.imgcard     { width: 100%; height: 100%; cursor: pointer; }
.imgcardview { width: 100%; height: 100%; margin-top: 25px; cursor: pointer; }


/* ============================================================
   MISC
   ============================================================ */

.centerrtitle {
    text-align: center;
    font-weight: bold;
    display: block;
    font-size: 20px;
    min-height: 130px;
    padding: 20px 0 0 20px;
}

/* ⚠️ headtitle 는 두 군데에서 다른 스타일로 정의됨. 필요에 따라 조정 필요 */
.headtitle {
    text-align: center;
    display: block;
    height: 30px;
    padding-left: 30px;
    font-size: 20px;
    padding-bottom: 30px;
}

.message_contoner { padding: 0 20px 10px; height: 170px; }

.div_messbox { font-size: 14px; line-height: 40px; font-weight: 600; }

.textdeep { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #ccc; }

.Sys_dock { position: relative; }

.ver_center { padding-top: 20px; }

.createfoldtitle { font-size: 16px; font-weight: bold; }

.Sys_dock { position: relative; }




/* ── btn-change ── */
.btn-change {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #7b8ec8;
    background: #eef1fb;
    border: 1px solid #c4cce8;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-change:hover {
    background: #dde4f5;
    border-color: #a0aed8;
    color: #5468b8;
}

.btn-change:active {
    background: #cdd6ef;
    border-color: #8898c8;
}



/* ── btn-play ── */
.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #5fa87a;
    background: #eef7f2;
    border: 1px solid #bde0cc;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-play:hover {
    background: #daf0e5;
    border-color: #8ecfaa;
    color: #3d8f5e;
}

.btn-play:active {
    background: #c8e8d8;
    border-color: #6ab890;
}




/* ============================================================
   sql_editor_add.css  — 추가 스타일만 (기존 CSS 위에 로드)
   ============================================================ */




   /* ── 목록 헤더 (Function Name / Function / No 등) ── */

.SYS__panel_scrollhead th {
    height: 28px !important;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #7a8299;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
    border-bottom: 1px solid #d8dce6 !important;
    border-right: 1px solid #e2e5ec;
    border-top: none;
    vertical-align: middle;
}

/* 정렬 클릭 가능한 th 내부 div */
.SYS__panel_scrollhead th > div {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    height: 100%;
}

.SYS__panel_scrollhead th > div:hover { color: #5468b8; }

/* sortbtn (▲▼ 텍스트) */
.SYS__panel_scrollhead .sortbtn {
    display: inline-flex;
    align-items: center;
    color: #c0c6d4;
    font-size: 9px;
    transition: color 0.12s;
}

.SYS__panel_scrollhead th > div:hover .sortbtn { color: #7b8ec8; }



/* ── btn-function ── */
.btn-function {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #8a96a8;
    background: #f2f3f5;
    border: 1px solid #d4d8e0;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-function:hover {
    background: #e8eaee;
    border-color: #b0b8c8;
    color: #5a6275;
}

.btn-function:active {
    background: #dde0e6;
    border-color: #9aa4b8;
}

/* ── btn-add-sql ── */
.btn-add-sql {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 18px;
    font-size: 11px;
    font-weight: 600;
    color: #7b8ec8;
    background: #eef1fb;
    border: 1px solid #c4cce8;
    border-radius: 4px;
    cursor: pointer;
     
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-add-sql:hover {
    background: #dde4f5;
    border-color: #a0aed8;
    color: #5468b8;
}

.btn-add-sql:active {
    background: #cdd6ef;
    border-color: #8898c8;
}

.btn-add-sql svg path { fill: currentColor; }




/* ── info-popup ── */

.info-popup {
    width: 300px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

/* 헤더 */
.info-popup__header {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: #f2f4f7;
    border-bottom: 1px solid #dde2ea;
}

.info-popup__title {
    font-size: 13px;
    font-weight: 700;
    color: #2c3241;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 바디 */
.info-popup__body {
    padding: 8px 0;
}

/* 각 행 */
.info-popup__row {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    gap: 10px;
}

.info-popup__row:hover {
    background: #f8f9fb;
}

.info-popup__row--toggle {
    justify-content: space-between;
}

/* 라벨 */
.info-popup__label {
    font-size: 11px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 110px;
}

.info-popup__label em {
    color: #e05252;
    font-style: normal;
    margin-left: 2px;
}

/* 값 텍스트 */
.info-popup__value {
    font-size: 12px;
    font-weight: 600;
    color: #2c3241;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-popup__value--code {
    font-family: 'Consolas', 'Courier New', monospace;
    color: #4a6fd4;
    font-size: 12px;
}

/* 에러 메시지 */
.info-popup__msg {
    font-size: 10px;
    color: #e05252;
    margin-left: 4px;
}

/* 텍스트 입력 */
.info-popup__input {
    flex: 1;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    transition: border-color 0.12s;
}

.info-popup__input:focus {
    border-color: #7b8ec8;
    background: #fff;
    outline: none;
}

/* 구분선 */
.info-popup__divider {
    height: 1px;
    background: #edf0f4;
    margin: 4px 16px;
}

/* ── domain-popup ── */

.domain-popup {
    width: 100%;
    background: #fff;
    overflow: hidden;
}

/* 헤더 */
.domain-popup__head {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    background: #f2f4f7;
    border-bottom: 1px solid #dde2ea;
    position: sticky;
    top: 0;
    z-index: 1;
}

.domain-popup__head .domain-popup__col {
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 바디 */
.domain-popup__body {
    overflow-y: auto;
    max-height: calc(100vh - 80px);
}

/* 행 */
.domain-popup__row {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    transition: background 0.1s;
}

.domain-popup__row:hover {
    background: #f0f4fb;
}

.domain-popup__row:hover .domain-popup__col--name {
    color: #4a6fd4;
}

.domain-popup__row:last-child {
    border-bottom: none;
}

/* 컬럼 공통 */
.domain-popup__col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #2c3241;
}

/* 컬럼 너비 */
.domain-popup__col--name {
    flex: 0 0 160px;
    font-weight: 600;
}

.domain-popup__col--host {
    flex: 1;
    color: #5a6275;
    font-size: 11px;
    font-family: 'Consolas', 'Courier New', monospace;
    padding-left: 12px;
}

.domain-popup__col--seq {
    flex: 0 0 60px;
    text-align: right;
    color: #9099ab;
    font-size: 11px;
}



/* ── db-popup ── */

.db-popup {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

/* 바디: 좌우 분할 */
.db-popup__body {
    display: flex;
    min-height: 300px;
}

/* 좌측 목록 */
.db-popup__left {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #edf0f4;
}

/* 목록 테이블 헤더 재정의 (높이 축소) */
.db-popup__left .SYS__panel_table thead th {
    height: 28px !important;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #f5f6f8 0%, #eef0f3 100%);
    border-bottom: 1px solid #dde2ea;
    border-right: 1px solid #e8ecf2;
    vertical-align: middle;
}

/* 목록 행 */
.db-popup__left .SYS__panel_table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.db-popup__left .SYS__panel_table tbody tr:hover td {
    background: #f0f4fb !important;
}

.db-popup__left .SYS__panel_table tbody td {
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
    color: #2c3241;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.db-popup__host span {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: #5a6275;
}

/* 선택된 행 */
.db-popup__left .List_rowclickcss td {
    background-color: #e6ecf7 !important;
}

.db-popup__left .List_rowclickcss td span {
    color: #3548a8;
    font-weight: 600;
}

/* 페이징 */
.db-popup__paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid #edf0f4;
    margin-top: auto;
}

.db-popup__paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    font-size: 11px;
    color: #7a8299;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.db-popup__paging a:hover {
    background: #eef1fb;
    color: #4a6fd4;
}

/* 수직 구분선 */
.db-popup__divider {
    width: 1px;
    background: #edf0f4;
    flex-shrink: 0;
}

/* 우측 폼 */
.db-popup__right {
    flex: 1;
    padding: 16px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 폼 행 */
.db-form__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

/* 라벨 */
.db-form__label {
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex: 0 0 90px;
}

/* 값 텍스트 (Domain 표시) */
.db-form__value {
    font-size: 12px;
    font-weight: 600;
    color: #4a6fd4;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* 입력창 */
.db-form__input {
    flex: 1;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    transition: border-color 0.12s, background 0.12s;
    width: 100%;
}

.db-form__input:focus {
    border-color: #7b8ec8;
    background: #fff;
    outline: none;
}

.db-form__input::placeholder {
    color: #c0c6d4;
}

/* 셀렉트 */
.db-form__select {
    flex: 1;
    height: 26px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    cursor: pointer;
    transition: border-color 0.12s;
    width: 100%;
}

.db-form__select:focus {
    border-color: #7b8ec8;
    outline: none;
}

/* 저장 버튼 영역 */
.db-popup__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #edf0f4;
}


/* ── domain-search-bar ── */

.domain-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #f8f9fb;
    border-bottom: 1px solid #dde2ea;
}

.domain-search-bar__select {
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #fff;
    color: #2c3241;
    cursor: pointer;
    flex: 0 0 240px;
    transition: border-color 0.12s;
}

.domain-search-bar__select:focus {
    border-color: #7b8ec8;
    outline: none;
}

.domain-search-bar__input {
    height: 26px;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    transition: border-color 0.12s, background 0.12s;
}

.domain-search-bar__input:focus {
    border-color: #7b8ec8;
    background: #fff;
    outline: none;
}

.domain-search-bar__input::placeholder {
    color: #c0c6d4;
}

/* td 모노스페이스 (host) */
.td-mono span {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: #5a6275;
}

/* ── form-toolbar ── */

.form-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    background: #f8f9fb;
    border-bottom: 1px solid #dde2ea;
}

.form-toolbar__actions {
    display: flex;
    gap: 6px;
}

/* Delete 버튼 */
.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #c05a5a;
    background: #fdf0f0;
    border: 1px solid #e8c0c0;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-delete:hover  { background: #fae0e0; border-color: #d89090; color: #a03030; }
.btn-delete:active { background: #f5d0d0; }

/* Cancel 버튼 */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #8a90a0;
    background: #f2f3f5;
    border: 1px solid #d4d8e0;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

.btn-cancel:hover  { background: #e8eaee; border-color: #b0b8c8; color: #5a6275; }
.btn-cancel:active { background: #dde0e6; }


/* ── detail-form ── */

.detail-form {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 행 */
.detail-form__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 30px;
}

/* 라벨 */
.detail-form__label {
    flex: 0 0 80px;
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding-top: 5px;
}

.detail-form__label em {
    color: #e05252;
    font-style: normal;
    margin-left: 2px;
}

/* 필드 래퍼 */
.detail-form__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 입력창 */
.detail-form__input {
    width: 100%;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    box-sizing: border-box;
    transition: border-color 0.12s, background 0.12s;
}

.detail-form__input:focus {
    border-color: #7b8ec8;
    background: #fff;
    outline: none;
}

.detail-form__input::placeholder { color: #c0c6d4; }

/* Host 모노스페이스 */
.detail-form__input--mono {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: #4a6fd4;
}

/* Host 읽기전용 표시 */
.detail-form__value--mono {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: #4a6fd4;
    font-weight: 600;
    padding-top: 4px;
}

/* 에러 메시지 */
.detail-form__msg {
    font-size: 10px;
    color: #e05252;
}


/* ── detail-form 추가 (domain_detail.css 위에 로드) ── */

/* 인라인 그룹 (Sub Host + select) */
.detail-form__inline {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

/* Sub Host 입력 고정폭 */
.detail-form__input--sub {
    flex: 0 0 160px;
}

/* 셀렉트 */
.detail-form__select {
    flex: 1;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d4d8e2;
    border-radius: 4px;
    background: #f8f9fb;
    color: #2c3241;
    cursor: pointer;
    transition: border-color 0.12s;
    box-sizing: border-box;
}

.detail-form__select:focus {
    border-color: #7b8ec8;
    outline: none;
}

/* Forward Domain - 전체 너비 */
.detail-form__select--full {
    width: 100%;
    flex: none;
}

/* toggle 행 */
.detail-form__row--toggle {
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

/* 구분선 */
.detail-form__divider {
    height: 1px;
    background: #edf0f4;
    margin: 2px 0;
}

/* readonly 입력창 */
.detail-form__input--readonly {
    background: #f2f4f7;
    color: #7a8299;
    cursor: pointer;
}

.detail-form__input--readonly:focus {
    border-color: #c4cce8;
    background: #f2f4f7;
}


/* ── modalframe ── */

.modalframe_containerbox {
    width: 100%;
    height: 100%;
}

.modalframe_container {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

/* ── 탭 레이아웃 ── */

.domain_mng_tabs {
    display: flex;
    height: 100%;
}

/* 좌측 탭 메뉴 */
.domain_mng_left {
    display: flex;
    flex-direction: column;
    width: 110px;
    flex-shrink: 0;
    background: #f2f4f7;
    border-right: 1px solid #dde2ea;
    padding: 8px 0;
    gap: 2px;
}

/* 탭 아이템 */
.domain_mng_tab {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #8a90a0;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    margin-right: 6px;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}

.domain_mng_tab svg {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.12s;
}

.domain_mng_tab span {
    display: inline;
}

.domain_mng_tab:hover {
    background: #e8ecf2;
    color: #5a6275;
}

.domain_mng_tab:hover svg {
    opacity: 0.9;
}

/* 활성 탭 */
.domain_mng_tab.active {
    background: #eef1fb;
    color: #4a6fd4;
    border-left: 2px solid #7b8ec8;
    padding-left: 12px;
}

.domain_mng_tab.active svg {
    opacity: 1;
    color: #7b8ec8;
}

/* 우측 컨텐츠 */
.domain_mng_right {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

.db-popup__left {
    width: 460px;
}
 



















 /* ── main-dashboard (IE 11+ 호환) ── */

.main-dashboard {
    padding: 20px;
}

/* 그리드 → flex (IE용 -ms- 접두사 + gap 대체) */
.dash-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* gap 미지원 → margin으로 대체 */
    padding-bottom: 0;
}

/* 카드 */
.dash-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 40%;
    min-width: 220px;
    background: #fff;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    /* gap 대체: 카드 간 간격 */
    margin: 10px;
}

.dash-card:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: transparent;
}

/* 아이콘 */
.dash-card__icon {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.dash-card__icon--blue   { background: #e8f0fe; color: #3d6fdb; }
.dash-card__icon--indigo { background: #eef1fb; color: #5468b8; }
.dash-card__icon--green  { background: #eaf7f0; color: #3d8f5e; }
.dash-card__icon--orange { background: #fef3e8; color: #c87828; }
.dash-card__icon--purple { background: #f2eefb; color: #7050b8; }

/* 바디 */
.dash-card__body {
    -ms-flex: 1;
    flex: 1;
    padding: 0;
}

/* 타이틀 */
.dash-card__title {
    font-size: 24px;
    font-weight: bold;
    color: #2c3241;
    margin: 0 0 10px;
}

/* 설명 */
.dash-card__desc {
    font-size: 16px;
    color: #555;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Tip 목록 */
.dash-card__tips {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.dash-card__tips li {
    font-size: 14px;
    color: #444;
    margin-bottom: 5px;
    line-height: 1.5;
}

.dash-card__tips li em {
    font-style: normal;
    font-weight: 700;
    color: #5468b8;
    margin-right: 4px;
}

/* 푸터 */
.dash-card__footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* gap 대체 → 자식에 margin */
    padding: 0;
    border-top: none;
    margin-top: 10px;
}

.dash-card__footer--multi {
    /* gap 대체 */
}

/* 바로가기 링크 (gap 대체: margin-right) */
.dash-card__link {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    background-color: #7b8ec8;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    /* gap 대체 */
    margin-right: 8px;
    margin-bottom: 4px;
}

.dash-card__link svg {
    margin-left: 4px;
}

.dash-card__link:hover {
    background-color: #5468b8;
    text-decoration: none;
}

.dash-card__link--sub {
    background-color: #a0aabb;
}

.dash-card__link--sub:hover {
    background-color: #8090aa;
}

/* 빈 카드 */
.dash-card--empty {
    visibility: hidden;
    pointer-events: none;
}

/* ── login popup layout ── */

.page-container {
    width: 100%;
    height: 100%;
}

.main-boxcontent {
    display: flex;
    height: 100%;
}

/* 좌측 목록 */
.login-list-panel {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid #edf0f4;
    display: flex;
    flex-direction: column;
}

/* 우측 폼 */
.login-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 폼 스크롤 영역 */
.login-form-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* ── Session Bind 섹션 ── */

.login-bind-section {
    margin: 4px 0;
}

.login-bind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.login-bind-head__title {
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* bind 테이블 입력창 */
.login-bind-input {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    font-family: 'Consolas', 'Courier New', monospace;
    border: 1px solid #e0e4ec;
    border-radius: 3px;
    background: #f8f9fb;
    color: #2c3241;
    box-sizing: border-box;
    transition: border-color 0.12s;
}

.login-bind-input:focus {
    border-color: #7b8ec8;
    background: #fff;
    outline: none;
}

/* ── 아이콘 버튼 ── */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #d4d8e0;
    border-radius: 4px;
    background: #f2f3f5;
    color: #7a8299;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-icon:hover {
    background: #e8eaee;
    border-color: #b0b8c8;
    color: #5a6275;
}

.btn-icon--active {
    background: #eef1fb;
    border-color: #c4cce8;
    color: #7b8ec8;
}

.btn-icon--red {
    color: #c05a5a;
    background: #fdf0f0;
    border-color: #e8c0c0;
}

.btn-icon--red:hover {
    background: #fae0e0;
    border-color: #d89090;
    color: #a03030;
}

.btn-icon:disabled,
.btn-icon[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ── file popup 추가 CSS (login_popup.css 위에 로드) ── */

/* Upload Type / Auth 행 wrap */
.detail-form__row--wrap {
    align-items: flex-start;
}

.detail-form__row--wrap .detail-form__label {
    padding-top: 3px;
}

/* 체크박스 그룹 */
.file-check-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #2c3241;
}

.file-check-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
}

/* Auth 라디오 그룹 */
.file-auth-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #2c3241;
    row-gap: 6px;
}

.file-auth-group label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.file-auth-label {
    font-size: 10px;
    font-weight: 700;
    color: #9099ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 8px;
    white-space: nowrap;
}

.file-auth-label:first-child { margin-left: 0; }

/* Bind select (login-bind-input 공유) */
.login-bind-input select {
    font-family: inherit;
}









.domain-popup__section-title {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    color: #888;
}

.domain-popup__row--recent {
    background: #fffbf0;
}

.domain-popup__row--recent:hover {
    background: #fff3cd;
}

.domain-popup__divider {
    height: 5px;
    background: #efefef;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 4px;
}
/* 헤더 필터 버튼 */
.domain-popup__col--filter {
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.domain-popup__filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.domain-popup__filter-btn:hover {
    color: #4a7eff;
    background: #eef2ff;
}

/* 필터 입력창 */
.domain-popup__filter-bar {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: #f9f9fb;
    border-bottom: 1px solid #ddd;
    gap: 6px;
}

.domain-popup__filter-input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
}

.domain-popup__filter-input:focus {
    border-color: #4a7eff;
}

.domain-popup__filter-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
}

.domain-popup__filter-clear:hover {
    color: #ff4a4a;
}

/* 검색 결과 없음 */
.domain-popup__empty {
    padding: 16px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
}