/* 버튼 */ /* -> 버튼은 readonly 없음 */ /* -> disabled는 스타일만 만들고 사용X(웹접근성 인증 시 안됨. 클래스로 대체) */ /* 버튼 레이아웃 */ .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;} a.btn{display:inline-flex;align-items:center;justify-content:center;} .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_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;} /* 페이지 */ .page,.page .inline{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(../images/component/icon_double_arrow_left_page.png) no-repeat center;} .btn_prev i{background:url(../images/component/icon_arrow_left_page.png) no-repeat center;} .btn_next i{background:url(../images/component/icon_arrow_right_page.png) no-repeat center;} .btn_last i{background:url(../images/component/icon_double_arrow_right_page.png) no-repeat center;}