Code - itnAdmin/base

/* 踰꾪듉 ?덉씠?꾩썐 */ .btn_wrap{display:flex;justify-content:space-between;gap:8px;} .btn_wrap.column{flex-direction:column;gap:4px;} .btn_wrap>div{display:flex;width:calc(100%/3);gap:8px} .btn_wrap.left, .btn_wrap .left{justify-content:flex-start;} .btn_wrap.center,.btn_wrap .center{justify-content:center;} .btn_wrap.right,.btn_wrap .right{justify-content:flex-end;} /* 踰꾪듉 ?ㅽ???*/ .btn{border-radius:5px;box-sizing:border-box;} .btn:hover{box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.08);transition: all 0.3s ease;} .btn.only_text{padding:0 !important;} .btn.only_icon{padding:0 !important;} .btn.mix{display:flex;align-items:center;} .btn.mix .icon{height:100%;background-size:contain;} .btn.xssmall{height:28px;font-size:14px;padding:0 4px;} .btn.ssmall{height:30px;font-size:14px;padding:0 6px;} .btn.small{height:32px;font-size:16px;padding:0 6px;} .btn.medium{height:34px;font-size:16px;padding:0 8px;} .btn.large{height:38px;font-size:18px;padding:0 12px;font-weight:600;} .btn.xlarge{height:50px;font-size:18px;padding:0 24px;font-weight:600;} .btn.fill.primary{background-color: var(--primary-color);color: #fff;} .btn.fill.primary:hover{background-color: var(--primary-color-hover);color: #fff;} .btn.fill.primary_light{background-color: var(--primary-light-color);border: 1px solid var(--primary-light-border);color:var(--primary-color);} .btn.fill.primary_light:hover{background-color: var(--primary-light-color-hover);} .btn.fill.secondary{background-color: var(--secondary-color);color: #fff;} .btn.fill.secondary:hover{background-color: var(--secondary-color-hover);} .btn.fill.accent{background-color: var(--accent-color);color: #fff;} .btn.fill.accent:hover{background-color: var(--accent-color-hover);} .btn.fill.accent_light{background-color: var(--accent-light-color);color: var(--accent-dark-color);} .btn.fill.accent_light:hover{background-color: var(--accent-light-color-hover);} .btn.fill.red{background-color: var(--red-color);color: #fff;} .btn.fill.red:hover{background-color: var(--red-color-hover);} .btn.fill.green{background-color: var(--green-color);color: #fff;} .btn.fill.green:hover{background-color: var(--green-color-hover);} .btn.fill.gray{background-color: var(--gray-color);color: #fff;} .btn.fill.gray:hover{background-color: var(--gray-color-hover);} .btn.fill.lightgray{background-color: var(--lightgray-color);color: #5b606c;} .btn.fill.lightgray:hover{background-color: var(--lightgray-color-hover);} .btn.line.primary{border: 1px solid var(--primary-color);color: var(--primary-color);} .btn.line.primary:hover{border: 1px solid var(--primary-color-hover);color: var(--primary-color-hover);} .btn.line.secondary{border: 1px solid var(--secondary-color);color:var(--secondary-color);} .btn.line.secondary:hover{background:var(--secondary-light-color);border: 1px solid var(--secondary-color-hover);} .btn.line.accent{border: 1px solid var(--accent-color);color: var(--accent-color);} .btn.line.accent:hover{border: 1px solid var(--accent-color-hover);} .btn.line.red{border: 1px solid var(--red-color);color: var(--red-color);} .btn.line.red:hover{background:var(--red-light-color);color: var(--red-color-hover);} .btn.line.green{border: 1px solid var(--green-color);color: var(--green-color);} .btn.line.green:hover{background-color: var(--green-color-hover);} .btn.line.gray{border: 1px solid var(--gray-color);color: var(--gray-color);} .btn.line.gray:hover{background-color: var(--disable-line-bg-color);} .btn.line.lightgray{border: 1px solid var(--lightgray-color);color: #5B606C;} .btn.line.lightgray:hover{background-color: var(--disable-line-bg-color);} .btn.fill.disabled,.btn.fill.readonly,.btn.fill:disabled{background:var(--disable-fill-bg-color) !important; color:var(--disable-fill-text-color) !important; pointer-events:none;} .btn.line.disabled,.btn.line.readonly,.btn.line:disabled{background:var(--disable-line-bg-color) !important;border:1px solid var(--disable-line-border-color);color:var(--disable-line-text-color) !important;pointer-events:none;} .btn_text{display:inline-flex;align-items:center;justify-content:center;} .btn_36{height:36px;padding:0 14px;font-size:15px;} .btn_46{height:46px;padding:0 18px;font-size:16px;} .blue_fill{background:var(--primary-color);color:#fff;} .blue_fill:hover{background:var(--primary-color-hover);color:#fff;} .gray_fill{background:var(--gray-color);color:#fff;} .gray_fill:hover{background:var(--gray-color-hover);color:#fff;} .blue_border{border:1px solid var(--primary-color);color:var(--primary-color);background:#fff;} .blue_border:hover{background:var(--primary-lighter-color);} .red_border{border:1px solid var(--red-color);color:var(--red-color);background:#fff;} .red_border:hover{background:var(--red-light-color);} .btn_delete i.icon.delete{background-size:auto;margin:0;} .btn.excel{background:#fff;border:1px solid #0e8945;color:#0e8945;} .btn.excel i{width:32px;} .btn.excel i.download,.btn.excel i.upload{margin:2px 0 0 0;} .sort_wrap{display:inline-block;} .sortBtn,input.sortBtn{font-size:9px;margin:-2.5px 0 0 4px;border:0 !important;background:transparent !important;color:#000 !important;} /* ?섏씠吏 */ .page{display:flex;gap:6px;margin:30px auto 0 auto;justify-content:center;align-items:center;} .page a,.page button{display:flex;width:36px;height:36px;border:1px solid transparent;border-radius:5px;font-size:16px;color:#878B96;justify-content:center;align-items:center;transition:all .3s;} .page a:hover, .page button:hover{background:#F5F6F7;color:#3a3c41;} .page .active,.page .on{border:1px solid #E2E7EF;background:#e2e7ef;font-weight:600;color:#3a3c41;} .page .btn_page{border:1px solid #d2d7df;border-radius:5px;overflow:hidden;} .page .btn_page:hover{background-color:#F5F6F7;} .page .btn_page i{display:inline-block;width:100%;height:100%;transition:all .3s;} .btn_first i{background:url(/publish/adm/images/component/icon_double_arrow_left_page.png) no-repeat center;} .btn_prev i{background:url(/publish/adm/images/component/icon_arrow_left_page.png) no-repeat center;} .btn_next i{background:url(/publish/adm/images/component/icon_arrow_right_page.png) no-repeat center;} .btn_last i{background:url(/publish/adm/images/component/icon_double_arrow_right_page.png) no-repeat center;} /* Legacy USS compatibility */ .btnWrap{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin:24px 0 0;} .btnWrap.left{justify-content:flex-start;} .btnWrap.center{justify-content:center;} .btnWrap.right{justify-content:flex-end;} .btnWrap .left, .btnWrap .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .btn_wrap.btn_layout01{align-items:center;} .btn_wrap.btn_layout01 .area_left, .btn_wrap.btn_layout01 .area_right{display:flex;width:auto;gap:8px;} .btn_wrap.btn_layout01 .area_right{margin-left:auto;} .btnType01, .btnType02, .btnType03, .btnType04, .btnType05, .btnType06, .btnType07, .btnType08, .btnType09{ display:inline-flex; min-width:88px; height:38px; padding:0 16px; border-radius:6px; border:1px solid transparent; font-size:15px; font-weight:500; line-height:1; text-decoration:none; justify-content:center; align-items:center; box-sizing:border-box; transition:all .2s ease; } .btnType01, .btnType02, .btnType06{background:var(--primary-color);color:#fff;} .btnType01:hover, .btnType02:hover, .btnType06:hover{background:var(--primary-color-hover);color:#fff;} .btnType03, .btnType04, .btnType09{background:#fff;border-color:var(--lightgray-color);color:var(--body-text-color);} .btnType03:hover, .btnType04:hover, .btnType09:hover{background:var(--disable-line-bg-color);} .btnType04, .btnType09{border-color:var(--red-color);color:var(--red-color);} .btnType04:hover, .btnType09:hover{background:var(--red-light-color);color:var(--red-color-hover);} .btnType05, .btnType07, .btnType08{background:var(--gray-color);color:#fff;} .btnType05:hover, .btnType07:hover, .btnType08:hover{background:var(--gray-color-hover);color:#fff;}