koj/PM_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기 PM 소스 전체 업로드

Browse Source
This commit is contained in:
koj729
2026-06-12 17:14:03 +09:00
commit 4e33c9a02a
1769 changed files with 377797 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
views/main/css/font.css Normal file
View File

@@ -0,0 +1,17 @@
/* 폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap");
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/arial-2');
@import url('https://fonts.cdnfonts.com/css/konexy-personal-use');
@import url('https://fonts.cdnfonts.com/css/toxigenesis');
/* @font-face {
font-family: 'S-CoreDream-3Light';
src: url('../font/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
} */
/* 폰트적용 */
/* * { font-family: 'Noto Sans KR', 'Protest Riot', 'Gowun Dodum', sans-serif; } */

90
views/main/css/reset.css Normal file
View File

@@ -0,0 +1,90 @@
@charset "utf-8";
/* Copyright Ⓒ Hanmaceng Corp. All Rights Reserved. */
/* 기술개발센터 김건우A 연구원 b25013@hanmaceng.co.kr */
/* -- ↓ -- style -- ↓ -- */
/* html, body 초기화 ===== ===== ===== ===== ===== */
html, body { overflow: hidden; margin: 0; width: 100%; height: 100%; position: fixed;}
/* 이미지 드래그 방지 ===== ===== ===== ===== ===== */
img { pointer-events: none; user-select: none; }
/* 기존 reset.css에 있던 내용 ===== ===== ===== ===== ===== */
img, picture, video, canvas, svg { display: block; max-width:100%; }
/* 여백 초기화 ===== ===== ===== ===== ===== */
body,
div,
ul,
li,
dl,
dd,
dt,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
fieldset,
legend,
p,
select,
table,
th,
td,
tr,
textarea,
button,
form,
figure,
figcaption { margin: 0; padding: 0; line-height: 1; }
/* a 링크 초기화 ===== ===== ===== ===== ===== */
a { color: inherit; text-decoration: inherit; }
/* 폰트 스타일 초기화 (기울임) ===== ===== ===== ===== ===== */
em,
address { font-style: normal; }
/* 블릿기호 초기화 ===== ===== ===== ===== ===== */
ul,
li,
ol { list-style: none; }
/* 제목 태그 초기화 ===== ===== ===== ===== ===== */
h1,
h2,
h3,
h4,
h5,
h6 { font-size: inherit; font-weight: inherit; }
/* 버튼 초기화 ===== ===== ===== ===== ===== */
button, input { border: none; font: inherit; }
button { background: #fff; }
/* 테이블 테두리 초기화 ===== ===== ===== ===== ===== */
table { border-collapse: collapse; border-spacing: 0; }
/* 콜아웃 초기화 ===== ===== ===== ===== ===== */
blockquote,
q {quotes: none; }
/* 콜아웃 따옴표 초기화 ===== ===== ===== ===== ===== */
blockquote:before,
blockquote:after,
q:before,
q:after {content: '';content: none; }
/* box-sizing 초기화 ===== ===== ===== ===== ===== */
*,
*::before,
*::after { box-sizing: border-box; }
/* 요소 스타일 초기화 ===== ===== ===== ===== ===== */
article, aside, footer, header, nav, section { display: block; }

418
views/main/css/style.css Normal file
View File

@@ -0,0 +1,418 @@
@import url('/main/css/reset.css');
@import url('/main/css/font.css');
@import url('/main/css/style_archive.css');
@import url('/main/css/style_official_doc.css');
@import url('/main/css/style_overview.css');
html { font-size: 1rem; }
@media screen and (max-width: 1920px) {
html { font-size: 0.8333333vw; }
}
@media screen and (max-width: 1024px) {
html { font-size: 1.3333333vw; }
body > .footer .right { display: none !important; }
}
:root {
--color-red: #F21D0D;
--color-pink: #E8175E;
--color-magenta: #B92ED1;
--color-purple: #6D3DC2;
--color-navy: #4255bd;
--color-blue: #0D8DF2;
--color-cyan: #03AEFC;
--color-green: #4DB251;
--color-yellow: #FFBF00;
--color-orange: #FF9800;
--color-dahong: #FF3D00;
--color-brown: #A0705F;
--color-iron: #7F7F7F;
--color-steel: #688897;
--color-red-light: #FEE9E7;
--color-pink-light: #FDE8EF;
--color-magenta-light: #F8EBFB;
--color-purple-light: #F1ECF9;
--color-navy-light: #EDEEF9;
--color-blue-light: #E7F4FE;
--color-cyan-light: #E6F7FF;
--color-green-light: #EEF8EE;
--color-yellow-light: #FFF9E6;
--color-orange-light: #FFF5E6;
--color-dahong-light: #FFECE6;
--color-brown-light: #F6F1EF;
--color-iron-light: #F3F3F3;
--color-steel-light: #F0F4F5;
--color-red-medium: #FAA59E;
--color-pink-medium: #F6A2BF;
--color-magenta-medium: #E3ABEC;
--color-purple-medium: #C5B1E7;
--color-navy-medium: #B3BBE5;
--color-blue-medium: #9ED1FA;
--color-cyan-medium: #9ADFFE;
--color-green-medium: #B8E0B9;
--color-yellow-medium: #FFE599;
--color-orange-medium: #FFD699;
--color-dahong-medium: #FFB199;
--color-brown-medium: #D9C6BF;
--color-iron-medium: #CCCCCC;
--color-steel-medium: #C3CFD5;
/* 프라이머리컬러스케일 */
--primary-lv0: #E9EEED;
--primary-lv1: #D2DCDB;
--primary-lv2: #A5B9B6;
--primary-lv3: #789792;
--primary-lv4: #4B746D;
--primary-lv5: #1E5149;
--primary-lv6: #1B443D;
--primary-lv7: #193833;
--primary-lv8: #162A27;
--primary-lv9: #141E1D;
--header-scrollbar-thumb-color: #E9EEED00; --header-scrollbar-thumb-hover-color: var(--primary-lv0);
--box-shadow: #0c0c0db3 0rem 0.5rem 1rem -0.25rem;
--text-shadow-color-fff: #fff;
--text-shadow-fff: -0.0625rem 0rem var(--text-shadow-color-fff), 0rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem 0rem var(--text-shadow-color-fff), 0rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem -0.0625rem var(--text-shadow-color-fff), 0.0625rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem 0.0625rem var(--text-shadow-color-fff);
--text-shadow-color-000: #000;
--text-shadow-000: -0.0625rem 0rem var(--text-shadow-color-000), 0rem 0.0625rem var(--text-shadow-color-000), 0.0625rem 0rem var(--text-shadow-color-000), 0rem -0.0625rem var(--text-shadow-color-000), -0.0625rem -0.0625rem var(--text-shadow-color-000), 0.0625rem 0.0625rem var(--text-shadow-color-000), 0.0625rem -0.0625rem var(--text-shadow-color-000), -0.0625rem 0.0625rem var(--text-shadow-color-000);
--log-highlight: none;
/* --thumbnail-gap: 0.5rem; */
--thumbnail-gap: 1.25rem;
--thumbnail-size: 0 0 calc((100% - 4 * var(--thumbnail-gap)) / 5);
--thumbnail-size-value: 5;
/* --thumbnail-aspect-ratio: 1 / 1; */
--thumbnail-aspect-ratio: 1.4141 / 1;
--thumbnail-ratio: contain;
--overlay-scale-transform: none;
--expired-warn: expired-warn 1.5s ease-in-out infinite;
}
* { font-family: 'Pretendard Variable', 'Pretendard'; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.icon { width: 1rem; height: 1rem; }
/* 유저 마우스 커서 */
.cursor { position: absolute; width: 1.875rem; height: 1.875rem; pointer-events: none; z-index: 30; }
.cursor .wrap { display: flex; justify-content: center; align-items: center; position: absolute; width: max-content; height: 100%; top: 0.9375rem; left: 100%; }
.cursor .wrap .user-text { font-size: 0.875rem; font-weight: bold; color: #fff; padding: 0.25rem 0.4rem; border-radius: 0.25rem; }
/* 위치 이동 커버 */
.relocate-cover { display: none; height: 100%; position: absolute; z-index: 50; background: #000000cc; }
.relocate-cover.list-viewer-cover .container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5rem; width: 100%; height: 100%; }
.relocate-cover.list-viewer-cover .container * { color: #fff; font-size: 1rem; }
.relocate-cover.list-viewer-cover .container .notice-wrap .text { font-size: 1.25rem; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .path-wrap { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.relocate-cover.list-viewer-cover .container .path-wrap .path { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.relocate-cover.list-viewer-cover .container .path-wrap .path .key { font-size: 1.25rem; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .path-wrap .path .value { white-space: pre-wrap; }
.relocate-cover.list-viewer-cover .container .btn-wrap { display: flex; gap: 1rem; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn { width: 9.375rem; padding: 0.5rem; border: 0.0625rem solid #555; border-radius: 0.25rem; cursor: pointer; text-align: center; font-weight: bold; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn:hover { background: linear-gradient(0deg, #1e5149 0%, #12312c 100%); }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn { background: #fff; color: #000; }
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn:hover { background: #000; color: #fff; }
/* 마르퀴 효과 */
.marquee-track-wrap { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: fit-content; height: inherit; animation: scroll-marquee var(--duration, 10s) linear infinite; will-change: transform; }
.marquee-track { display: flex; align-items: center; flex-shrink: 0; gap: 0.5rem; margin: 0; padding: 0 2rem; white-space: nowrap; }
.marquee-track img { max-width: none; height: 0.75rem; }
/* .marquee-track .pm { opacity: 0.6; }
.marquee-track .category { opacity: 0.6; } */
.marquee-track .project-name { color: #fff; font-weight: 600; }
.marquee-track .text { opacity: 0.6; color: #fff; font-family: "Aldrich"; padding-top: 0.125rem; }
/* 프로젝트 비활성화 표시 */
body > .project-inactive-sign { display: none; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; border: 0.3rem solid #f00; z-index: 999999; pointer-events: none; }
body > .project-inactive-sign .text { font-size: 5rem; font-weight: bold; color: #f003; }
/* 배너 공지 */
body > .banner-notice-area { display: none; justify-content: center; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: #000; position: relative; top: 0; z-index: 10; overflow: hidden; white-space: nowrap; }
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); background-size: 5.5rem 5.5rem; animation: hazard-stripe-flow 2s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 5s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 3s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; }
body > .banner-notice-area .content { position: relative; z-index: 12; }
body > .banner-notice-area .content .text-wrap { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; }
body > .banner-notice-area .content .text-wrap .text { padding: 0.1rem 0.4rem; background: #000; border-radius: 0.25rem; font-size: 1.2rem; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: var(--text-shadow-000); }
/* 헤더 */
body > .header { display: flex; justify-content: space-between; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: var(--primary-lv5); position: fixed; top: 0; z-index: 10; }
body > .header * { color: #FFF; }
body > .header > .left { display: flex; align-items: center; width: 16.25rem; height: inherit; padding: 0 1rem; }
body > .header > .left .title { display: flex; overflow: hidden; position: relative; width: 100%; height: inherit; white-space: nowrap; cursor: pointer; }
body > .header > .center { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; height: inherit; border-left: 0.0625rem solid #4b746d; background: #1e5149; z-index: 20; }
body > .header > .center .wrap { display: flex; align-items: center; }
body > .header > .center .wrap .menu-tab { display: flex; align-items: center; height: 100%; padding-top: 0.25rem; position: relative; }
body > .header > .center .wrap .menu-tab .btn { display: flex; align-items: center; height: 100%; margin: 0 0.125rem; position: relative; }
body > .header > .center .wrap .menu-tab .btn:first-child { margin-left: 0; }
body > .header > .center .wrap .menu-tab .btn:last-child { margin-right: 0; }
body > .header > .center .wrap .menu-tab .btn:hover { cursor: pointer; }
body > .header > .center .wrap .menu-tab .btn:not(.selected):hover .wrap { background: #4b746d; }
body > .header > .center .wrap .menu-tab .btn .wrap { display: flex; align-items: center; gap: 0.25rem; position: relative; width: max-content; height: 100%; padding: 0.09375rem 0.25rem; pointer-events: none; border-radius: 0.25rem; }
body > .header > .center .wrap .menu-tab .btn .wrap .image { width: 1rem; height: 1rem; }
body > .header > .center .wrap .menu-tab .btn .wrap .name-text { flex: 1; min-width: 0; font-size: 0.875rem; color: #fff; white-space: pre-wrap; }
body > .header > .center .wrap .menu-tab .btn.selected .wrap { background: #e9eeed; }
body > .header > .center .wrap .menu-tab .btn.selected .wrap .name-text { color: #1e5149; }
body > .header > .center .wrap .menu-tab .overview-btn .wrap .image { background: url('/main/img/header/header-page-icon.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .folder-btn .wrap .image { background: url('/main/img/header/header-folder-icon.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .official-doc-btn .wrap .image { background: url('/main/img/header/header-official-doc.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .model-btn .wrap .image { background: url('/main/img/header/header-model.svg') no-repeat center/contain; }
body > .header > .center .wrap .menu-tab .overview-btn,
body > .header > .center .wrap .menu-tab .official-doc-btn,
body > .header > .center .wrap .menu-tab .model-btn { display: none; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled { cursor: none; pointer-events: none; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap { background: #999; }
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap .name-text { color: #ccc; }
body > .header > .center .left.wrap { align-items: flex-end; gap: 1rem; flex: 1; min-width: 0; height: inherit; padding-left: 1rem; border-right: 0.0625rem solid #4b746d; position: relative; }
body > .header > .center .left.wrap .menu-tab { overflow-x: scroll; overflow-y: hidden; }
body > .header > .center .left.wrap .menu-add { display: none; align-items: center; min-width: 1.25rem; max-width: 1.25rem; height: inherit; }
body > .header > .center .left.wrap .menu-add .add-btn { display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; }
body > .header > .center .left.wrap .menu-add .add-btn:hover { cursor: pointer; background: #3e8d80; }
body > .header > .center .left.wrap .menu-add .add-btn .image { width: 1rem; height: 1rem; background: url('/main/img/header/header-menu-add.svg') no-repeat center/contain; pointer-events: none; }
body > .header > .center .right.wrap { justify-content: flex-end; gap: 0.375rem; width: max-content; height: inherit; padding: 0 1rem; position: relative; }
body > .header > .center .right.wrap .menu-tab { padding-bottom: 0.25rem; }
body > .header > .center .right.wrap .menu-tab .official-doc-btn .ai-logo { width: 1.75rem; height: 1.25rem; background: url('/main/img/ai_logo.svg') no-repeat center/contain; }
body > .header > .right { display: flex; justify-content: space-between; align-items: center; width: max-content; height: inherit; border-left: 0.0625rem solid #4b746d; }
body > .header > .right .connected-users { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; height: 100%; padding: 0 1rem; background: #18413A; }
body > .header > .right .connected-users .title { color: #789792; font-size: 0.75rem; pointer-events: none; }
body > .header > .right .connected-users .count { color: #ccc; font-size: 0.75rem; pointer-events: none; }
body > .header > .right .connected-users:hover { cursor: pointer; }
body > .header > .right .connected-users:hover .count { color: #fff; text-decoration: underline; }
/* 헤더 가로 스크롤바 */
.header-scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; }
.header-scrollbar::-webkit-scrollbar-track { background-color: transparent; }
.header-scrollbar::-webkit-scrollbar-thumb { background-color: var(--header-scrollbar-thumb-color); border-radius: 1rem; background-clip: content-box; border: 0.0625rem solid transparent; }
.header-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--header-scrollbar-thumb-hover-color); cursor: pointer; }
.header-scrollbar::-webkit-scrollbar-corner { background: transparent; }
/* 헤더 스크롤 버튼 */
.scroll-btn { display: none; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 11; }
.scroll-btn:hover { cursor: pointer; background: #3e8d80; }
.scroll-left { right: 2.75rem; }
.scroll-right { right: 1rem; }
.scroll-left .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; }
.scroll-right .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; transform: rotate(180deg); }
/* 메인 */
body > .main { display: none; width: 100%; height: calc(100dvh - 2.25rem - 2.25rem); position: absolute; top: 2.25rem; color: #111; }
/* 전체 스크롤바 */
.scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; }
.scrollbar::-webkit-scrollbar-track { background-color: transparent; }
.scrollbar::-webkit-scrollbar-thumb { background-color: #999; border-radius: 1rem; background-clip: content-box; }
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: #666; cursor: pointer; }
.scrollbar::-webkit-scrollbar-corner { background: transparent; }
/* 푸터 */
body > .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; padding: 0 1rem; background: #fff; border-top: 0.0625rem solid #ddd; position: fixed; bottom: 0; z-index: 10; }
body > .footer * { font-size: 0.75rem; }
body > .footer .left { display: flex; align-items: center; flex: 1; gap: 1rem; min-width: 0; height: 100%; }
body > .footer .left .footer-separator { height: 0.75rem; border-right: 0.0625rem solid #777; }
body > .footer .left .wrap { display: flex; align-items: center; height: 100%; }
/* body > .footer .left .wrap .title { font-weight: 600; color: #444; }
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; } */
body > .footer .left .wrap .title { font-weight: 600; color: #444; }
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; }
body > .footer .left .wrap.size-wrap { justify-content: center; gap: 0.5rem; }
body > .footer .left .wrap.size-wrap .size-text { display: flex; align-items: center; gap: 0.2rem; }
body > .footer .left .wrap.size-wrap .size-text div { color: #777; }
body > .footer .left .wrap.size-wrap .size-text .numerator.over { color: #f00; }
body > .footer .left .wrap.size-wrap .size-bar .base { width: 6.25rem; height: 0.25rem; background: #e4e4e4; border-radius: 0.25rem; }
body > .footer .left .wrap.size-wrap .size-bar .value { width: 0; height: 0.25rem; background: #777; border-radius: 0.25rem; }
body > .footer .left .wrap.size-wrap .size-bar .value.over { background: #f00; }
body > .footer .left .wrap.size-wrap .size-percent { color: #777; text-shadow: var(--text-shadow-fff); }
body > .footer .left .wrap.size-wrap .size-percent.over { color: #f00; }
body > .footer .left .wrap.log-wrap { gap: 0.5rem; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log { display: flex; align-items: center; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log .log-item { display: flex; align-items: center; width: 100%; gap: 0.375rem; animation: var(--log-highlight); }
body > .footer .left .wrap.log-wrap .latest-log .log-item > div { display: flex; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .text { color: #777; }
body > .footer .left .wrap.log-wrap .latest-log .log-item > .log-separator { height: 0.75rem; border-right: 0.0625rem solid #ccc; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .log { flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
body > .footer .left .wrap.log-wrap .latest-log .log-item .log .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body > .footer .right { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: max-content; }
body > .footer .right p { color: #777; }
/* 초기 프로그레스 */
/* 원래는 none인데 flex로 변경?? */
.init-progress { z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; background: #eeeeee99; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); overflow: hidden; }
.init-progress .text { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.init-progress .text span { color: #111; font-size: 1rem; font-weight: 500; }
.init-progress .text img { width: 1.5rem; height: 1.5rem; }
/* 파일 프로그래스(임시) */
.file-progress { z-index: 99999; display: none; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; animation: progress-background 3s infinite; overflow: hidden; }
.file-progress .file-progress-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; width: 100%; height: 100%; }
.file-progress .file-progress-wrap .title { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.file-progress .file-progress-wrap .title .title-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.file-progress .file-progress-wrap .title .title-wrap span { color: #111; font-size: 1rem; font-weight: 500; }
.file-progress .file-progress-wrap .title .title-wrap img { width: 1rem; height: 1rem; }
.file-progress .file-progress-wrap .title .warn { display: none; }
.file-progress .file-progress-wrap .title .warn span { color: #777; font-size: 0.875rem; font-weight: 300; }
.file-progress .file-progress-wrap .text { display: flex; flex-direction: column; align-items: center; }
.file-progress .file-progress-wrap .text span { color: #111; font-size: 1rem; font-weight: 300; }
.file-progress .file-progress-wrap .size-progress { display: flex; flex-direction: column; align-items: center; }
.file-progress .file-progress-wrap .size-progress .size { display: flex; align-items: flex-start; gap: 1rem; }
.file-progress .file-progress-wrap .size-progress .percentage { display: flex; align-items: center; }
.file-progress .file-progress-wrap .size-progress > div > span { color: #111; font-size: 0.875rem; font-weight: 300; }
.permission-min-dev { display: none; }
.permission-min-sub-master { display: none; }
.permission-min-security-worker { display: none; }
.permission-min-worker { display: none; }
/* 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
body>.header>.center .wrap .menu-tab .download-btn .wrap .image { background: url('/main/img/header/icon__download-folder--primary-lv-3.svg') no-repeat center/contain; }
body>.header>.center .wrap .menu-tab .download-btn .wrap .download-reddot { background: url('/main/img/header/icon__download-reddot--color-dahong.svg') no-repeat center/contain; width: 0.375rem; height: 0.375rem; position: absolute; top: 0; right: -0.125rem; }
/* // 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
/* */
/* */
/* */
/* 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
.download-modal { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 61; width: 100%; height: 100%; background: #00000099; }
.download-modal-wrap { display: flex; flex-direction: column; position: relative; background: #fff; border: 0.0625rem solid #aaa; margin: auto; border-radius: 0.25rem; width: 30rem; height: 40rem; box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.16); }
.download-modal__head { display: flex; align-items: center; padding: 0.5rem 0.5rem 0.5rem 1rem; gap: 1rem; border-bottom: 0.0625rem solid #ddd; }
.download-modal__head_subtitle { flex-grow: 1; }
.download-modal__head_close:hover { cursor: pointer; }
.download-modal__body { flex-grow: 1; height: 0; display: flex; flex-direction: column; }
.download-modal__body_top { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; }
.download-modal__body_top_name { flex-grow: 1; }
.download-modal__body_top_time { width: 5.625rem; }
.download-modal__body_top_status { width: 2rem; text-align: right; }
.download-modal__body_list { display: flex; flex-direction: column; overflow-y: scroll; overflow-x: hidden; padding-right: 0.5rem; padding-left: 1rem; height: 0; flex-grow: 1; }
.download-modal__body_list_item { padding: 0.5rem 0; display: flex; align-items: flex-start; gap: 0.5rem; border-bottom: 0.0625rem solid #ddd; }
.download-modal__body_list_item_text { flex-grow: 1; width: 17.5rem; word-break: break-all; }
.download-modal__body_list_item_time { width: 5.625rem; color: #FF3D00; }
.download-modal__body_list_item_status { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; width: 2rem; display: flex; justify-content: flex-end; }
.download-modal__foot { display: flex; align-items: center; justify-content: center; padding: 1rem; border-top: 0.0625rem solid #ddd; }
.download-modal__head_title { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.download-modal__head_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
.download-modal__body_top_name { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.download-modal__body_top_time { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.download-modal__body_top_status { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.download-modal__body_list_item_text_title { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.download-modal__body_list_item_text_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
.download-modal__body_list_item_time { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }
/* // 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
/* */
/* */
/* */
/* --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
.--text__color-dahong { font-weight: 500; color: #FF3D00; }
.--button__xsmall-icon { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; pointer-events: auto;}
.--button__xsmall-icon:hover { cursor: pointer; }
.--button__medium { display: flex; align-items: center; justify-content: center; padding: 0.5rem; width: 10rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; pointer-events: auto;}
.--button__medium:hover { cursor: pointer; }
.--disable { opacity: 20%; }
.--disable:hover { cursor: not-allowed; pointer-events: auto;}
.--icon { width: 1rem; height: 1rem; pointer-events: auto;}
/* // --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
@keyframes scroll-marquee {
from { transform: translateX(0); }
to { transform: translateX(var(--translateX)); }
}
@keyframes rotate-image {
100% { transform: rotate(-360deg); }
}
@keyframes vibration {
from { transform: translateX(-0.0625rem); }
to { transform: translateX(0.0625rem); }
}
@keyframes progress-background {
0% { background-color: #fff; }
50% { background-color: #d2dcdb; }
100% { background-color: #fff; }
}
@keyframes log-highlight {
0% { opacity: 1; }
100% { opacity: 0.1; }
}
@keyframes hazard-stripe-flow {
0% { background-position: 0 0; }
100% { background-position: -5.5rem 0; }
}
@keyframes hazard-stripe-pulse {
0%, 100% { opacity: 0; }
30%, 70% { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes expired-warn {
0% { background: #f9613b; }
50% { background: #e9eeed; }
100% { background: #f9613b; }
}

1342
views/main/css/style_archive.css Normal file
View File

File diff suppressed because it is too large Load Diff

427
views/main/css/style_official_doc.css Normal file
View File

@@ -0,0 +1,427 @@
/******************************************************************************************************************************************************************/
/***************************************************************************************************************************************************** main *******/
/******************************************************************************************************************************************************************/
/* main */
.official-doc-main { height: calc(100dvh - 4.5rem); width: 100dvw; position: absolute; top: 2.25rem; overflow-y: hidden; overflow-x: auto; }
/* 디테일 */
.official-doc-main ul { display: flex; flex-direction: column; height: calc(100% - 4.625rem); overflow-y: scroll; overflow-x: hidden; padding: 0.0625rem; }
.official-doc-main li { display: flex; flex-direction: column; margin-left: 0.2875rem; margin-right: 0.0625rem; }
.official-doc-main hr { margin: 0; border: none; border-top: 0.0625rem solid #ddd; }
.official-doc-main p { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; color: #777; }
.official-doc-main h2 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
.official-doc-main h3 { font-size: 0.875rem; font-weight: 550; line-height: 1.25rem; }
.official-doc-main h4 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
.official-doc-main h5 { font-size: 0.75rem; font-weight: 550; line-height: 1.25rem; }
.official-doc-main h6 { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.official-doc-title { gap: 0.5rem; color: var(--primary-lv5); align-items: center; }
.official-doc-title h3 { color: var(--primary-lv5); font-size: 0.875rem; font-weight: 500; }
.official-doc-subtitle { gap: 0.5rem; }
.official-doc-subtitle h6,
.official-doc-subtitle .official-doc-tone-down { color: #8FA8A4; }
/* 파일 리스트 컨테이너 */
.official-doc-list-container { flex-grow: 1; z-index: 12; }
/* 파일 리스트 바디 영역 */
.official-doc-main-body { height: 100%; }
/* 파일 리스트 영역 */
.official-doc-file { flex-grow: 1; height: calc(100% - 2.25rem); position: relative; }
/* 수/발신영역 */
.official-doc-top,
.official-doc-bottom { min-width: 71.125rem; height: calc(50% - 0.25rem); background-color: #fff; }
/* 파일 리스트 미리보기 영역 */
.official-doc-preview { display: flex; flex-direction: column; width: 100%; min-width: 40rem; max-width: 40rem; height: 100%; border-left: 0.0625rem solid #ddd; }
/* 모달 미리보기 영역 */
.official-doc-modal-preview { background-color: #eee; border-radius: 0 0.25rem 0.25rem 0; }
.official-doc-select-group { display: flex; gap: 0.8rem; }
.official-doc-select-group-item { display: flex; gap: 0.2rem; }
.official-doc-select-group-item select { min-width: 10rem; padding: 0 0.25rem; font-size: 0.8rem; }
.official-doc-select-group-item option { font-size: 0.8rem; }
.official-doc-header { justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #1E5149; position: relative; z-index: 1; background-color: #fff; }
.official-doc-header--left,
.official-doc-header--right { gap: 1rem; }
.official-doc-main li,
.official-doc-title,
.official-doc-subtitle,
.official-doc-header,
.official-doc-header--left,
.official-doc-header--right,
.official-doc-category { display: flex; }
/* .official-doc-file--number,
.official-doc-file--office-number,
.official-doc-file--date,
.official-doc-file--state { display: flex; } */
.official-doc-file--number,
.official-doc-file--office-number,
.official-doc-file--date,
.official-doc-file--from,
.official-doc-file--to,
.official-doc-file--state { display: flex; align-items: center; }
.official-doc-file--number { width: 2.75rem; padding-left: 0.5rem !important; }
.official-doc-file--office-number { width: 6rem; }
.official-doc-file--date { width: 6rem; }
.official-doc-file--office-number,
.official-doc-file--date { gap: 0.25rem; padding: 0.5rem; }
.official-doc-file--from { width: 4rem; padding: 0.5rem; }
.official-doc-file--to { width: 4rem; padding: 0.5rem; }
.official-doc-file--title { flex-grow: 1; width: 0; padding: 0.5rem; display: flex; align-items: center; }
.official-doc-file--state { min-width: 5.5rem; padding: 0.25rem; padding-right: 1rem; }
.doc-required-info { font-size: 0.875rem; margin-bottom: 0.5rem; }
.doc-required-star { color: #FF3D00; }
.official-doc-file--state .official-doc-file--stateText { display: flex; align-items: center; font-weight: bold; pointer-events: none; text-shadow: var(--text-shadow-fff); padding: 0.5rem 0; }
.official-doc-file--state .official-doc-file--stateText.viewable { color: #4db251; font-size: 0.875rem; }
.official-doc-file--state .official-doc-file--stateText.unsupport { color: #f21d0d; font-size: 0.875rem; }
.official-doc-border { border-bottom: 0.0625rem solid #ddd; margin: 0 0.5rem; }
.official-doc-list { display: flex; gap: 0.5rem; font-size: 0.75rem; position: relative; background-color: #fff; margin-left: 0.325rem; margin-right: 0.25rem; }
.official-doc-main li.box-selected { box-shadow: #789792 0 0 0 0.0625rem, #0c0c0d0d 0 0 0.25rem 0.0625rem, #0c0c0d38 0 1rem 1rem -0.5rem; z-index: 3; }
.official-doc-main .doc-list-item.item-selected { background-color: #BCCBC8 !important; }
.official-doc-main .doc-list-item:hover { cursor: pointer; background: #e9eeed; }
.official-doc-main .official-doc-file-info { display: flex; gap: 0.5rem; }
.official-doc-file .attach-item-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; }
.official-doc-file .attach-item-wrap .info { display: flex; align-items: end; gap: 0.5rem; }
.attach-item-wrap.attach .doc-attach--left .symbol { margin-right: 0.5rem; }
.attach-item-wrap.attach .doc-attach--left .text--doc-attach { font-size: 0.75rem; font-weight: 500; padding: 0 0.25rem; border-radius: 0.25rem; background-color: #fff; color: #6d3dc2; border: 0.0625rem solid #c5b1e7; line-height: 1.25rem; }
.attach-item-wrap.attach .doc-attach--left .text--doc-version { font-size: 0.75rem; font-weight: bold; padding: 0 0.25rem; border-radius: 0.25rem; background-color: #fff; color: #0d8df2; border: 0.0625rem solid #9ed1fa; line-height: 1.25rem; }
.attach-item-wrap.attach .doc-attach--right { margin-left: 0.25rem; }
.official-doc-file--attach { min-width: 4.5rem; padding: 0.5rem; padding-right: 1rem; }
.attach-item-wrap .state { min-width: 4.25rem; }
.attach-item-wrap .state .state-text { font-size: 0.875rem; font-weight: bold; pointer-events: none; text-shadow: var(--text-shadow-fff); }
.attach-item-wrap .state.viewable .state-text { color: #4db251; }
.attach-item-wrap .state.unsupport .state-text { color: #f21d0d; }
.attach-item-wrap .state .convert-btn { display: flex; justify-content: center; align-items: center; width: auto; outline: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 0.2rem 0.3rem; transition: 0.3s; }
.attach-item-wrap .state .convert-btn div { pointer-events: none; }
.attach-item-wrap .state .convert-btn .convert-btn-image { width: 1rem; height: 1rem; background: url('/main/img/archive/convert_gray.svg') no-repeat center/contain; }
.attach-item-wrap .state .convert-btn .convert-btn-text { color: #000; font-weight: bold; padding-left: 2px; font-size: 0.75rem; }
.attach-item-wrap .state .convert-btn:hover,
.attach-item-wrap .state.working .convert-btn { background: #000; }
.attach-item-wrap .state .convert-btn:hover .convert-btn-image,
.attach-item-wrap .state.working .convert-btn .convert-btn-image { background: url('/main/img/archive/convert_white.svg') no-repeat center/contain; }
.attach-item-wrap .state.working .convert-btn .convert-btn-image { animation: rotate-image 1.5s linear infinite; }
.attach-item-wrap .state .convert-btn:hover .convert-btn-text,
.attach-item-wrap .state.working .convert-btn .convert-btn-text { color: #fff; }
.official-doc-list > div { font-weight: bold; }
.official-doc-list > div:hover { background: #bccbc8; cursor: pointer; }
.official-doc-list > .doc-sort-asc::after { content: ''; width: 1rem; height: 1rem; background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }
.official-doc-list > .doc-sort-desc::after { content: ''; width: 1rem; height: 1rem; transform: rotate(180deg); background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }
/* 초기화면 도움말 */
.official-doc-main .official-doc-instructions { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; z-index: 99; background-color: #000000b8; }
.official-doc-main .official-doc-instructions img { max-width: 90vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn { display: flex; align-items: center; position: absolute; top: 1rem; right: 1rem; z-index: 99; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio { display: flex; justify-content: end; align-items: center; margin-right: 1rem; gap: 0.35rem; color: #fff; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox input[type="checkbox"] { display: none; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox span { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox input[type="checkbox"]:checked + span { background-image: url(/main/img/officialDoc/icon-checkbox-bccbc8.svg); width: 1.25rem; height: 1.25rem; }
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .xs-btn-instructions { cursor: pointer; display: flex; justify-content: center; align-items: center; background-color: #fff; min-height: 2rem; max-height: 2rem; min-width: 2rem; max-width: 2rem; border-radius: 0.25rem; border: 0.15rem solid #1e5149; }
/* 맨 위에 공통헤더 */
.official-doc-main-header { display: flex; align-items: center; height: 2.3rem; padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: #E9EEED; border-bottom: 0.0625rem solid #a5b9b6; color: #1E5149; justify-content: space-between; }
.official-doc-main-header .official-doc-head { display: flex; align-items: center; height: 2.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: #E9EEED; border-bottom: 0.0625rem solid #BCCBC8; justify-content: space-between; }
.official-doc-main-header .official-doc-head--left { display: flex; gap: 1rem; }
.official-doc-main-header .official-doc-head-space,
.official-doc-head--right { display: flex; gap: 0.5rem; align-items: center; }
.official-doc-head--right { color: #000; }
.official-doc-main-header .official-doc-head--right-line { height: 2.25rem; width: 0.0625rem; background-color: #BCCBC8; }
.official-doc-main-header .doc-custom-select-wrapper { min-width: 5rem; position: relative; font-family: sans-serif; color: #111; font-size: 0.75rem; font-weight: 500; font-family: 'pretendard'; }
.official-doc-main-header .doc-custom-select { display: flex; justify-content: space-between; align-items: center; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; padding: 0.25rem 0.5rem; position: relative; }
.official-doc-main-header .doc-custom-select .selected { display: block; padding-left: 0.25rem; font-size: 0.75rem; }
.official-doc-main-header .doc-custom-select>.icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
.official-doc-main-header .doc-custom-select .options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 0.0625rem solid #ddd; border-top: none; border-radius: 0 0 0.25rem 0.25rem; z-index: 10; }
.official-doc-main-header .doc-custom-select.open .options { display: block; }
.official-doc-main-header .option { padding: 0.5rem; cursor: pointer; font-size: 0.75rem; }
.official-doc-main-header .option:hover { background-color: #eee; }
.official-doc-main-header .xs-btn-type { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; display: flex; align-items: center; }
.official-doc-main-header .xs-btn-type-icon { display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem 0 0.125rem; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
.official-doc-main-header .official-doc-tab-on { background-color: #1E5149; color: #fff; }
/* 드래그앤드롭 영역 */
.official-doc-main-body .doc-dnd-area { z-index: 41; display: none; flex-direction: column; justify-content: center; align-items: center; height: calc(100% - 2.25rem - 2.25rem - 2.25rem); gap: 0.5rem; position: absolute; background: #e9eeeddd; border: 0.125rem solid #a5b9b6; border-radius: 0.25rem; }
.official-doc-main-body .doc-dnd-area .doc-image { width: 3rem; height: 3rem; background: url('/main/img/archive/upload_out_dnd.svg') no-repeat center/contain; pointer-events: none; }
.official-doc-main-body .doc-dnd-area .doc-text { color: #a5b9b6; font-size: 0.875rem; font-weight: 500; pointer-events: none; }
.official-doc-main-body .doc-dnd-area .doc-warn { color: #a5b9b6; font-weight: 500; pointer-events: none; }
/* ai 로딩 페이지 */
.doc-ai-loading { z-index: 10000; display: none; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #eee; overflow: hidden; }
.doc-ai-loading .text { display: flex; flex-direction: row; align-items: center; margin-top: 1.5rem; color: #1e5149; font-weight: bold; justify-content: center; }
/* 화면 위아래 슬라이더 */
.official-doc-file .official-doc-center-division { min-width: 71.125rem; /* max-width: 71.125rem; */ height: 0.5rem; background-color: #D2DCDB; position: relative; z-index: 2; width: 100%; transform: translate(0rem, 0rem); }
.official-doc-file .official-doc-center-xs-division { height: 0.5rem; background-color: #BCCBC8; position: absolute; z-index: 1; width: 100%; transform: translate(0rem, 0rem); }
/* 버튼 */
.official-doc-file .official-doc-division-button { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem; border-radius: 0.25rem; background-color: #D2DCDB; width: 1.625rem; height: 1.625rem; z-index: 15; cursor: ns-resize; }
.official-doc-file .official-doc-division-xs-button { position: relative; top: 100%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem; border-radius: 0.25rem; background-color: #BCCBC8; width: 2rem; height: 1rem; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/******************************************************************************************************************************************************************/
/**************************************************************************************************************************************************** modal *******/
/******************************************************************************************************************************************************************/
/* 모달 공통 */
.official-doc-modal { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 53; border: 0.0625rem solid #111; border-radius: 0.25rem; background-color: #fff; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); /* min-width: 40rem; */ }
.official-doc-modal-background { display: none; z-index: 52; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(17, 17, 17, 0.6); overflow: hidden; }
.official-doc-modal ul { display: flex; flex-direction: column; height: calc(100% - 4.625rem); overflow-y: auto; overflow-x: hidden; }
.official-doc-modal li { display: flex; flex-direction: column; }
.official-doc-modal hr { margin: 0; border: none; border-top: 0.0625rem solid #ddd; }
.official-doc-modal p { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; color: #777; }
.official-doc-modal h2 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
.official-doc-modal h3 { font-size: 0.875rem; font-weight: 550; line-height: 1.25rem; }
.official-doc-modal h4 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.official-doc-modal h5 { font-size: 0.75rem; font-weight: 550; line-height: 1.25rem; }
.official-doc-modal h6 { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.official-doc-modal,
.official-doc-modal-wraper,
.official-doc-modal-block,
.official-doc-modal-body,
.official-doc-modal-header,
.official-doc-type-wrap { display: flex; }
.official-doc-modal>.icon { position: absolute; right: 0.5rem; top: 0.5rem; cursor: pointer; }
.official-doc-modal .official-doc-modal-block { flex-direction: column; min-width: 26rem; width: 30dvw; }
.official-doc-modal .official-doc-modal-body { flex-direction: column; flex-grow: 1; gap: 0.5rem; padding: 0.5rem 1rem; }
.official-doc-modal .official-doc-modal-header { color: #111; gap: 0.5rem; padding: 0.5rem; border-bottom: 0.0625rem solid #ddd; align-items: center; }
.official-doc-modal .official-doc-modal-header .official-doc-modal-header--end img { pointer-events: auto; cursor: pointer; width: 1rem; height: 1rem; }
.official-doc-modal .official-doc-modal-header .text-green { color: #1E5149; }
.official-doc-modal .official-doc-modal-footer { padding: 1rem 0; text-align: center; }
.official-doc-modal .official-doc-modal-preview { min-width: 26rem; width: 30dvw; border-left: 0.0625rem solid #ddd; }
.official-doc-modal .official-doc-modal-preview iframe { flex-grow: 1; }
.official-doc-modal .radio-wrapper { display: flex; gap: 0.5rem; cursor: pointer; user-select: none; margin: 0.125rem 0; align-items: center; min-width: 6rem; }
.official-doc-modal .radio-wrapper input[type="radio"] { display: none; }
.official-doc-modal .custom-radio { width: 1rem; height: 1rem; border: 0.0625rem solid #ddd; border-radius: 100%; position: relative; }
.official-doc-modal .radio-wrapper input[type="radio"]:checked+.custom-radio { border-color: #1E5149; }
.official-doc-modal .custom-radio::after { content: ""; position: absolute; display: none; top: 20%; left: 20%; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #1E5149; }
.official-doc-modal .radio-wrapper input[type="radio"]:checked+.custom-radio::after { display: block; }
.official-doc-modal .radio-wrapper .custom-radio-text { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
.official-doc-modal .radio-wrapper.disabled { cursor: not-allowed; }
.official-doc-modal .radio-wrapper input[type="radio"]:disabled + .custom-radio + .custom-radio-text { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.official-doc-modal .official-doc-negative-btn,
.official-doc-modal .official-doc-positive-btn { width: 10rem; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; height: 2.25rem; }
.official-doc-modal .official-doc-negative-btn { background-color: #fff; border: 0.0625rem solid #ddd; }
.official-doc-modal .official-doc-positive-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
.official-doc-modal .official-doc-positive-btn h3 { color: #fff; }
.official-doc-modal .doc-close { width: 1rem; height: 1rem; background: url(/main/img/officialDoc/icon-close.svg) no-repeat center / contain; cursor: pointer; transition: 0.2s; }
/* 공문 ai 선택 모달 */
.official-doc-modal.official-doc-ai-choice-modal { display: none; }
/* 공문 파일 추가/수정/입력 모달 */
.official-doc-modal.official-doc-upsert-modal { display: none; }
.official-doc-modal .official-doc-type-wrap { align-items: center; }
.official-doc-modal .official-doc-type-wrap p { min-width: 5rem; }
.official-doc-modal .official-doc-type-wrap input { color: #FF3D00; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; width: 100%; }
.official-doc-modal .official-doc-type-wrap input:focus { outline: 0.125rem solid #414141; }
.official-doc-modal .official-doc-type-wrap input[type="text"] { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; width: 100%; font-weight: 300; }
.official-doc-modal .official-doc-type-wrap input[type="date"] { position: relative; -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/main/img/officialDoc/icon__calendar--aaa.svg) no-repeat; background-position: right 0.25rem center; padding-right: 0.5rem; background-size: 1rem 1rem; padding-right: 2rem; border: 0.0625rem solid #ddd; box-sizing: border-box; height: 1.75rem; border-radius: 0.25rem; width: 100%; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 300; }
.official-doc-modal .official-doc-type-wrap input[type="date"]::-webkit-calendar-picker-indicator, .official-doc-modal input[type=time]::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: transparent; }
.official-doc-modal .official-doc-type-wrap input[type="date"]:hover { border: 0.063rem solid #111; cursor: pointer; background-color: #eee; }
.official-doc-modal .official-doc-type-wrap input:read-only { color: #111; }
.official-doc-modal .official-doc-type-wrap input:read-only:focus { outline: none; }
.official-doc-modal .official-doc-type-wrap textarea { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem 0.5rem; color: #FF3D00; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; width: 100%; /* min-width: 81.5%; max-width: 81.5%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ }
.official-doc-modal .doc-modal-custom-select-wrap { position: relative; font-family: sans-serif; color: #111; font-size: 0.75rem; font-weight: 500; font-family: 'pretendard'; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select { display: flex; justify-content: space-between; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; padding: 0.25rem 0.5rem; position: relative; margin-left: 0.5rem; width: 9.5rem; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select { display: flex; align-items: center; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select .selected { display: block; font-size: 0.75rem; color: #FF3D00; font-weight: 300; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select > .icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select .options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 0.0625rem solid #ddd; border-top: none; border-radius: 0 0 0.25rem 0.25rem; z-index: 51; }
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select.open .options { display: block; z-index: 51; }
.official-doc-modal .doc-select-icon-wrap { min-width: 1rem; min-height: 1rem; }
.official-doc-modal .option { padding: 0.5rem; cursor: pointer; font-size: 0.75rem; color: #FF3D00; font-weight: 300; }
.official-doc-modal .option:hover { background-color: #eee; }
/* 공문 설정 세팅 모달 */
.official-doc-modal.official-doc-setting-modal { display: none; flex-direction: column; }
.official-doc-setting-modal-header { color: #111; gap: 0.5rem; padding: 0.5rem; border-bottom: 0.0625rem solid #aaa; }
.official-doc-dori { display: flex; justify-content: space-between; padding-left: 1rem; font-size: 0.875rem; font-weight: 500; }
.official-doc-dori>img { cursor: pointer; }
.official-doc-modal-body-s { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 300; }
.official-doc-cell-div { display: flex; margin-bottom: 0.5rem; }
.official-doc-cell-0--title p { padding: 0 2rem 0 0; min-height: 2.7rem; }
.official-doc-cell-0--title.top { margin-top: 2.1875rem; }
.official-doc-cell-0--title.top p { margin-top: 2.85rem; }
.official-doc-cell-0--title.bottom p { margin-top: 1.785rem; }
.official-doc-cell-1--title,
.official-doc-cell-2--title { padding-bottom: 0.55rem; }
.official-doc-cell-division-border { margin: 1rem 0; width: 11rem; height: 0.0625rem; background-color: #ddd; }
.official-doc-short-border { width: 5rem !important; }
.official-doc-long-border { width: 100% !important; }
.official-doc-cell-1,
.official-doc-cell-2 { display: flex; flex-direction: column; gap: 0.85rem; width: 10rem; }
.official-doc-cell-1 hr,
.official-doc-cell-2 hr { width: 100%; height: 0.0625rem; background-color: #ddd; }
.official-doc-cell-1--body-1,
.official-doc-cell-1--body-2,
.official-doc-cell-2--body-1,
.official-doc-cell-2--body-2 { display: flex; gap: 1rem; }
.official-doc-cell-1--body-1 p,
.official-doc-cell-1--body-2 p,
.official-doc-cell-2--body-1 p,
.official-doc-cell-2--body-2 p { min-width: 4.5rem; }
.official-doc-cell-center-division { background-color: #ddd; width: 0.1rem; margin-right: 1.8rem; }
.official-doc-inline-list { display: flex; flex-direction: column; gap: 0.5rem; width: 10rem; }
.official-doc-inline { display: flex; align-items: center; gap: 0.5rem; }
.official-doc-inline input { outline: none; box-shadow: none; background-color: inherit; border: none; }
.official-doc-inline input[type="text"] { color: #FF3D00; border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.25rem 1rem; font-size: 0.875rem; width: 8.25rem; font-weight: 300; }
.official-doc-inline input[type="text"]:focus { color: #FF3D00; outline: 0.0625rem solid #111; }
.official-doc-inline input::placeholder { color: #FF3D00; font-weight: 300; line-height: 1.25rem; }
.official-doc-inline-add-btn { /* width: 13.875rem; */ background-color: #E9EEED; border-radius: 0.25rem; border: 0.0625rem solid #BCCBC8; display: flex; align-items: center; justify-content: center; color: #1E5149; padding: 0.125rem 0; cursor: pointer; margin-right: 1.75rem; font-size: 0.875rem; font-weight: 300; }
.official-doc-line-text { display: flex; gap: 0.5rem; }
.official-doc-line-set { min-width: 100%; height: 0.0625rem; background-color: #ddd; }
.official-doc-line-icon { display: flex; padding-left: 3.675rem; }
.official-doc-line-icon img { height: 1.125rem; }
.official-doc-modal .custom-checkbox input[type="checkbox"] { display: none; }
.official-doc-modal .custom-checkbox span { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; }
.official-doc-modal .custom-checkbox input[type="checkbox"]:checked + span { background-image: url(/main/img/officialDoc/icon-checkbox.svg); width: 1.25rem; height: 1.25rem; }
.official-doc-setting-modal .xs-btn { display: flex; justify-content: center; align-items: center; background-color: #fff; min-height: 1.25rem; max-height: 1.25rem; min-width: 1.25rem; max-width: 1.25rem; border-radius: 0.25rem; border: 0.0625rem solid #ddd; cursor: pointer; }
.order-base { display: flex; flex-direction: column; gap: 0.5rem; }
.order-target { display: flex; flex-direction: column; gap: 0.5rem; }
.other-order-base { display: flex; flex-direction: column; gap: 0.5rem; }
.other-order-target { display: flex; flex-direction: column; gap: 0.5rem; }
/* 공문 컨텍스트메뉴 모달 */
.official-doc-modal.official-doc-context-modal .official-doc-modal-block { width: 100%; }
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body { display: flex; text-align: center; align-items: center; }
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body .text-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 0.875rem; line-height: 1.6; }
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body input { width: 30rem; padding: 0.3125rem; color: #FF3D00; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; border: none; }
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body input:focus { outline: 0.125rem solid #414141; }
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body .input-wrap .warn { font-size: 0.875rem; margin-top: 0.5rem; color: #f21d0d; font-weight: bold; text-align: center; white-space: pre; line-height: 1.2; animation: vibration 0.1s; animation-iteration-count: 6; }
/* 파일 미리보기 영역 */
.official-doc-preview .official-doc-preview--notice { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; color: #777; font-size: 1.125rem; font-weight: bold; }
.official-doc-preview .official-doc-preview--container { height: 100%; display: none; flex-direction: column; }
.official-doc-preview .official-doc-preview--container .viewer-header { width: 100%; background: #e9eeed; border-bottom: 0.0625rem solid #a5b9b6; padding: 0 1rem; }
.official-doc-preview .official-doc-preview--container .viewer-header .wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 2.25rem; }
.official-doc-preview .official-doc-preview--container .viewer-header .text-wrap { display: flex; align-items: center; gap: 0.5rem; }
.official-doc-preview .official-doc-preview--container .viewer-header .text-wrap .title { font-weight: bold; color: #1E5149; }
.official-doc-preview .official-doc-preview--container .viewer-header .btn { display: flex; align-items: center; height: 1.25rem; background: #fff; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.2rem; transition: 0.3s; }
.official-doc-preview .official-doc-preview--container .viewer-header .btn:hover { background: #000; cursor: pointer; }
.official-doc-preview .official-doc-preview--container .viewer-header .btn:hover .text { color: #fff; }
.official-doc-preview .official-doc-preview--container .viewer-wrap { display: flex; height: 100%; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer iframe { width: 100%; height: 100%; border: none; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer iframe body { background-color: 383838; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-unsupport-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-unsupport-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-convert-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-convert-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-text-wrap { display: flex; justify-content: center; align-items: center; padding: 0.125rem 1rem; width: 100%; height: 100%; overflow-y: scroll; }
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-text-wrap .viewer-text { width: 100%; height: 100%; padding: 0 1rem; white-space: pre-wrap; font-size: 0.875rem; }
.official-doc-preview .official-doc-preview--container .info-wrap { display: flex; flex-direction: column; width: 100%; position: relative; transition: 0.3s; max-height: 500px; }
.official-doc-preview .official-doc-preview--container .info-wrap.close { max-height: 0px; }
.official-doc-preview .official-doc-preview--container .info-wrap.open { max-height: 500px; }
.official-doc-preview .official-doc-preview--container .info-wrap .separator { position: absolute; width: 100%; border-top: 0.0625rem solid #A5B9B6; z-index: 20; }
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn { display: flex; align-items: center; justify-content: center; gap: 0.25rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); padding: 0 0.25rem; background: #E9EEED; border: 0.0625rem solid #A5B9B6; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; transition: 0.2s; }
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn .image { width: 1rem; height: 1rem; background: url('/main/img/archive/toggle_bottom_darkgreen.svg') no-repeat center/contain; transition: 0.2s; pointer-events: none; transform: rotate(0deg); }
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn .text { color: #1E5149; transition: 0.2s; }
.official-doc-preview .official-doc-preview--container .info-wrap.close .separator .toggle-btn .image { transform: rotate(180deg); }
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn:hover { cursor: pointer; background: #bccbc8; }
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn:hover .image { scale: 1.25; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata { display: flex; width: 100%; height: fit-content; min-height: 0; border-top: 0.0625rem solid #a5b9b6; position: relative; overflow-x: hidden; overflow-y: scroll; transition: 0.3s; }
.official-doc-preview .official-doc-preview--container .info-wrap.close .metadata { opacity: 0; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 1.75rem); margin: 0 0.75rem 0 1rem; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line1 .item,
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item { border-bottom: 0.0625rem solid #ddd; padding: 0.5rem 0; align-items: center; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item { border-bottom: 0.0625rem solid #ddd; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item,
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line4 .item { padding: 0.5rem 0; align-items: center; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item { width: 30% !important; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item { display: flex; gap: 1rem; width: 100%; height: 100%; align-items: center; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .key { display: flex; justify-content: space-between; white-space: nowrap; color: #777; min-width: 3rem; max-width: 3rem; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .key span { flex: 0 0 auto; font-weight: 300; line-height: 1.25rem; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .value-wrap { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 4rem); height: 100%; font-weight: 500; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line1 .item .value-wrap .value,
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item .value-wrap .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25rem; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item .value-wrap .value,
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line4 .item .value-wrap .value { overflow: hidden; overflow-y: auto; max-height: 5rem; width: 100%; line-height: 1.25rem; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn { display: flex; align-items: center; height: 1.25rem; outline: 0.0625rem solid #aaa; border-radius: 0.25rem; padding: 0.125rem 0.25rem; transition: 0.3s; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn .text { transition: 0.3s; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover { background: #000; cursor: pointer; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover .text { color: #fff; }
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .textarea:disabled { color: #000; width: 100%; height: 100%; padding: 0.125rem 0; resize: none; border: none; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1rem; background: transparent; z-index: 30; }
/******************************************************************************************************************************************************************/
/********************************************************************************************************************************************** contextmenu *******/
/******************************************************************************************************************************************************************/
/* 컨텍스트메뉴 */
.official-doc-contextmenu { display: none; flex-direction: column; position: absolute; min-width: 12.5rem; background: #fff; user-select: none; border: 0.0625rem solid #ddd; border-radius: 0.25rem; z-index: 40; }
.official-doc-contextmenu div { font-size: 0.875rem; z-index: 40; }
.official-doc-contextmenu .official-doc-contextmenu-container { width: 100%; height: 100%; position: relative; padding: 0.25rem; box-shadow: var(--box-shadow); font-weight: 300; z-index: 40; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-padding { padding: 0.25rem; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item { display: flex; align-items: center; position: relative; color: var(--primary); cursor: pointer; transition: 0.3s; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item:hover { background: #d4dddb80; border-radius: 0.25rem; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item.disabled { background: #aaa; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item.disabled:hover { cursor: not-allowed; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn { width: 100%; background: none; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn:hover { background: none; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item img { width: 1.25rem; height: 1.25rem; margin-right: 0.875rem; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item input[type="file"] { display: none; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn label { display: flex; align-items: center; cursor: pointer; width: 100%; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; color: #111; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap .name { font-size: 0.875rem; color: #111; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap>div { pointer-events: none; }
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap .shortcut { color: #777; }
/******************************************************************************************************************************************************************/
/********************************************************************************************************************************************** z-index *******/
/******************************************************************************************************************************************************************/
/*
.official-doc-header 1
.official-doc-main li.box-selected 3
.official-doc-main-header .doc-custom-select .options 10
.official-doc-list-container 12
.official-doc-main-body .doc-dnd-area 41
.official-doc-file .official-doc-center-division 2
.official-doc-file .official-doc-center-xs-division 1
.official-doc-file .official-doc-division-button 1
.official-doc-file .official-doc-division-xs-button 1
.official-doc-preview-container .official-doc-center-xs-division 1
.official-doc-preview-container .official-doc-division-button 15
.official-doc-preview-container .official-doc-division-xs-button 1
.official-doc-contextmenu 40
.official-doc-contextmenu div 40
.official-doc-contextmenu .official-doc-contextmenu-container 40
.official-doc-modal-background 52
.official-doc-modal 53
.official-doc-modal .doc-modal-custom-select .options 51
.official-doc-modal .doc-modal-custom-select.open .options 51
.official-doc-main .official-doc-instructions 99
.official-doc-instructions .doc-instructions-close-btn 99
.doc-ai-loading 10000
*/

232
views/main/css/style_overview.css Normal file
View File

@@ -0,0 +1,232 @@
.overview-main { display: none; }
.overview { display: flex; background-color: #fff; max-width: 100dvw; height: calc(100dvh - 4.5rem); position: absolute; overflow-x: auto; overflow-y: hidden; }
.overview-box-1 { min-width: 38rem; max-width: 38rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: calc(100dvh - 4.5rem); overflow-x: hidden; overflow-y: auto; }
.overview-box-2 { min-width: 38rem; max-width: 38rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: calc(100dvh - 4.5rem); overflow-x: hidden; overflow-y: auto; }
.overview-box-3 { display: flex; flex-direction: column; gap: 0.5rem; min-width: 43.5rem; max-width: 43.5rem; overflow-x: hidden; overflow-y: auto; }
.overview .section-division-border { background-color: #E9EEED; min-width: 0.25rem; }
.overview .overview-box--wrap { display: flex; gap: 0.5rem; }
.overview .type--wrap { display: flex; gap: 0.5rem;}
.overview .type--wrap-space-evenly { display: flex; justify-content: space-evenly; width: 100%; gap: 1rem; }
.overview .box-header { display: flex; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid var(--primary-lv2); color: var(--primary-lv5); align-items: center; height: 2.25rem; }
.overview .box-header--right { display: flex; gap: 0.5rem;}
.overview .box-header h5 { color: #111; }
.overview .box-header--right-set { display: flex; gap: 0.5rem; align-items: center; }
.overview .box-header img { width: 1.375rem; height: 1.375rem; }
.overview .type--wrap-left { min-width: 3.5rem; }
.overview .wrap-2-set { display: flex; flex-direction: column; width: 50%; gap: 1rem; }
.overview .wrap-3-set { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.overview .wrap-3-set .type--wrap-right { width: 100%; }
.overview .box-body { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; flex-grow: 1;}
.overview .box-body.facility-size .type--wrap-right { flex: 1; overflow: hidden;}
.overview .box-body.facility-size .facility-overview {width: 95%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.overview .scroll-box.facility-size .box-body { gap : 0.5rem; padding: 0.5rem 1rem;}
.overview .box-body.business-purpose {width: 95%; height: 50%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25rem; white-space: normal;}
.overview .calendar { width: 100%; height: fit-content; }
.overview .xs-btn-type { color: #000; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
.overview h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--primary-lv5); }
.overview h4 { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; }
.overview h5 { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; }
.overview h6 { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
.overview p { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview .overview-table-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.overview .overview-table-container table { border-collapse: collapse; width: 100%; }
.overview .overview-table-container td { padding: 0.25rem; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; min-width: 7rem;}
.overview .overview-table-container th { padding: 0.25rem; text-align: left; color: #777; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; min-width: 7rem;}
.overview .overview-table-container th.sticky,.overview .overview-table-container .sticky { position: sticky; left: 0; background-color: #fff; color: #777; font-size: 0.75rem !important; font-weight: 300; line-height: 1.25rem; min-width: 5rem !important; }
.overview .total { color: #111 !important; }
.overview .host { color: #111; font-weight: 500; }
.overview .xs-btn { background-color: #fff; padding: 0.125rem; border: 0.0663rem solid #ddd; border-radius: 0.25rem; display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; }
.overview .overview-map { width: 100%; height: 100%; border-radius: 0.25rem; border: 0.0625rem solid #ddd; object-fit: contain; }
.overview .location-map { width: 100%; height: 100%; border-radius: 0.25rem; border: 0.0625rem solid #ddd; object-fit: contain; }
.overview select { border: none; border-bottom: 0.0625rem solid #ddd; font-family: 'Pretendard'; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; color: #111; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.overview select:focus { outline: none; box-shadow: none; border-color: inherit; }
.overview .cursor-btn { cursor: pointer; }
.overview .issue-box { width: 100%; height: 100%;}
/*교류시간*/
.overview .exchange-time { display: none;}
.overview .top-section,.overview .top-section--div { display: flex; gap: 0.5rem; }
.overview .top-section { gap: 1rem; }
.overview .top-section--div { gap: 0.5rem; }
.overview .bottom-section-1,.bottom-section-2,.bottom-section-3,.bottom-section-4,.timetable { display: flex; align-items: center; }
.overview .timetable-block { width: 1.75rem; height: 1.75rem; border: 0.0625rem solid #ddd; display: flex;}
.overview .timetable-half-block { width: 0.875rem; height: 1.687rem; display: flex;}
.overview .timetable-quarter-block { width: 0.4375rem; height: 1.687rem;}
.overview .bottom-section { position: relative; }
.overview .bottom-section-1 p, .overview .bottom-section-4 p { text-overflow: unset; overflow: visible; }
.overview .bottom-section h4 { width: 3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview .time-bar { position: absolute; margin-left: 1.3rem; top: -0.3rem; display: flex; align-items: center; flex-direction: column; }
.overview .time-bar .bar { height: 3.8rem; width: 0.063rem; background-color: #111; }
.overview .time-bar .kst-time,.other-country-time { min-width: 3.5rem; background: #1E5149; border: 0.0625rem solid #ddd; color: #fff; border-radius: 0.25rem; padding: 0 0.25rem; }
.overview .type-em-red { color: var(--color-dahong); font-weight: 300; font-size: 0.75rem; }
/*캘린더*/
.overview #calendar { display: inline-block; text-align: left; width: 100%; height: 100%; overflow-y: auto; }
.overview .calendar-header { display: flex; justify-content: center; gap: 2rem; border-bottom: 0.0625rem solid #dddddd; padding-top: 0.5rem; position: relative; align-items: center; }
.overview .calendar-header .add-schedule-btn { position: absolute; right: 1.25rem; cursor: pointer; margin-bottom: 0.5rem; }
.overview .calendar-header .add-schedule-btn img { width: 1.375rem; height: 1.375rem; }
.overview .calendar-header .calendar-btn { cursor: pointer; margin-bottom: 0.5rem; }
.overview .calendar-header .calendar-btn img { width: 3.5rem; height: 1.875rem; }
.overview .schedule { width: 100%; display: flex; align-items: center; justify-content: space-evenly; cursor: pointer; }
.overview .schedule.start_date { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; margin-left: 0.5rem; }
.overview .schedule.end_date { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; margin-left: -0.5rem; }
.overview .schedule .color { display: flex; align-items: center; width: 10%; margin-left: 0.5rem; }
.overview .schedule .time { font-size: 0.625rem; font-weight: 300; color: #777777; }
.overview .schedule .title { font-size: 0.75rem; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90%; }
.overview .schedule .schedule-point { margin-bottom: 0.25rem; }
.overview .schedule:hover { cursor: pointer; }
.overview .remain-schedules { margin-left: 0.5rem; }
.overview .month-header { font-size: 0.875rem; margin-bottom: 0.5rem; font-weight: 500; }
.overview .days-of-week { display: flex; justify-content: space-around; font-weight: 300; padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.75rem; }
.overview .days-of-week .days-of-week-day {font-size: 0.75rem;}
.overview .days-of-week .sunday { color: #FF3D00; font-weight: 400; }
.overview .days { display: flex; flex-wrap: wrap; justify-content: flex-start; outline: 0.0625rem solid #ddd; }
.overview .day { width: calc(100% / 7); height: 5.5rem; border-right: 0.0625rem solid #ddd; border-bottom: 0.0625rem solid #ddd; padding-top: 0.25rem; text-overflow: ellipsis; overflow: hidden; }
.overview .day.sunday { color: var(--color-dahong); font-weight: 300; }
.overview .day.saturday { color: var(--color-blue); font-weight: 300; }
.overview .day-today { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.overview .day.today .day-today { width: 1.25rem; height: 1.25rem; background-color: var(--primary-lv5); color: #fff; border-radius: 0.25rem; display: flex; justify-content: center; padding: 0.25rem 0.5rem; margin-left: 0.375rem; }
.overview .day .holiday { font-size: 0.625rem; display: flex; margin-left: 0.375rem; overflow: hidden; align-items: center; gap: 0.25rem; }
.overview .day .holiday img { width: 0.875rem; height: 0.875rem; margin-right: 0.125rem; object-fit: contain;}
.overview .work-hour { background-color: #E9EEED; color: #1E5149; display: flex; align-items: center; justify-content: center; }
.overview .scroll-box { display: flex; overflow-y: hidden; overflow-x: auto; padding: 0 1rem; }
.overview .scroll-box::-webkit-scrollbar { display: none; }
.overview .section-box { background-color: #E9EEED; border: 0.0625rem solid #BCCBC8; border-radius: 0.25rem; min-width: 20rem; margin-right: 0.5rem; }
.overview .section-box--header { color: var(--primary-lv5); padding: 0.5rem 1rem 0 1rem; }
.overview .scroll-box.facility-size h4 {width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.overview .box.issue {display: flex; flex-direction: column; flex-grow: 1;}
.overview .box.issue .wrap {display: flex; flex-direction: column; flex-grow: 1; position: relative; padding: 0.5rem;}
.overview .box.issue .message {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.85rem; color: #777; font-size: 0.75rem; font-weight: 300; text-align: center; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.overview .box.issue .message.active {color: #000; z-index: 1;}
.overview .box.issue .issue-content {width: 100%; resize: none; position: relative; border : 0.063rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; padding: 0.5rem 1rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; flex-grow: 1;}
/* overview-modal */
.overview-modal-wrapper { z-index: 50; position: absolute; width: 100vw; height: 100dvh; background-color: rgb(17, 17, 17, 0.6); display: none; top: 0; }
.overview-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0.0625rem solid #111; border-radius: 0.25rem; background-color: #ffffff; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); z-index: 51; width: max-content; min-width: 40rem; max-height: calc(100dvh - 4rem)}
.overview-modal.section-left {max-width: 40rem;}
.overview-modal.section-middle {max-width: 53rem;}
.overview-modal .xs-btn-type-icon { display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem 0 0.125rem; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
.overview-modal .xs-btn-type-icon img { width: 1rem; height: 1rem; }
.overview-modal .overview-box--wrap { display: flex; gap: 0.5rem; }
.overview-modal .box-header { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 0.0625rem solid var(--primary-lv2); color: var(--primary-lv5); font-weight: 500; font-size: 0.875rem; align-items: center; }
.overview-modal .box-header--right { display: flex; gap: 0.5rem; /* margin-right: 2rem; */}
.overview-modal .box-header h5 { color: #111; }
.overview-modal .box-header--right-set { display: flex; gap: 0.5rem; }
.overview-modal .wrap-2-set { display: flex; flex-direction: column; width: 50%; gap: 0.5rem; }
.overview-modal .wrap-3-set { display: flex; flex-direction: column; width: 33.3333%; gap: 0.5rem; }
.overview-modal .wrap-4-set { display: flex; width: 25%; gap: 0.5rem; align-items: center; }
.overview-modal .box { display: flex; flex-direction: column; gap: 0.5rem; }
.overview-modal .box-body { padding: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.overview-modal .type--wrap { display: flex; align-items: center; gap: 0.5rem; }
.overview-modal .type--wrap-left { min-width: 3.5rem; font-weight: 300; color: #777; font-size: 0.75rem; display: flex; }
.overview-modal .type--wrap-right {width: 100%;}
.overview-modal .wrap-3-set>.type--wrap>.type--wrap-right { width: 100%; width: 12.5rem; }
.overview-modal .overview-box--wrap { display: flex; gap: 0.0875rem; }
.overview-modal h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.overview-modal h4 { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; min-height: 1.5rem; width: 100%; display: flex; align-items: center; }
.overview-modal h5 { font-size: 0.75rem; font-weight: 400; line-height: 1.25rem; min-width: fit-content; }
.overview-modal h6 { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; min-width: fit-content; }
.overview-modal p { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; color: #777; }
.overview-modal p.project-code { min-width: 5.25rem; }
.overview-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; }
.overview-modal .project-no {color: #111;}
.overview-modal-header--end { display: flex; gap: 0.5rem; }
.overview-modal-header--end img { pointer-events: auto; cursor: pointer; width: 1rem; height: 1rem; }
.overview-modal-body { padding: 0 1rem 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: calc(100dvh - 10rem); overflow: hidden auto; }
.overview-table-container table { width: 100%; table-layout: auto; font-size: 0.765625rem; }
.overview-table-container th, .overview-modal-table-container td { padding: 0.4375rem 0.65625rem; text-align: center; vertical-align: middle; font-weight: 400; font-size: 0.75rem; }
.overview-modal .xs-btn-type {border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
.overview-modal-select-box { background-color: #E9EEED; padding: 0.4375rem; }
.overview-modal .select,.overview-modal .select .sticky { background-color: #E9EEED; }
.overview-modal .btn-box { display: flex; gap: 0.875rem; justify-content: center; margin-top: 0.875rem; }
.overview-modal .modal-btn { display: flex; border: 0.0625rem solid #dddddd; border-radius: 0.25rem; width: 10rem; height: 2.25rem; justify-content: center; align-items: center; color: #111111; font-weight: 500; }
.overview-modal .modal-btn-green { display: flex; border: 0.0625rem solid #dddddd; border-radius: 0.25rem; width: 10rem; height: 2.25rem; justify-content: center; align-items: center; color: #ffffff; background-color: #1e5149; font-weight: 500; }
.overview-modal input[type="text"],.overview-modal textarea { border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-family: 'Pretendard'; color: var(--color-dahong); font-weight: 300; width: 100%; padding: 0.125rem 0.5rem; }
.overview-modal input[type="text"] { padding: 0.125rem 0.5rem !important; }
.overview-modal textarea { resize: none; padding: 0.125rem 0.5rem !important; }
.overview-modal input[type="text"]:focus,.overview-modal textarea:focus { outline: 0.0625rem solid #111; }
.overview-modal .dropbox { background-color: #eee; border: 0.0625rem solid #ddd; border-radius: 0.25rem; display: flex; flex-direction: column; align-items: center; padding: 0.5rem; position: relative; z-index: 51; min-height: 10rem; justify-content: center;}
.overview-modal .dropbox-wrap {width: 100%;}
.overview-modal .dropbox .file-wrap-div {display: flex; border-bottom: 0.063rem solid #ddd; padding: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.overview-modal .dropbox label { font-weight: 400; font-size: 0.65625rem; color: #aaaaaa; width: 100%; cursor: pointer; }
.overview-modal .dropbox input[type="file"] { display: none; }
.overview-modal .dropbox-top { display: flex; gap: 0.5rem; padding: 0.5rem 0 1rem 0; }
.overview-modal .dropbox-top img { width: 2.5rem; height: 2.5rem; }
.overview-modal .dropbox-bottom { display: flex; justify-content: space-between; width: 100%; padding: 0.5rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; align-items: center; cursor: pointer; }
.overview-modal .dropbox-bottom img { width: 1rem; height: 1rem; }
.overview-modal .dropbox-file-img { width: 1.25rem; height: 1.25rem;}
.overview-modal .modal-footer { display: flex; justify-content: center; gap: 0.5rem; padding: 1rem; }
.overview-modal .modal-footer .btn-delete { display: flex; justify-content: center; align-items: center; width: 9.375rem; height: 2.25rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; color: #FF3D00; cursor: pointer; }
.overview-modal .modal-footer .btn-close { display: flex; width: 9.375rem; height: 2.25rem; justify-content: center; align-items: center; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; color: #111; cursor: pointer; }
.overview-modal .modal-footer .btn-active { display: flex; width: 9.375rem; height: 2.25rem; justify-content: center; align-items: center; background-color: #1E5149; border-radius: 0.25rem; color: #fff; cursor: pointer;}
.overview-modal .calendar-list { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.5rem 1rem; display: flex; gap: 0.25rem; min-width: 20.5rem; justify-content: space-between; align-items: center;}
.overview-modal .calendar-list .schedule-title { display: flex; align-items: center; gap: 0.5rem; }
.overview-modal .calendar-list h4 { max-width: 40rem; white-space: normal; word-break: break-word; }
.overview-modal .time-group { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-family: sans-serif; }
.overview-modal .time-field input { padding: 0.25rem 0.5rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; font-family: 'Pretendard'; font-weight: 300; line-height: 1.25rem; cursor: pointer; }
.overview-modal .separator { font-size: 0.875rem; color: #777; padding: 0 0.25rem; }
.overview-modal .radio-wrapper { display: flex; gap: 0.5rem; cursor: pointer; user-select: none; margin: 0.125rem 0; align-items: center; }
.overview-modal .radio-wrapper input[type="radio"] { display: none; }
.overview-modal .custom-radio { width: 1.5rem; height: 1rem; border: 0.0625rem solid #ddd; border-radius: 100%; position: relative; }
.overview-modal .radio-wrapper input[type="radio"]:checked+.custom-radio { border-color: #1E5149; }
.overview-modal .custom-radio::after { content: ""; position: absolute; display: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #1E5149; }
.overview-modal .radio-wrapper input[type="radio"]:checked+.custom-radio::after { display: block; }
.overview-modal input[type="color"] { width: 1.25rem; min-width: 1.25rem; height: 1.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; }
.overview-modal input[type="color"]::-webkit-color-swatch { border: none; }
.overview-modal .custom-checkbox input[type="checkbox"] { display: none; }
.overview-modal .custom-checkbox span { position: relative; width: 1.25rem; height: 1.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.overview-modal .custom-checkbox input[type="checkbox"]:checked+span { background-image: url(/main/img/overview/icon-checkbox.svg); width: 1.25rem; height: 1.25rem; }
.overview-modal .color button { width: 1rem; height: 1rem; border-radius: 1rem; background: none; cursor: pointer; margin: 0 0.125rem; border: 0.125rem solid #fff; }
.overview-modal .label-color.on { outline: 0.0625rem solid #111; border: 0.125rem solid #fff; }
.overview-modal .work-list { width: calc(100% - 1.75rem); display: flex; gap: 0.5rem; }
.overview-modal .work-list-number { min-width: 3.75rem; max-width: 3.75rem; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-modal .work-list-date, .overview-modal .work-list-redate, .overview-modal .work-list-changedate { min-width: 7.5rem; max-width: 7.5rem; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;}
.overview-modal .work-list-script { flex-grow: 1; min-width: 13rem; max-width: 13rem; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-modal .work-list-detail { min-width: 20rem; max-width: 20rem; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-modal .work-list li { display: flex; gap: 0.5rem; }
.overview-modal ul { border-top: 0.0625rem solid #ddd; }
.overview-modal li { padding: 0.5rem 0; border-bottom: 0.0625rem solid #eee; display: flex; gap: 0.5rem; align-items: center;}
.overview-modal .section-tabs { display: flex; gap: 0.25rem; align-items: center; margin-left: 0.25rem; overflow-x: auto; white-space: nowrap;}
.overview-modal .section-tabs._scrollbar::-webkit-scrollbar,.overview-table-container._scrollbar::-webkit-scrollbar, .overview-modal .overview-table-container._scrollbar::-webkit-scrollbar { height: 0.5rem;}
.overview-modal .section-tabs .xs-btn:hover {cursor: pointer; scale: 1.5; transition: 0.2s;}
.overview-modal .section-content--cell .xs-btn:hover {cursor: pointer; scale: 1.5; transition: 0.2s;}
.overview-modal .section-tabs .xs-btn.add {flex-shrink: 0;}
.overview-modal .click-on { background-color: #E9EEED; color: #1E5149; border: 0.0625rem solid #E9EEED !important; }
.overview-modal .tab { display: flex; flex: 0 0 auto; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border: 0.0625rem solid #ddd; border-bottom: none; border-radius: 0.25rem 0.25rem 0 0; align-items: center; cursor: pointer; }
.overview-modal .tab-style-input { border: none !important; padding: 0rem !important; width: 7rem !important; }
.overview-modal .tab-style-input:focus { outline: none !important; }
.overview-modal .section-content { display: flex; flex-direction: column; gap: 0.5rem; background-color: var(--primary-lv0); padding: 0.5rem 1rem; border-radius: 0.25rem; }
.overview-modal .section-content--cell { display: flex; gap: 0.5rem; align-items: center; justify-content: center; }
.overview-modal .add-cell-btn { color: var(--primary-lv5); padding: 0.25rem 0; border: 0.0625rem solid var(--primary-lv2); border-radius: 0.25rem; gap: 0.25rem; align-items: center; justify-content: center; cursor: pointer; }
.overview-modal .xs-btn img { width: 0.75rem; height: 0.75rem; }
.overview-modal .joint-contract-add,.overview-modal .joint-contract-delete { color: #000; background-color: #fff; border-radius: 0.25rem; border: 0.063rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
.overview-modal-tooltip { position: absolute; display: inline-block; background: #444; color: #fff; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.8rem; white-space: nowrap; transition: opacity 0.3s ease; visibility: hidden; pointer-events: none; z-index: 52;}
.overview-modal .overview-table-container { overflow-x: auto; max-width: 100%; }
.overview-modal .overview-table-container table { border-collapse: collapse; width: 100%; color: #777; }
.overview-modal .overview-table-container td { padding: 0.25rem; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; color: #111; min-width: 5rem;}
.overview-modal .overview-table-container th { padding: 0.25rem; text-align: left; color: #777; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; min-width: 5rem; }
.overview-modal .overview-table-container th.sticky,.overview-modal .overview-table-container td.sticky { position: sticky; left: 0; background-color: #fff; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; min-width: 4rem; color: #777 !important; }
.overview-modal .xs-btn.remove-img { position: absolute; top: 0; right: 0; margin: 0.5rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem; display: flex; align-items: center; justify-content: center; }
.overview-modal .xs-btn.remove-img img { width: 0.75rem; height: 0.75rem; }
.overview-modal .order.work-list-number { width: 3.75rem; }
.overview-modal .suspension-date.work-list-date, .overview-modal .suspension-reason.work-list-script, .overview-modal .resumption-date.work-list-redate, .overview-modal .change-date.work-list-changedate { width: 7.5rem; }
.overview-modal .consuletation-content.work-list-detail { width: 13rem; }
.overview-modal .xs-btn.cell-remove {width: 2rem; height: 1rem; background-color: #fff; border: 0.063rem solid #ddd; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;}
.overview-modal .body-not-gap { gap: 0.5rem !important; padding: 1rem !important; }
.overview-modal .body-not-bottom { padding-bottom: 0 !important; }
.overview-modal input[type=date]{position: relative; -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/main/img/overview/icon__calendar--aaa.svg) no-repeat; background-position: right 0.25rem center; padding-right: 0.5rem; background-size: 1rem 1rem; padding-right: 2rem; border: 0.0625rem solid #ddd; box-sizing:border-box; height: 1.75rem; border-radius: 0.25rem; width: 100%; padding: 0.125rem 0.5rem; color: #FF3D00; font-size: 0.875rem; font-weight: 300;}
.overview-modal input[type=time]{position: relative; -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/main/img/overview/icon__time--aaa.svg) no-repeat; background-position: right 0.25rem center; padding-right: 0.5rem; background-size: 1rem 1rem; padding-right: 2rem; border: 0.0625rem solid #ddd; box-sizing:border-box; height: 1.75rem; border-radius: 0.25rem; width: 100%; padding: 0.125rem 0.5rem; color: #FF3D00; font-size: 0.875rem; font-weight: 300; min-width: 6.5rem;}
.overview-modal input[type=date]::-webkit-calendar-picker-indicator, .overview-modal input[type=time]::-webkit-calendar-picker-indicator { position:absolute; right: 0; top: 0; width: 100%; height: 100%; background: transparent; cursor: pointer;}
.overview-modal input[type=date]:hover, .overview-modal input:hover[type=time]{border: 0.063rem solid #111; cursor: pointer; background-color: #eee;}
/* overview swiper */
.overview .vb-swiper .swiper { width: 100%; height: 100%; position: relative; background: #eee; }
.overview .vb-swiper .swiper-slide { width: 36rem !important; height: 22rem;}
.overview .vb-swiper .swiper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: contain; }
.overview .vb-swiper .swiper .swiper-wrapper { display: flex; align-items: center;}
.overview .vb-swiper .swiper-button-prev, .overview .vb-swiper .swiper-button-next { position: absolute; top: 55%; width: 2rem; height: 2rem; transform: translateY(-50%); background-size: cover; cursor: pointer; z-index: 10; border: 0.0625rem solid #ddd; border-radius: 1rem; background-color: #fff; }
.overview .swiper-button-prev::after,.overview .swiper-button-next::after { display: none}
.overview .body-not-gap { gap: 0.5rem !important; padding: 1rem !important; }
.overview .body-not-bottom { padding-bottom: 0 !important; }