등)이 td에 직접 붙음
→ td 자체에 다른 ReadOnly 필드와 동일한 회색 배경 + 테두리 부여 */
#unipost-unidocu #sub_content .unidocu-form-table .unidocu-td.Uni_TextEditor:has(> .unidocu-input-wrapper[style*="display: none"]) {
min-height: 60px;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface-tertiary);
box-sizing: border-box;
}
#unipost-unidocu kbd { background-color: #333; border-radius: 3px; padding: 2px 4px; }
#unipost-unidocu .ui-dialog.json-input .ui-dialog-content pre{ font-size:16px; }
#unipost-unidocu .custom-uni_auto_complete-toggle { position: absolute; top: 0; bottom: 0; right: 0; padding: 0}
#unipost-unidocu .custom-uni_auto_complete-toggle .ui-button-icon-primary { position: absolute; top: 10px; right: 0; }
#unipost-unidocu .custom-uni_auto_complete-toggle .ui-icon-triangle-1-s { margin-left: 4px; margin-top: 6px;}
#unipost-unidocu .custom-uni_auto_complete-toggle:hover { cursor: default}
#unipost-unidocu .custom-uni_auto_complete-toggle:focus { outline: none;}
#unipost-unidocu .ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden; }
* html #unipost-unidocu .ui-autocomplete { height: 100px; }
#unipost-unidocu input[type=text]::-ms-clear {display: none;}
#unipost-unidocu .jsoneditor table {width: auto;}
#unipost-unidocu .white:focus,
#unipost-unidocu .white:hover { background-color: #e6e6e6; }
#unipost-unidocu .field-desc .unidocu-debug { position: absolute; background-color :black; color: white; z-index: 10000 }
#unipost-unidocu .field-id .unidocu-debug { position: absolute; background-color :red; color: white; z-index: 10000 }
#unipost-unidocu .field-value .unidocu-debug { position: absolute; background-color :yellow; color: black; z-index: 10000 }
#unipost-unidocu .unidocu-debug {cursor: pointer;}
#unipost-unidocu .debug-screen-id.unidocu-debug { position: absolute; background-color: yellow; color: black; }
#unipost-unidocu .debug-level-id .unidocu-debug { position: absolute; background-color: red; color: black; }
#unipost-unidocu .jsoneditor table {width: auto;}
#unipost-unidocu .qq-file-info .unidocu-button {padding: 0 5px; width: 20px;}
#unipost-unidocu #file-attach-wrapper .fa-th,
#unipost-unidocu #file-attach-wrapper .fa-list {
margin: 0;
}
#unipost-unidocu #file-attach-wrapper .fa-th::before {
display: inline-block;
width: 10px;
height: 11px;
content: '';
background: url('../images/i-theme-box.svg') 50% calc(50% + 1px) no-repeat;
background-size: 10px 10px;
}
#unipost-unidocu #file-attach-wrapper .fa-list::before {
display: inline-block;
width: 13px;
height: 12px;
content: '';
background: url('../images/i-theme-list.svg') 50% calc(50% + 1px) no-repeat;
background-size: 13px 11px;
}
#unipost-unidocu #document-reference-wf-org .search-button-wrapper {margin-top: -5px;}
#unipost-unidocu #main-2018 .theme-names-wrapper {
top: 45px;
}
#unipost-unidocu .btn-inp {
top: 5px;
right: 1px;
font-size: 24px;
position: absolute;
cursor: pointer;
color: black;
}
#unipost-unidocu .ui-widget-header .ui-icon {
background-image: url(custom-theme/images/ui-icons_ffffff_256x240.png);
}
#unipost-unidocu .ui-datepicker-header.ui-widget-header .ui-icon {background-image: url(custom-theme/images/ui-icons_ffffff_256x240.png);}
#unipost-unidocu #unipost-unidocutable {
min-width: 140px;
}
#unipost-unidocu .ui-widget-header .ui-icon {
background-image: none;
}
#unipost-unidocu .ui-dialog .ui-dialog-titlebar-close:before {
position: relative;
top: 11px;
right:15px;
color: #fff;
content: '\e80b';
font-family: "unifont", sans-serif;
font-size: 23px;
}
#unipost-unidocu .ui-dialog .ui-dialog-titlebar {padding: 6px 0 7px 10px;}
.unidocu-alert.ui-dialog-content pre {font-size: 13px;}
.IE11 input[type="text"],
.IE11 input[type="password"],
.IE11 .ui-autocomplete-input{
line-height: 0;
}
textarea,
.uneditable-input {
line-height: normal;
}
#unipost-unidocu .in-page-list .page_title {margin-top: 85px;}
.rr-print-back, .rr-print-back * {font-size: inherit;font-weight: inherit;color: inherit;}
.rr-print-back {background-color: inherit;}
@font-face {
font-family: 'SUIT-Regular';
src: url('./font/SUIT-Variable.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'SUIT-Bold';
src: url('./font/SUIT-Variable.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
.login-box * {font-family: 'SUIT-Regular', sans-serif;}
.login-box input::-webkit-input-placeholder {color: #999;}
.login-box input::-moz-placeholder {color: #999;}
.login-box input:-moz-placeholder {color: #999;}
.login-box input:-ms-input-placeholder {color: #999;}
.login-box {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
min-width: 1000px;
height: 100vh;
min-height: 620px;
background-color: #fff;
}
.login-box .login-box-in {
display: flex;
margin-top: -60px;
}
.login-box .login-box-in::before {
width: 521px;
height: 360px;
margin-right: 60px;
content: '';
background: url('../images/bg-uniworks.svg') 0 0 no-repeat;
}
.login-box .login-box-in .logo {
width: 154px;
height: 50px;
margin-bottom: 36px;
background: url('../images/logo-uniworks.svg') 0 0 no-repeat;
}
.login-box .login-box-in .login-area {margin-bottom: 36px;}
.login-box .login-box-in .login-area .id-wrapper {margin-bottom: 16px;}
.login-box .login-box-in .login-area .pw-wrapper {margin-bottom: 20px;}
.login-box .login-box-in .login-input {
width: 326px;
height: 48px;
padding: 0 20px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 16px;
box-sizing: border-box;
}
.login-box .login-box-in .login-input:focus {border-color: #999;}
.login-box .login-box-in .login-area .check-input-wrapper-n span {
align-self: self-start;
font-size: 16px;
}
.login-box .check-input-wrapper-n {
display: inline-flex;
align-items: center;
position: relative;
line-height: 19px;
cursor: pointer;
}
.login-box .check-input-wrapper-n input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
opacity: 0;
cursor: pointer;
}
.login-box .check-input-wrapper-n input[type=checkbox] + i::before {
display: flex;
content: '';
width: 20px;
height: 20px;
margin-right: 8px;
background: url('../images/bg-checkbox.png') 0 0 no-repeat;
}
.login-box .check-input-wrapper-n input[type=checkbox]:checked + i::before {background: url('../images/bg-checkbox-checked.png') 0 0 no-repeat;}
.login-box .login-box-in .btn-login {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 326px;
height: 52px;
margin-bottom: 16px;
line-height: 52px;
font-family: 'SUIT-Bold', sans-serif;
font-size: 20px;
color: #fff;
border-radius: 16px;
background-color: #32b4ff;
}
.login-box .login-box-in .btn-login:hover::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-color: rgb(255,255,255,.1);
}
.login-box .login-box-in .login-box-middle {text-align: center;}
.login-box .login-box-in .login-box-middle .btn-change-pw {
font-size: 13px;
color: #32b4ff;
cursor: pointer;
}
.login-box .login-box-in .login-box-middle .btn-change-pw:hover {text-decoration: underline;}
.login-box .login-box-in .copyright {
position: absolute;
left: calc(50% - 100px);
bottom: 60px;
width: 200px;
text-align: center;
color: #bbb;
}
.login-box .login-box-in .copyright .point {color: #999;}
.grid-fullscreen {
border: 0;
height: 100% !important;
left: 0;
margin: 0 !important;
overflow: hidden;
-ms-scroll-chaining: none;
overscroll-behavior: none;
padding: 0;
position: fixed;
top: 0;
touch-action: pinch-zoom;
width: 100%;
background-color: #fff;
z-index: 1000;
}
.grid-fullscreen .unidocu-panel .unidocu-panel-body {padding: 0;}
html #unipost-unidocu .unidocu-grid.grid-fullscreen .unidocu-panel-contents {margin: 0;}
.grid-fullscreen-section {min-width: inherit !important;}
.zoom-grid-btn {
position: absolute;
top: inherit;
right: 24px;
bottom: 24px;
border: 0;
opacity: .3;
z-index: 1000;
cursor: pointer;
}
.zoom-grid-btn:hover {opacity: 1;}
.zoom-grid-btn .ico-uni-upsize-f::before {
display: block;
width: 24px;
height: 24px;
content: '';
background: url('../images/btn-expand.svg') 0 0 no-repeat;
background-size: 24px;
}
.zoom-grid-btn .ico-uni-downsize-f::before {
display: block;
width: 24px;
height: 24px;
content: '';
background: url('../images/btn-contract.svg') 0 0 no-repeat;
background-size: 24px;
}
html .unidocu-datepicker {
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0,0,0,0.1) !important;
}
html .datepicker table tr td.old,
html .datepicker table tr td.new {
color: #bbb;
}
html .datepicker-days table thead,
html .datepicker-months table thead,
html .datepicker-years table thead,
html .datepicker-decades table thead,
html .datepicker-centuries table thead {
color: #222;
background-color: #fff;
}
html .datepicker.datepicker-inline th,
html .datepicker.datepicker-inline td {
padding: 1px 5px;
}
html .datepicker table tr td.active.active,
html .datepicker table tr td.active.highlighted.active,
html .datepicker table tr td.active.highlighted:active,
html .datepicker table tr td.active:active,
html .datepicker table tr td.active.active.focus,
html .datepicker table tr td.active.active:focus,
html .datepicker table tr td.active.highlighted.active.focus,
html .datepicker table tr td.active.highlighted.active:focus,
html .datepicker table tr td.active.highlighted:active.focus,
html .datepicker table tr td.active.highlighted:active:focus,
html .datepicker table tr td.active:active.focus,
html .datepicker table tr td.active:active:focus {
color: #222;
border-radius: 8px;
border: 0;
background-color: rgba(50,180,255,.3);
}
html .datepicker table tr td.day:hover,
html .datepicker table tr td.focused {
border-radius: 8px;
border: 0;
background-color: rgba(50,180,255,.3);
}
html .datepicker table tr td span.active.active,
html .datepicker table tr td span.active.disabled.active,
html .datepicker table tr td span.active.disabled:active,
html .datepicker table tr td span.active.disabled:hover.active,
html .datepicker table tr td span.active.disabled:hover:active,
html .datepicker table tr td span.active:active,
html .datepicker table tr td span.active:hover.active,
html .datepicker table tr td span.active:hover:active {
color: #222;
border-radius: 8px;
border: 0;
background-color: rgba(50,180,255,.3);
}
html .datepicker table tr td span.active.active.focus,
html .datepicker table tr td span.active.active:focus,
html .datepicker table tr td span.active.active:hover,
html .datepicker table tr td span.active.disabled.active.focus,
html .datepicker table tr td span.active.disabled.active:focus,
html .datepicker table tr td span.active.disabled.active:hover,
html .datepicker table tr td span.active.disabled:active.focus,
html .datepicker table tr td span.active.disabled:active:focus,
html .datepicker table tr td span.active.disabled:active:hover,
html .datepicker table tr td span.active.disabled:hover.active.focus,
html .datepicker table tr td span.active.disabled:hover.active:focus,
html .datepicker table tr td span.active.disabled:hover.active:hover,
html .datepicker table tr td span.active.disabled:hover:active.focus,
html .datepicker table tr td span.active.disabled:hover:active:focus,
html .datepicker table tr td span.active.disabled:hover:active:hover,
html .datepicker table tr td span.active:active.focus,
html .datepicker table tr td span.active:active:focus,
html .datepicker table tr td span.active:active:hover,
html .datepicker table tr td span.active:hover.active.focus,
html .datepicker table tr td span.active:hover.active:focus,
html .datepicker table tr td span.active:hover.active:hover,
html .datepicker table tr td span.active:hover:active.focus,
html .datepicker table tr td span.active:hover:active:focus,
html .datepicker table tr td span.active:hover:active:hover {
color: #222;
border-radius: 8px;
border: 0;
background-color: rgba(50,180,255,.4)
}
html .datepicker table tr td.active.active:hover,
html .datepicker table tr td.active.highlighted.active:hover,
html .datepicker table tr td.active.highlighted:active:hover,
html .datepicker table tr td.active:active:hover {
color: #222;
border-radius: 8px;
border: 0;
background-color: rgba(50,180,255,.4);
}
html .datepicker table tr td.today {
border-radius: 8px;
background-color: #fffde8;
}
html .datepicker .datepicker-switch,
html .datepicker .datepicker-switch:hover {
padding: 2px 5px !important;
font-family: 'SUIT-Bold', sans-serif;
font-size: 13px;
color: #222;
}
html .datepicker .prev,
html .datepicker .next {
width: 8px;
height: 8px;
font-size: 0;
color: transparent;
background: url('../images/i-arrow-line.svg') 50% 50% no-repeat;
}
html .datepicker .prev:hover,
html .datepicker .next:hover {
font-size: 0;
color: transparent;
background: url('../images/i-arrow-line.svg') 50% 50% no-repeat;
}
html[data-mode="dark"] .datepicker .prev,
html[data-mode="dark"] .datepicker .next,
html[data-mode="dark"] .datepicker .prev:hover,
html[data-mode="dark"] .datepicker .next:hover {
background-image: url('../images/i-arrow-line-dark.svg');
}
html .datepicker .prev,
html .datepicker .prev:hover {
transform: rotateZ(90deg);
}
html .datepicker .next,
html .datepicker .next:hover {
transform: rotateZ(-90deg);
}
html .datepicker table tr td span {border-radius: 8px;}
html .datepicker table tr td span:hover,
html .datepicker table tr td span.focused {
background-color: rgba(50,180,255,.3);
}
html .datepicker .datepicker-switch:hover,
html .datepicker .prev:hover,
html .datepicker .next:hover,
html .datepicker tfoot tr th:hover {
border-radius: 8px;
background-color: rgba(50,180,255,.1);
}
html #unipost-unidocu .ui-widget-overlay {opacity: .3;}
/* ui-dialog 공통 */
html #unipost-unidocu .ui-dialog,
html #unipost-unidocu .ui-datepicker.ui-widget.ui-widget-content,
html #unipost-unidocu .ui-datepicker .ui-widget-header,
html #unipost-unidocu .ui-datepicker select.ui-datepicker-month,
html #unipost-unidocu body .ui-datepicker select.ui-datepicker-year,
html #unipost-unidocu .ui-datepicker-year,
html #wrap #sub_content #unidocu-main-menu .main-menu-anchor .middle-menu-dropdown-list:hover,
html #wrap #sub_content #unidocu-main-menu .main-menu-anchor .leaf-menu-dropdown-list,
html #wrap #sub_content #unidocu-main-menu .main-menu-anchor .leaf-menu-dropdown-list:first-child,
html #wrap #sub_content #unidocu-main-menu .main-menu-anchor:last-child .leaf-menu-dropdown-list:first-child,
html #wrap #sub_content #unidocu-main-menu .main-menu-anchor .leaf-menu-dropdown-list:last-child {
border: 0;
border-radius: 16px;
box-shadow: 0 4px 40px rgba(0,0,0,0.06) !important;
}
html #unipost-unidocu .ui-dialog {padding: 20px;}
html #unipost-unidocu .ui-dialog .ui-dialog-titlebar {
margin-bottom: 12px;
padding: 0;
border: 0;
}
html #unipost-unidocu .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
margin: 0;
padding: 0;
font-family: 'SUIT-Bold', sans-serif;
font-size: 15px;
color: var(--color-text-primary);
}
html #unipost-unidocu .ui-dialog .ui-dialog-content {padding: 0;}
html #unipost-unidocu .unidocu-grid {
border-radius: 8px;
box-sizing: border-box;
}
/* textarea처럼 그리드 하단을 드래그해 세로 크기를 늘릴 수 있다 — 전체 .unidocu-grid 기본 적용
(트리 그리드는 별도 클래스 .unidocu-grid-tree라 영향 없음). renderGrid.js의 ResizeObserver가
드래그 후 실제 리얼그리드 캔버스를 새 높이에 맞춰 재계산한다. */
html #unipost-unidocu .unidocu-grid {
resize: vertical;
overflow: auto;
position: relative; /* 아래 그립 아이콘(::after) 배치 기준 */
}
html #unipost-unidocu .unidocu-grid > .unidocu-panel {
height: 100%;
}
/* 가로 리사이즈는 DRAFT_00xx(전자결재 기안 요청) 팝업 화면 요청으로만 켠다 — 폭을 늘리면 옆
요소와 겹치거나 레이아웃이 밀릴 수 있어 다른 화면은 세로 리사이즈(위 resize:vertical)만 유지.
max-width가 없으면 드래그로 부모 폭을 넘어서까지 계속 커져 화면 밖으로 삐져나가므로,
부모 컨텐츠 폭을 넘지 않게 상한을 둔다. */
html #unipost-unidocu .unidocu-grid.draft-popup-grid {
resize: both;
max-width: 100%;
}
/* 브라우저가 기본으로 그리는 리사이즈 그립(회색 3선 삼각형)이 아래 커스텀 아이콘과 같은 자리에
겹쳐 지저분해 보여서, 배경을 투명 처리해 안 보이게 한다 — 드래그 히트영역(기능)은 그대로 살아있고
시각적으로만 사라진다. webkit 계열(Chrome/Edge)에서만 지원되는 pseudo-element다. */
html #unipost-unidocu .unidocu-grid::-webkit-resizer {
background-color: transparent;
}
/* 컬럼이 많아 그리드 자체 가로 스크롤바가 뜨는 화면에서는, 스크롤바 우측 끝(화살표/코너)이
아래 리사이즈 아이콘과 같은 자리라 겹쳐 보인다. 리얼그리드 실제 그리기 영역을 hover마다
다시 계산시키면 버벅일 수 있어, 대신 아이콘 뒤에 배경색과 같은 사각형(::before)을 깔아
hover 시 그 부분만 살짝 덮어써서 스크롤바가 자리를 비켜준 것처럼 보이게 한다 — 실제 리사이즈는
없는 순수 시각 효과. 평소(hover 전)엔 스크롤바만 깨끗하게 보인다. */
html #unipost-unidocu .unidocu-grid::before {
content: '';
position: absolute;
right: 1px;
bottom: 1px;
width: 17px;
height: 17px;
z-index: 2; /* 그리드 내부 RealGrid 스크롤바(절대좌표 div)보다 위에 그려지도록 명시 */
background: var(--color-surface-inverse); /* 라이트=검정 계열, 다크=흰색 계열 배경(반전 표면 토큰) */
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
}
html #unipost-unidocu .unidocu-grid:hover::before {
opacity: 1;
}
/* 네이티브 resize 그립(브라우저가 그리는 옅은 회색 삼각선)이 눈에 잘 안 띄어서, 위에 강조색
그립 아이콘을 얹는다. pointer-events:none이라 실제 드래그 히트영역(네이티브)은 그대로 밑에서
동작 — 이 ::after는 순수 시각적 표시일 뿐이다. 다른 패널 아이콘들(.panel-type-icon)과 같은
방식으로 stroke="currentColor" SVG를 mask로 칠해 테마 강조색을 그대로 따라가게 한다.
평소엔 완전히 숨겨두고 그리드에 마우스를 올렸을 때만 나타나게 한다(위 ::before 배경과 함께). */
html #unipost-unidocu .unidocu-grid::after {
content: '';
position: absolute;
right: 1px;
bottom: 1px;
width: 17px;
height: 17px;
z-index: 3; /* ::before(배경 커버)보다도 위, 항상 최상단에 보이도록 */
pointer-events: none;
background-color: var(--color-surface); /* ::before(반전 배경) 위에서 보이도록 반대로 반전 */
opacity: 0;
transition: opacity .15s ease;
-webkit-mask-image: url('../images/i-resize-handle.svg');
mask-image: url('../images/i-resize-handle.svg');
-webkit-mask-size: 11px;
mask-size: 11px;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
html #unipost-unidocu .unidocu-grid:hover::after {
opacity: .9;
}
html #unipost-unidocu .unidocu-grid .unidocu-panel-body {padding-bottom: 0;}
html #unipost-unidocu .unidocu-grid .unidocu-panel-contents {
overflow: hidden;
margin: 0 -12px;
border: 1px solid #eee;
border-radius: 0 0 8px 8px;
box-sizing: border-box;
}
/* 위 #eee(거의 흰색) 그리드 컨테이너 테두리가 다크에서 흰 테두리로 남던 것을 토큰으로 덮는다.
트리형 그리드(.unidocu-grid-tree) 쪽 원본이 !important라, 여기도 !important로 확실히 이기게 한다 */
html[data-mode="dark"] #unipost-unidocu .unidocu-grid .unidocu-panel-contents,
html[data-mode="dark"] #unipost-unidocu .unidocu-grid-tree {
border-color: var(--color-border) !important;
}
html #unipost-unidocu .ui-dialog .ui-dialog-titlebar-close {
top: 20px;
right: 0;
width: 20px;
height: 20px;
}
html #unipost-unidocu .ui-dialog .ui-dialog-titlebar-close:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
font-size: 0;
background: url('../images/i-delete.svg') 50% 50% no-repeat;
background-size: 12px;
}
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-titlebar-close:before {
background-image: url('../images/i-delete-dark.svg');
}
/* 서버 렌더 mustache(#evidence-wrapper img)처럼 src를 JS로 바꿀 수 없는 정적 아이콘은
#222222 고정 fill을 반전시켜 밝게 만든다 */
:root[data-mode="dark"] #evidence-wrapper img { filter: invert(1); }
/* 다이얼로그 다크 보정
(1) 뒤 배경 딤: 검정 오버레이가 라이트 기준 opacity .3 이라, 이미 어두운 다크 페이지에선
거의 안 어두워져 다이얼로그가 배경과 분리되지 않는다 → 다크에선 딤을 강하게. */
html[data-mode="dark"] #unipost-unidocu .ui-widget-overlay.ui-front { opacity: .6; }
/* (1-1) 다이얼로그 외곽 5px 테두리 — unidocu-color.css가 라이트/다크 공통으로 강조색(#32b4ff)을
먹이는데, 다크에서는 f4-code-dialog-ui 같은 다른 다이얼로그처럼 흰색으로 요청받아 다크에서만 덮는다.
라이트는 기존 강조색 그대로 유지. */
html[data-mode="dark"] #unipost-unidocu .ui-dialog {
border-color: var(--color-surface-inverse) !important;
}
/* (2) jquery-ui 기본 흰색 다이얼로그 크롬(titlebar #fff / content 흰배경 / #ddd 하단선)이 다크에서
안 덮여 흰 띠로 새는 것을 토큰 배경으로 덮는다(라이트는 그대로). */
html[data-mode="dark"] #unipost-unidocu .ui-dialog,
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-content,
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-titlebar,
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-buttonpane,
html[data-mode="dark"] #unipost-unidocu .ui-datepicker.ui-widget.ui-widget-content {
/* background-color만 덮으면 .ui-dialog 자신도 갖고 있는 .ui-widget-content 클래스의
background: #fff url(glass.png) ... 중 이미지가 안 지워져, .ui-dialog의 padding:10px 여백(테두리와
내부 titlebar/content/buttonpane 사이 틈)에 흰 글래스 텍스처가 그대로 비쳐 보였다.
background shorthand로 이미지/포지션까지 함께 지운다. 데이트피커 팝업도 같은 .ui-widget-content라
동일 문제라 함께 덮는다. */
background: var(--color-surface) !important;
}
/* jquery-ui 기본 테마(.ui-widget-content)가 color:#404040 을 하드코딩해 다크 배경 위에서
본문 텍스트(예: unidocuAlert의
)가 저대비로 흐릿하게 보이던 문제를 토큰으로 덮는다 */
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-content,
html[data-mode="dark"] #unipost-unidocu .ui-datepicker.ui-widget.ui-widget-content {
color: var(--color-text-primary) !important;
}
/* jquery-ui 기본 테마(custom-theme/jquery-ui-1.10.0.custom.css)의 .ui-dialog .ui-dialog-buttonpane 이
border-top:1px solid #ddd 와 box-shadow(표준 + -webkit-/-moz- 프리픽스 각각) inset 0 1px 0 #ffffff 를
하드코딩해, content와 버튼 영역 사이에 흰 줄이 그대로 남아있었다. 톤온톤 색으로 덮어도 어두운 배경
위에서는 밝기 차이가 도드라져 보여, 다크에서는 구분선 자체를 없앤다. */
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-buttonpane {
border-top: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
/* 데이트피커 헤더(월/연도 표시줄)도 같은 이유로 vendor 기본값(#f5f5f5)이 다크에서 흰 띠로 샌다 */
html[data-mode="dark"] #unipost-unidocu .ui-datepicker .ui-datepicker-header {
background-color: var(--color-surface-secondary) !important;
}
html[data-mode="dark"] #unipost-unidocu .ui-dialog .ui-dialog-titlebar { border-bottom-color: var(--color-border) !important; }
html #unipost-unidocu .ui-dialog .ui-dialog-buttonpane {padding: 8px 0 0 0;}
html #unipost-unidocu .ui-dialog .ui-dialog-buttonpane button:only-child,
html #unipost-unidocu .ui-dialog .ui-dialog-buttonpane button:last-child {
margin-right: 0;
}
#unipost-unidocu #amount-display.unidocu-form-table-wrapper {width: inherit;}
#amount-display.unidocu-form-table-wrapper .ignore-panel th,
#amount-display.unidocu-form-table-wrapper .ignore-panel td {
border: 0 !important;
}
html #unipost-unidocu .unidocu-grid-tree {
overflow: hidden;
margin: 10px -12px -6px;
border: 1px solid #eee !important;
border-radius: 0 0 8px 8px;
box-sizing: border-box;
}
#unipost-unidocu .uni-e-approval-view {
display: flex;
flex-direction: column;
gap: 16px;
}
.uni-e-approval-view .Uni_Text .unidocu-input-wrapper {width: 100%; height: auto;}
.uni-e-approval-view .unidocu-form-table-wrapper {margin: 0;}
/* 상단/하단 버튼 영역 — 카드와의 간격만 조정, 나머지는 전역 .btn_area 상속 */
#unipost-unidocu #uni-buttons.draft-buttons-area {padding: 0 0 10px;}
#unipost-unidocu #cloned-buttons.draft-buttons-area {
margin-top: 4px;
padding: 16px 0 0;
border-top: 1px solid var(--color-border);
}
.uni-e-approval-view .approval-card {
box-sizing: border-box;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.uni-e-approval-view .approval-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.uni-e-approval-view .approval-card-header h3 {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
}
.uni-e-approval-view .approval-card-header h3::before {
content: '';
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-primary);
}
/* 접기/펼치기 토글 — 실제 텍스트(M_showApprovalTable 등)는 접근성을 위해 DOM에 남기되
화면에는 숨기고, data-num(JS가 클릭 시 갱신)에 따라 +/- 아이콘만 보여준다. */
.uni-e-approval-view .approval-toggle {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0;
color: transparent;
cursor: pointer;
}
.uni-e-approval-view .approval-toggle:hover {background-color: var(--color-surface-secondary);}
.uni-e-approval-view .approval-toggle::after {
content: '\2212';
font-size: 12px;
font-weight: var(--weight-semibold);
color: var(--color-text-tertiary);
line-height: 1;
}
.uni-e-approval-view .approval-toggle[data-num="0"]::after {content: '+';}
/* 결재요청 제목 카드 (draftTitleTemplate) */
.uni-e-approval-view .draft-title-card {
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding: 18px 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.uni-e-approval-view .draft-title-eyebrow {
margin: 0 0 4px;
font-size: var(--text-2xs);
color: var(--color-text-tertiary);
}
.uni-e-approval-view .draft-title-heading {
margin: 0;
font-family: var(--font-sans-bold);
font-size: var(--text-xl);
color: var(--color-text-primary);
}
.uni-e-approval-view .draft-title-meta {
display: flex;
gap: 20px;
flex: none;
}
.uni-e-approval-view .draft-title-meta-item {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 16px;
border-left: 1px solid var(--color-border);
}
.uni-e-approval-view .draft-title-meta-item:first-child {padding-left: 0; border-left: none;}
.uni-e-approval-view .draft-title-meta-label {
font-size: var(--text-2xs);
color: var(--color-text-tertiary);
}
.uni-e-approval-view .draft-title-meta-value {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-primary);
}
/* 결재선(기안정보/일반결재/수신결재/의견) 카드 */
.uni-e-approval-view .approval-line-template {
display: flex;
flex-direction: column;
gap: 16px;
}
.uni-e-approval-view .approval-info-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.uni-e-approval-view .approval-info-item {
display: flex;
flex-direction: column;
gap: 3px;
padding-left: 20px;
border-left: 1px solid var(--color-border);
}
.uni-e-approval-view .approval-info-item:first-child {padding-left: 0; border-left: none;}
.uni-e-approval-view .approval-info-item .info-label {font-size: var(--text-xs); color: var(--color-text-secondary);}
.uni-e-approval-view .approval-info-item .info-value {font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-primary);}
.uni-e-approval-view .approval-info-item .info-value.danger {color: var(--color-danger);}
#unipost-unidocu .uni-e-approval-view table.approval-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#unipost-unidocu .uni-e-approval-view table.approval-table th,
#unipost-unidocu .uni-e-approval-view table.approval-table td {
height: 26px;
padding: 3px 6px;
font-size: var(--text-xs);
font-weight: var(--weight-regular);
text-align: center;
border: none;
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#unipost-unidocu .uni-e-approval-view table.approval-table th {
background-color: var(--color-surface-secondary);
color: var(--text-strong, #334155);
font-weight: var(--weight-bold);
}
#unipost-unidocu .uni-e-approval-view table.approval-table tr:last-child td {border-bottom: none;}
.uni-e-approval-view table.approval-table td pre {margin: 0; text-align: left;}
.uni-e-approval-view .status-chip {
display: inline-block;
padding: 2px 10px;
border-radius: var(--radius-full);
background-color: var(--color-surface-secondary);
border: 1px solid var(--color-border);
font-size: var(--text-2xs);
color: var(--color-text-secondary);
}
.uni-e-approval-view .approval-referrer-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.uni-e-approval-view .approval-referrer-box {
flex: 1;
min-width: 160px;
box-sizing: border-box;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-surface-secondary);
}
.uni-e-approval-view .approval-referrer-box .label {
display: block;
margin-bottom: 4px;
font-size: var(--text-2xs);
color: var(--color-text-secondary);
}
.uni-e-approval-view .approval-referrer-box .value {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: var(--text-2xs);
font-weight: var(--weight-medium);
line-height: 1.4;
color: var(--color-text-primary);
}
/* 참조/열람/협조 인원을 콤마 나열 대신 이름별 칩(태그)으로 감싸 경계를 명확히 구분한다.
referrerList 등은 표시 전용 문자열이라(제출 시 별도 그리드 데이터를 쓰므로) 이 마크업 변경은
결재요청 제출값과 무관하다. 폰트를 한 단계(text-2xs) 줄여 박스 폭 안에서 2열로 배치되게 한다. */
.uni-e-approval-view .approval-referrer-box .value .ref-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 3px 8px;
border-radius: var(--radius-full);
background-color: var(--color-surface-tertiary);
border: 1px solid var(--color-border);
}
.uni-e-approval-view .approval-referrer-box .value:empty::before {
content: '\2014';
color: var(--color-text-tertiary);
}
/* 전표 상세(embedStatement*Template) */
.uni-e-approval-view .unidocu-approval-contents {
box-sizing: border-box;
padding: 16px 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.uni-e-approval-view .unidocu-approval-contents table {
border-collapse: collapse;
width: 100%;
}
#unipost-unidocu .uni-e-approval-view .unidocu-approval-contents table th,
#unipost-unidocu .uni-e-approval-view .unidocu-approval-contents table td {
height: 32px;
padding: 4px 8px;
font-size: var(--text-xs);
font-weight: var(--weight-regular);
border: 1px solid var(--color-border);
background-color: var(--color-surface);
color: var(--color-text-primary);
}
#unipost-unidocu .uni-e-approval-view .unidocu-approval-contents table th {
background-color: var(--color-surface-secondary);
color: var(--color-text-secondary);
font-weight: var(--weight-semibold);
}
#unipost-unidocu .uni-e-approval-view .unidocu-approval-contents .cell-total,
#unipost-unidocu .uni-e-approval-view .unidocu-approval-contents #footer td {
color: var(--color-danger);
font-weight: var(--weight-bold);
}
.uni-e-approval-view .unidocu-approval-contents div {margin-top: 16px !important;}
.uni-e-approval-view .unidocu-approval-contents .approval-card-header {margin: 0 0 12px !important;}
/* 결재선 변경 select+버튼 줄(표준 form-table 내부에 수동 삽입되는 조각) */
#unipost-unidocu .uni-e-approval-view #unidocu-td-changeLine-wrapper,
#unipost-unidocu .uni-e-approval-view #change-line-item-wrapper {
padding: 0 !important;
vertical-align: middle;
}
#unipost-unidocu .uni-e-approval-view #change-line-item {height: 30px;}
#unipost-unidocu td#unidocu-td-DATA {
position: relative;
padding: 10px;
background-color: transparent;
}
#unipost-unidocu td#unidocu-td-DATA a{
pointer-events: auto;
}
#unipost-unidocu td#unidocu-td-DATA::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
pointer-events: none;
}
#unipost-unidocu .jstree-default {
padding: 10px;
color: #222;
border-radius: 8px;
border: 1px solid #ddd !important;
}
#unipost-unidocu .unidocu-mask {z-index: 10000;}
#unipost-unidocu .unidocu-mask .overlay-bg {background-color: rgba(var(--color-surface-rgb, 255, 255, 255), .65);}
.mypage-area .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
position: absolute;
right: -5px;
margin: 0;
}
.mypage-area .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 2px;}
.mypage-area .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,
.mypage-area .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail {
width: 2px;
background-color: #f8f8f8;
}
.mypage-area .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
position: absolute;
bottom: -20px;
margin: 0;
}
.mypage-area .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mypage-area .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mypage-area .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
height: 2px;
margin: 0 auto;
}
.mypage-area {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 6px 8px 8px;
}
.mypage-area * {
font-size: 14px;
list-style: none;
}
.mypage-area .li-summary .count,
.mypage-area .li-amount,
.mypage-area .li-amount span {
font-family: 'SUIT-Bold', sans-serif;
font-weight: bold;
}
.mypage-area .sec-status,
.mypage-area .sec-board {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
.mypage-area section {
position: relative;
width: 100%;
padding: 20px;
border: 1px solid #f4f4f6;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 4px 40px rgba(0,0,0,.06) !important;
box-sizing: border-box;
}
.mypage-area section.uncompleted-area,
.mypage-area section.approval-area,
.mypage-area section.board-area {
width: calc(50% - 6px);
}
.mypage-area .sec-status section:only-child {width: 100%;}
.mypage-area .sec-status.sec-3n section {width: calc(33.33333333% - 8px);}
.mypage-area section h3 {
display: flex;
align-items: center;
font-family: 'SUIT-Bold', sans-serif;
font-size: 15px;
}
.mypage-area section h3::before {
width: 32px;
height: 32px;
margin-right: 12px;
content: '';
border-radius: 8px;
}
.mypage-area section.uncompleted-area h3::before {
background: url('../images/i-intro-doc-notice.svg') 50% 50% no-repeat;
background-size: 16px 18px;
background-color: #ff772b;
box-shadow: 0 8px 10px rgba(255,119,43,.2);
}
.mypage-area section.approval-area h3::before {
background: url('../images/i-intro-approval-check.svg') 50% 50% no-repeat;
background-size: 16px 18px;
background-color: #ff772b;
box-shadow: 0 8px 10px rgba(255,119,43,.2);
}
.mypage-area section.approval-area.sap h3::before {
background: url('../images/i-intro-sap.svg') 50% 50% no-repeat;
background-size: 20px 8px;
background-color: #ff772b;
box-shadow: 0 8px 10px rgba(255,119,43,.2);
}
.mypage-area section.board-area.noti h3::before {
background: url('../images/i-intro-notice.svg') 50% 50% no-repeat;
background-size: 16px 18px;
background-color: #32b4ff;
box-shadow: 0 8px 10px rgba(50,180,255,.2);
}
.mypage-area section.board-area.faq h3::before {
background: url('../images/i-intro-speech-bubble.svg') 50% 50% no-repeat;
background-size: 18px 16px;
background-color: #32b4ff;
box-shadow: 0 8px 10px rgba(50,180,255,.2);
}
.mypage-area section.link-area h3::before {
background: url('../images/i-intro-shortcut.svg') 50% 50% no-repeat;
background-size: 16px;
background-color: #2f77cc;
box-shadow: 0 8px 10px rgba(47,119,204,.2);
}
.mypage-area section .btn-area.top {
position: absolute;
top: 34px;
right: 40px;
}
#unipost-unidocu .btn-area.top .btn_area {
height: auto;
padding: 0;
}
#unipost-unidocu .mypage-area section .btn-area.top .unidocu-button {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 20px;
padding: 0;
font-size: 11px;
color: #aaa;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
#unipost-unidocu .mypage-area section .btn-area.top .unidocu-button:hover {
color: #555;
border-color: #999;
}
.mypage-area section .col-set .cols {
border-bottom: 2px solid rgba(255,119,43,.05);
box-sizing: border-box;
}
.mypage-area section.uncompleted-area .col-set {
display: flex;
gap: 20px;
}
.mypage-area section.uncompleted-area .col-set .cols {width: 50%;}
.mypage-area section.uncompleted-area .col-set .cols:only-child {width: 100%;}
.mypage-area section .li-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 10%;
height: 88px;
margin-top: 20px;
border-radius: 8px;
background-color: rgba(255,119,43,.05);
}
.mypage-area section .li-summary p {
text-align: center;
font-size: 14px;
cursor: pointer;
}
.mypage-area section .li-summary p .count {
display: block;
font-size: 18px;
color: #ff772b;
}
.mypage-area section .li-summary p:hover .count {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.mypage-area section .cols ul {
height: 250px;
margin: 12px 4px;
}
.mypage-area section .cols ul li {
display: flex;
flex-direction: column;
position: relative;
height: 34px;
margin-top: 16px;
cursor: pointer;
}
.mypage-area section.approval-area .cols ul li {cursor: default;}
.mypage-area section .cols ul li:first-child {margin-top: 8px;}
.mypage-area section .cols ul li .li-tt {
overflow: hidden;
position: absolute;
top: auto;
left: 0;
width: calc(100% - 90px);
text-overflow: ellipsis;
white-space: nowrap;
}
.mypage-area section .cols ul li .li-tt .statement-num {margin-right: 12px;}
.mypage-area section .cols ul li .li-tt .statement-num::before {content: '[';}
.mypage-area section .cols ul li .li-tt .statement-num::after {content: ']';}
.mypage-area section .cols ul li .li-amount {
position: absolute;
top: auto;
right: 0;
}
.mypage-area section .cols ul li:hover .li-amount {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.mypage-area section.approval-area .cols ul li:hover .li-amount {text-decoration: none;}
.mypage-area section .cols ul li .li-date {
position: relative;
top: 19px;
font-size: 11px;
color: #aaa;
}
.mypage-area section.approval-area .cols ul li .li-badge {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
left: 0;
width: 52px;
height: 28px;
font-family: 'SUIT-Bold', sans-serif;
font-weight: bold;
font-size: 12px;
border-radius: 8px;
}
.mypage-area section.approval-area .cols ul li .li-badge.step1 {
color: #ff772b;
background-color: rgba(255,119,43,.08);
}
.mypage-area section.approval-area .cols ul li .li-badge.step2 {
color: #31af65;
background-color: rgba(49,175,101,.08);
}
.mypage-area section.approval-area .cols ul li .li-badge.step3 {
color: #ff6666;
background-color: rgba(255,102,102,.08);
}
.mypage-area section.approval-area .cols ul li .li-tt,
.mypage-area section.approval-area .cols ul li .li-date {
left: 72px;
width: calc(100% - 162px);
}
.mypage-area section .cols ul li .btn-more {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 23px;
margin: 0 auto;
font-size: 11px;
color: #aaa;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
}
.mypage-area section .cols ul li .btn-more:hover {
color: #555;
border-color: #999;
}
#unipost-unidocu .mypage-area section a,
#unipost-unidocu .mypage-area section a:hover {
display: flex;
text-decoration: none;
color: #222;
}
.mypage-area section.board-area ul {
width: inherit;
margin-top: 16px;
line-height: 28px;
}
.mypage-area section.board-area li {
display: flex;
align-items: center;
position: relative;
margin-left: 16px;
padding-left: 12px;
cursor: pointer;
}
.mypage-area section.board-area li::before {
position: absolute;
top: 15px;
left: 0;
width: 4px;
height: 4px;
content: '';
border-radius: 50%;
background-color: #bbb;
}
.mypage-area section.board-area li .li-tt {
overflow: hidden;
width: calc(100% - 100px);
text-overflow: ellipsis;
white-space: nowrap;
}
.mypage-area section.board-area li:hover .li-tt {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.mypage-area section.board-area li .li-date {
margin-left: auto;
margin-right: 12px;
color: #aaa;
}
.mypage-area section.link-area {
display: flex;
align-items: center;
}
.mypage-area section.link-area ul {
overflow: auto;
width: calc(100% - 180px);
height: 48px;
margin-left: 80px;
}
.mypage-area section.link-area ul li {
float: left;
margin: 0 8px;
cursor: pointer;
}
.mypage-area section.link-area ul li:first-child {margin-left: 0;}
.mypage-area section.link-area ul li:last-child {margin-right: 0;}
.mypage-area section.link-area ul li .li-tt {
display: flex;
align-items: center;
position: relative;
min-width: 200px;
height: 48px;
padding: 0 52px 0 20px;
border: 1px solid #eee;
border-radius: 8px;
box-sizing: border-box;
}
.mypage-area section.link-area ul li .li-tt::before {
position: absolute;
top: auto;
right: 0;
width: 48px;
height: 48px;
content: '';
background: url('../images/i-arrow.svg') 50% 50% no-repeat;
background-size: 12px 10px;
opacity: .3;
}
.mypage-area section.link-area ul li .li-tt:hover {border-color: #999;}
.mypage-area section.link-area ul li .li-tt:hover::before {opacity: .8;}
/* F4 코드 다이얼로그 가로 레이아웃 오버라이드 */
#dialog-wrapper .unidocu-form-table.unidocu-form-table {
gap: 0;
}
#dialog-wrapper .unidocu-form-row {
display: flex;
flex-direction: column;
gap: 0;
padding-bottom: 0;
border-bottom: none;
}
#dialog-wrapper .unidocu-form-col {
flex-direction: row;
align-items: center;
gap: 0;
height: 28px;
border-bottom: 1px solid var(--color-border);
}
#dialog-wrapper .unidocu-form-col .unidocu-th {
width: 120px;
flex-shrink: 0;
padding-left: 16px;
font-size: 12px;
font-weight: normal;
color: var(--color-text-primary);
border-right: 1px solid var(--color-border);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dialog-wrapper .unidocu-form-col .unidocu-td {
flex: 1;
padding: 2px 8px;
}
/* 금액 요약 영역(#amount-display) — 전역
차액/차변합계/대변합계: 라벨(th)을 박스 왼쪽에 가로 배치,
disabled 회색 하이라이트 제거(흰 배경), 내용 기반 자동 폭 */
/* 하이라이트(회색 밴드) 제거 — .ignore-panel 배경 */
#unipost-unidocu #amount-display .ignore-panel {
background-color: transparent !important;
padding: 0 !important;
}
/* 행: 3등분(1fr) 그리드 → 내용 크기 + 우측 정렬 flex (사이 벌어짐 해소) */
#unipost-unidocu #amount-display .unidocu-form-row {
display: flex !important;
justify-content: flex-end;
gap: 18px;
}
#unipost-unidocu #amount-display .unidocu-form-col {
display: flex !important;
flex-direction: row !important; /* 기존 column 상속을 끊어 라벨을 박스 왼쪽으로 */
align-items: center;
gap: 6px;
grid-column: auto !important;
flex: 0 0 auto; /* 내용 크기만큼만 차지 */
}
#unipost-unidocu #amount-display .unidocu-th {
display: inline-block !important;
white-space: nowrap;
margin: 0;
overflow: visible;
}
#unipost-unidocu #amount-display .unidocu-td { width: auto !important; }
#unipost-unidocu #amount-display .unidocu-input-amount,
#unipost-unidocu #amount-display .unidocu-input-amount.state-disabled {
width: auto !important;
min-width: 92px;
opacity: 1 !important;
}
#unipost-unidocu #amount-display .unidocu-input-amount input,
#unipost-unidocu #amount-display .unidocu-input-amount.state-disabled input {
background-color: var(--color-surface) !important; /* 하이라이트 제거 → 흰 배경 */
field-sizing: content; /* 내용 기반 자동 폭 (Chromium 123+) */
min-width: 60px;
max-width: 240px;
box-sizing: border-box;
}
/* 개인화 설정 (강조색/테마) — 프로필 드롭다운 섹션 */
#setting-area .user-area ul li.perso-menu {
display: block; padding: 10px 4px 4px; cursor: default;
border-top: 1px solid var(--color-border); margin-top: 4px;
}
.perso-menu .perso-label {
font-size: var(--text-2xs); font-weight: 600; color: var(--color-text-tertiary);
letter-spacing: 0.04em; margin-bottom: 7px;
}
.perso-menu .perso-theme {
display: flex; gap: 4px; padding: 3px; margin-bottom: 14px;
background: var(--color-surface-secondary); border: 1px solid var(--color-border);
border-radius: var(--radius-md);
width: 100%; box-sizing: border-box;
}
.perso-menu .perso-mode {
flex: 1; padding: 6px 0; border: none; border-radius: var(--radius-sm);
cursor: pointer; font-size: var(--text-xs); font-weight: 600;
background: transparent; color: var(--color-text-secondary);
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.perso-menu .perso-mode.active { background: var(--color-primary); color: #fff; }
.perso-menu .perso-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.perso-menu .perso-swatch {
width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
border: 2px solid transparent; box-shadow: 0 0 0 2px var(--color-surface) inset;
display: flex; align-items: center; justify-content: center;
}
.perso-menu .perso-swatch.active { border-color: var(--color-text-primary); }
.perso-menu .perso-swatch .perso-check { color: #fff; font-size: 13px; font-weight: 700; opacity: 0; }
.perso-menu .perso-swatch.active .perso-check { opacity: 1; }
/* 글꼴 크기 세그먼트 버튼 (환경설정 > 글꼴) — perso-mode와 동일 룩앤필, .perso-theme 컨테이너 재사용 */
.perso-menu .perso-font {
flex: 1; padding: 6px 0; border: none; border-radius: var(--radius-sm);
cursor: pointer; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
background: transparent; color: var(--color-text-secondary);
display: flex; align-items: center; justify-content: center;
}
.perso-menu .perso-font.active { background: var(--color-primary); color: #fff; }
.perso-font-preview {
border: 1px solid var(--color-border); border-radius: var(--radius-md);
padding: 10px 12px; margin-bottom: 4px;
}
.perso-font-preview-title { font-weight: 700; margin-bottom: 6px; }
.perso-font-preview-row {
display: flex; justify-content: space-between; padding: 4px 0;
color: var(--color-text-secondary); border-top: 1px solid var(--color-border);
}
/* 강조색 직접 선택(RGB) 트리거 — 무지개 그라데이션 원 */
.perso-menu .perso-swatch-picker {
position: relative; overflow: hidden;
background: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #32b4ff, #5856d6, #ff2d78, #ff3b30);
}
.perso-menu .perso-swatch-picker .perso-color-input {
position: absolute; inset: 0; width: 100%; height: 100%;
border: none; padding: 0; opacity: 0; cursor: pointer;
}
.perso-menu .perso-divider { height: 1px; margin: 12px 0 8px; background-color: var(--color-border); }
/* 좌측 메뉴 하단 "설정 · 메뉴 관리" 버튼 */
/* #sider가 position:fixed로 뷰포트를 덮으므로 버튼도 동일하게 fixed 하단 고정 */
.unidocu-menu-settings-btn {
position: fixed; left: 0; bottom: 0; width: 208px; height: 44px; z-index: 4;
display: flex; align-items: center; gap: 10px; box-sizing: border-box;
padding: 0 18px; border: none; background: var(--color-surface, #fff);
color: var(--color-text-secondary); cursor: pointer; font-size: var(--text-sm);
border-top: 1px solid var(--color-border, #E5EAF1);
border-right: 1px solid var(--color-border, #E5EAF1);
}
.unidocu-menu-settings-btn:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.layout-left.left-collapsed .unidocu-menu-settings-btn { width: 48px; padding: 0; justify-content: center; }
.layout-left.left-collapsed .unidocu-menu-settings-btn span { display: none; }
.layout-left.show-as-popup .unidocu-menu-settings-btn { display: none; }
/* 메뉴 설정 모달 */
.unidocu-menu-settings-overlay {
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 2000;
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.unidocu-menu-settings-modal {
width: 560px; max-width: 100%; max-height: 84vh;
background: var(--color-surface); border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden;
}
.unidocu-menu-settings-modal .ms-header {
padding: 20px 24px; border-bottom: 1px solid var(--color-border);
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.unidocu-menu-settings-modal .ms-title {
font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em;
color: var(--color-text-primary);
}
.unidocu-menu-settings-modal .ms-subtitle {
font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 10px;
}
.unidocu-menu-settings-modal .ms-footnote {
font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
color: var(--color-text-secondary); margin-top: 6px;
}
.unidocu-menu-settings-modal .ms-close {
background: transparent; border: none; cursor: pointer;
color: var(--color-text-tertiary); padding: 4px; border-radius: var(--radius-sm); display: flex;
}
.unidocu-menu-settings-modal .ms-close:hover { color: var(--color-text-primary); }
.unidocu-menu-settings-modal .ms-body { flex: 1; overflow-y: auto; padding: 6px 24px 12px; }
/* 그룹/행/토글 스타일 — 독립 모달과 환경설정 > 메뉴 탭 양쪽에서 재사용하므로 범용 클래스로 정의 */
.ms-group-label {
font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-primary);
padding: 16px 2px 6px; letter-spacing: -0.01em; cursor: pointer;
display: flex; align-items: center; gap: 6px;
}
.ms-group-caret { transition: transform .15s ease; flex-shrink: 0; }
.ms-group-label.collapsed .ms-group-caret { transform: rotate(-90deg); }
.ms-row {
display: flex; align-items: center; gap: 12px; padding: 9px 2px;
border-bottom: 1px solid var(--color-gray-100);
background: var(--color-surface);
}
.ms-row.dragging { opacity: 0.4; }
.ms-row-drag {
flex-shrink: 0; display: flex; align-items: center; color: var(--color-text-tertiary);
cursor: grab; touch-action: none;
}
.ms-row-drag:active { cursor: grabbing; }
.ms-row-label {
flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--color-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-row-move { display: flex; gap: 2px; flex-shrink: 0; }
.ms-row-move button {
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--color-border); background: var(--color-surface);
border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-secondary); padding: 0;
}
.ms-row-move button:hover {
background: var(--color-surface-secondary); border-color: var(--color-border-strong);
}
.ms-toggle {
width: 38px; height: 22px; border-radius: var(--radius-full); border: none; cursor: pointer;
background: var(--color-gray-300); position: relative; transition: background 0.15s; flex-shrink: 0; padding: 0;
}
.ms-toggle.on { background: var(--color-primary); }
.ms-toggle-knob {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left 0.15s;
}
.ms-toggle.on .ms-toggle-knob { left: 18px; }
.unidocu-menu-settings-modal .ms-footer {
padding: 14px 24px; border-top: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: space-between;
background: var(--color-surface-secondary);
}
.unidocu-menu-settings-modal .ms-count { font-size: var(--text-xs); color: var(--color-text-secondary); }
.unidocu-menu-settings-modal .ms-count b { color: var(--color-primary); font-weight: 600; }
.unidocu-menu-settings-modal .ms-done {
background: var(--color-primary); color: #fff; border: none; cursor: pointer;
font-size: var(--text-sm); font-weight: var(--weight-medium);
padding: 8px 18px; border-radius: var(--radius-sm);
}
.unidocu-menu-settings-modal .ms-done:hover { background: var(--color-primary-hover); }
.unidocu-menu-settings-modal .ms-footer-actions { display: flex; align-items: center; gap: 8px; }
.unidocu-menu-settings-modal .ms-reset {
display: flex; align-items: center; gap: 5px;
padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
background: var(--color-surface); color: var(--color-text-secondary);
font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.unidocu-menu-settings-modal .ms-reset:hover { background: var(--bg-hover); }
/* 환경설정 > 메뉴 탭: 좌측메뉴 B안(베타) 전환 토글 */
.env-menu-version-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0 12px; }
.env-menu-version-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.env-menu-version-desc { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 2px; }
.env-toggle { display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.env-toggle input { position: absolute; left: -9999px; }
.env-toggle i {
position: relative; display: inline-block; width: 34px; height: 19px;
background: var(--color-gray-300); border-radius: var(--radius-full);
transition: background .15s ease;
}
.env-toggle i::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: left .15s ease;
}
.env-toggle input:checked + i { background: var(--color-primary); }
.env-toggle input:checked + i::after { left: 17px; }
.env-divider { height: 1px; background: var(--color-border); margin: 0 0 12px; }
/* 환경설정 > 메뉴 탭에 임베드된 메뉴 설정 목록 */
.env-menu-settings-note { font-size: 12px; color: var(--color-text-secondary); margin: -2px 0 10px; }
.env-menu-settings-body {
max-height: 440px; overflow-y: auto;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
padding: 0 12px;
}
.env-menu-settings-footer-row {
margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.env-menu-settings-count { font-size: 12px; color: var(--color-text-secondary); }
.env-menu-settings-count b { color: var(--color-primary); font-weight: 600; }
/* 필수값 검증 실패 안내 문구 (입력 박스 바로 아래) */
.unidocu-invalid-hint {
display: flex; align-items: center; gap: 4px; margin-top: 4px;
font-size: var(--text-2xs); color: var(--color-danger);
}
.unidocu-invalid-hint i { font-size: 12px; }
.perso-menu .perso-footnote,
.env-panel .perso-footnote {
font-size: var(--text-2xs); font-weight: 500; line-height: 1.4;
color: var(--color-text-primary);
word-break: keep-all;
}
.env-panel .perso-footnote { margin-top: 10px; }
/* 환경설정 다이얼로그 (탭형: 좌측 카테고리 + 우측 내용) */
/* 제목("환경설정") 아래 구분선 — 이 다이얼로그에만 적용 */
html #unipost-unidocu .ui-dialog.env-settings-ui-dialog .ui-dialog-titlebar {
border-bottom: 1px solid var(--color-border);
height: 35px;
}
/* 다이얼로그 = 가로(탭 | 본문열) 배치. 탭의 오른쪽 구분선이 본문열(내용+하단 닫기) 전체 높이만큼
자동으로 이어지도록 flex row의 기본 stretch를 이용한다 (별도 구분선 없이 세로선 하나로 통일). */
.env-settings-dialog { display: flex; margin: -10px; background: var(--color-surface); }
.env-settings-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.env-settings-footer {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 16px; background: var(--color-surface);
}
.env-close-btn {
padding: 7px 16px; border: 1px solid var(--color-border); border-radius: 8px;
background: var(--color-surface); color: var(--color-text-primary);
font-size: 13px; font-weight: 500; cursor: pointer;
}
.env-close-btn:hover { background: var(--bg-hover); }
.env-settings-tabs {
width: 168px; flex: none; background: var(--color-surface);
border-right: 1px solid var(--color-border); padding: 8px;
box-sizing: border-box;
}
.env-settings-tabs .env-tab {
display: flex; align-items: center; gap: 7px; width: 100%;
padding: 10px 9px; margin-bottom: 2px; border: none; border-radius: 8px;
background: transparent; color: var(--color-text-secondary);
font-size: 14px; font-weight: 500; cursor: pointer; text-align: left;
}
.env-settings-tabs .env-tab svg { flex: none; }
.env-settings-tabs .env-tab.active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 600; }
.env-settings-panel { flex: 1; padding: 18px 22px; box-sizing: border-box; min-height: 300px; }
.env-settings-panel .env-panel { display: none; }
.env-settings-panel .env-panel.active { display: block; }
.env-settings-panel .perso-menu .perso-label:first-child { margin-top: 0; }
.perso-swatches-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; box-sizing: border-box;
}
.perso-swatches-row .perso-swatches { flex: 1; }
.env-reset-btn {
display: flex; align-items: center; gap: 5px; flex-shrink: 0;
padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px;
background: var(--color-surface); color: var(--color-text-secondary);
font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.env-reset-btn:hover { background: var(--bg-hover); }
.env-empty-note { font-size: 13px; color: var(--color-text-tertiary); padding: 8px 0; }
.env-info-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--color-border);
}
.env-info-row:last-child { border-bottom: none; }
.env-info-label { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); flex: none; }
.env-info-value {
font-size: 13px; font-weight: 500; color: var(--color-text-primary);
text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
user-select: text; -webkit-user-select: text; cursor: text;
}
/* 계정 정보: 밀도 높은 2열 그리드 */
.env-section-title {
display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
padding-left: 11px; border-left: 3px solid var(--color-primary);
font-size: 15px; font-weight: 700; color: var(--color-text-primary);
}
.env-info-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px;
}
.env-info-cell {
display: flex; flex-direction: column; gap: 6px;
padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.env-info-cell-wide { grid-column: 1 / -1; }
.env-info-cell .env-info-label { font-size: 12.5px; color: var(--color-text-tertiary); font-weight: 500; }
.env-info-cell .env-info-value {
text-align: left; font-size: 15px; font-weight: 600; color: var(--color-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.env-info-value-muted { color: var(--color-text-secondary); font-weight: 500; }
.env-info-code { color: var(--color-text-tertiary); font-weight: 500; font-size: 12.5px; margin-left: 4px; }
/* CI 이미지 패널 (심볼/로고 업로드) */
/* 환경설정 > 바로가기 탭 */
.env-sc-note { margin-bottom: 14px; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; word-break: keep-all; }
.env-sc-list { display: flex; flex-direction: column; gap: 8px; }
.env-sc-row { display: flex; align-items: center; gap: 8px; }
.env-sc-input { height: 34px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-xs); box-sizing: border-box; }
.env-sc-input[data-sc-field="TEXT"], .env-sc-input[data-sc-field="SUB"] { flex: 0 0 118px; width: 118px; }
.env-sc-input.env-sc-url { flex: 1 1 auto; min-width: 0; }
.env-sc-input:focus { outline: none; border-color: var(--color-primary); }
.env-sc-del { flex: 0 0 30px; width: 30px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-tertiary); cursor: pointer; }
.env-sc-del:hover { border-color: var(--color-danger-text); color: var(--color-danger-text); }
.env-sc-add { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; cursor: pointer; }
.env-sc-add:hover { border-color: var(--color-primary); color: var(--color-primary); }
.env-sc-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
.env-sc-save { height: 34px; padding: 0 20px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-inverse, #fff); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.env-sc-save:hover { filter: brightness(0.95); }
.env-brand { display: flex; flex-direction: column; gap: 6px; }
.env-brand-row {
display: flex; align-items: center; gap: 16px;
padding: 16px 0; border-bottom: 1px solid var(--color-border);
}
.env-brand-preview {
flex: none; width: 56px; height: 56px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background-color: var(--color-surface-secondary);
background-repeat: no-repeat; background-position: center; background-size: contain;
position: relative;
}
.env-brand-preview-wide { width: 120px; }
.env-brand-preview.is-empty::after {
content: '기본값'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--color-text-tertiary);
}
.env-brand-info { flex: 1; min-width: 0; }
.env-brand-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.env-brand-desc { margin-top: 4px; font-size: 12px; color: var(--color-text-tertiary); line-height: 1.5; }
.env-brand-mode { display: flex; gap: 14px; margin-top: 8px; }
.env-brand-mode label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; }
/* 전역 *{appearance:none} 로 네이티브 라디오가 안 보이므로 이 라디오만 복원 */
.env-brand-mode input[type=radio] {
-webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
width: 14px; height: 14px; margin: 0; cursor: pointer;
accent-color: var(--color-primary);
}
.env-brand-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.env-brand-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 32px; padding: 0 14px; border-radius: var(--radius-md);
background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600;
cursor: pointer; border: none;
}
.env-brand-btn:hover { filter: brightness(0.95); }
.env-brand-reset {
height: 32px; padding: 0 12px; border-radius: var(--radius-md);
background: transparent; border: 1px solid var(--color-border);
color: var(--color-text-secondary); font-size: 13px; font-weight: 500; cursor: pointer;
}
.env-brand-reset:hover { background: var(--color-surface-secondary); }
/* 비밀번호 변경 다이얼로그 (changePasswordDialogTemplate / changePasswordBeforeLoginDialogTemplate)
구