@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

/* Copyright Ⓒ Hanmaceng Corp. All Rights Reserved. */
/* 기술개발센터 김건우A 연구원 b25013@hanmaceng.co.kr */

/* 버전 히스토리 */
/* 2025-03-17 : -- root.css 정의 */
/* 2025-03-19 : -- "root.css" → "system.css" 으로 이름 변경 */
/* 2025-03-20 : -- '컴포넌트 정의'부분 수정 */
/* 2025-03-20 : -- 'header'부분 수정 */
/* 2025-03-20 : -- '컴포넌트 정의' - 스크롤바 추가 */
/* 2025-03-25 : -- 'header'부분 수정 */
/* 2025-03-28 : -- '프라이머리컬러스케일' 추가 */
/* 2025-03-28 : -- 'header', 'footer' 리뉴얼 */
/* 2025-03-31 : -- 'main'부분 수정 */
/* 2025-03-31 : -- 'h2'정의 추가 */
/* 2025-04-15 : -- 전면 리뉴얼 */

/* -- ↓ -- style -- ↓ -- */

/* 색상 및 시스템 정의 ===== ===== ===== ===== ===== */
: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-lv-0: #E9EEED;
    --primary-lv-1: #D2DCDB;
    --primary-lv-2: #A5B9B6;
    --primary-lv-3: #789792;
    --primary-lv-4: #4B746D;
    --primary-lv-5: #35635C;
    --primary-lv-6: #1E5149;
    --primary-lv-7: #1B443D;
    --primary-lv-8: #193833;
    --primary-lv-9: #162A27;
}


/* 컴포넌트 정의 ===== ===== ===== ===== ===== */
/* 폰트 고정값 */

html {
    /* font-size: clamp(0rem, 0.8dvw, 1.125rem) !important; */
    font-size: 0.8333333dvw;
}

main {
    display: flex;
    height: calc(100dvh - 4.5rem);
    width: 100%;
    padding: 0.5rem;
    gap: 0.5rem;
    position: absolute;
    z-index: 1;
    top: 2.25rem;
    /* overflow-y: auto; */
}

/* 가로 해상도 320px일때 */
@media screen and (max-width:320px) {
    main {
        display: none !important;
    }
}

body {
    font-family: 'Pretendard';
    color: #111;
}

/* 한줄 강조 emphasize-20px */
h1 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 프로젝트 제목 project-title-16px */
h2 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 본문 제목 title-14px */
h3 {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 본문 body-14px */
h4 {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 알약형 capsule-12px */
h5 {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 소본문 body-12px */
h6 {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;
}

/* 주석 caption */
p {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.25rem;
    letter-spacing: -0.0175rem;

    color: #777;
}

/* 파란색강조 */
.type-em-blue {
    color: var(--color-blue) !important;
    font-weight: 500 !important;
}

/* 빨간색강조 */
.type-em-red {
    color: var(--color-dahong) !important;
    font-weight: 500 !important;
}

/* 플레이스홀더 */
.type-placeholder {
    color: #aaa;
}

/* 스크롤바 */
::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}

::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
    cursor: pointer;
}

/* 아이콘타입 버튼 */
.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;
}

/* 텍스트타입 버튼 */
.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;
}

/* 아이콘+텍스트타입 버튼 */
.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;
}

/* 아이콘+텍스트타입 버튼 */
.xs-btn-type-icon-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-lv-5);
    border-radius: 0.25rem;
    border: 0.0625rem solid var(--primary-lv-4);
    padding: 0 0.25rem 0 0.125rem;
    color: #fff;
    gap: 0.125rem;
    min-height: 1.25rem;
    max-height: 1.25rem;
    max-width: fit-content;
    min-width: fit-content;
    cursor: pointer;
}

.xs-btn-type-icon-header:hover {
    background-color: var(--primary-lv-4);
}



/* header.css 정의 ===== ===== ===== ===== ===== */
header {
    background-color: var(--primary-lv-6);
    width: 100dvw;
    min-height: 2.25rem;
    max-height: 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    color: #fff;
    position: absolute;
    z-index: 3;
    top: 0;
    pointer-events: all;
}

header h4 {
    color: var(--primary-lv-3);
}

header a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.end {
    margin-left: 0.5rem;
}

.header-left h6 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-right h4 {
    color: var(--primary-lv-3);
}

.header-right {
    display: flex;
    gap: 0.5rem;
    max-width: fit-content;
    min-width: fit-content;
    margin-left: 0.25rem;
    justify-content: flex-end;
    align-items: center;
}

.header-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-name::before {
    content: "";
    width: 0.0625rem;
    height: 0.75rem;
    background-color: var(--primary-lv-2);
    opacity: 0.4;
    margin-right: 0.75rem;
}

.header-others {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-permission {
    display: flex;
    gap: 0.25rem;
}

.header-btn-admin {
    display: flex;
    gap: 0.125rem;
    background-color: rgba(0, 0, 0, 0);
    color: var(--primary-lv-3);
    font-weight: 500;
    cursor: pointer;
    opacity: 0.4;
}

.header-btn-logout {
    background-color: rgba(0, 0, 0, 0);
    color: var(--primary-lv-3);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.4;
}

img[alt="hambuger"] {
    display: none;
}

.header-others-number {
    display: none;
}


/* footer.css 정의 ===== ===== ===== ===== ===== */
footer {
    background-color: #111;
    width: 100dvw;
    min-height: 2.25rem;
    max-height: 2.25rem;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    color: #aaa;
    position: absolute;
    z-index: 3;
    bottom: 0;
    pointer-events: all;
}

footer p,
footer h5 {
    color: #aaa;
}

.footer-left {
    display: flex;
    align-items: center;
    /* gap: 0.125rem; */
}

.footer-left a p {
    text-decoration: underline;
}

.footer-middle {
    display: flex;
    align-items: center;
    padding-right: 1rem;
}

footer button {
    background-color: rgba(0, 0, 0, 0);
}

footer button p {
    text-decoration: underline;
}

.coordinate {
    cursor: pointer;
}

.getComponent {
    margin-left: 0.25rem;
}

.footer-section {
    margin-left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-gauge {
    max-width: 6.25rem;
    min-width: 6.25rem;
    max-height: 0.25rem;
    min-height: 0.25rem;
    border-radius: 0.25rem;
    background-color: rgba(119, 119, 119, 0.2);
    margin-left: 0.5rem;
}

.footer-left span {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #aaa;
}

#scalebar_wrap {
    justify-content: left !important;
    height: 0.25rem;
    background-color: #666;
    opacity: 0.6;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

#scalebar {
    height: 0.25rem;
    background-color: #fff;
    border-radius: 0.25rem;

}