:root {
    --box-title-display: none;
    --box-table-display: none;
    --box-p-display: none;
    --box-image-display: none;
    --box-line-display: none;
    --box-rect-display: none;
    --box-chart-display: none;
    --box-diagram-display: none;
    --box-math-display: none;
    --box-caption-display: none;
    --box-barcode-display: none;
    --box-layout-display: none;
    --text-size: 9px;
    --text-color: #FFFFFF;
}

.box-layer {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    z-index: 1;
}

#full-image {
    display: inline-block;
}

.box-layer-table {
    position: absolute;
    border: 2px solid #90A19D;
    display: var(--box-table-display);
    cursor: pointer;
}

.box-layer-p {
    position: absolute;
    border: 2px solid #8EB2D9;
    display: var(--box-p-display);
    cursor: pointer;
}

.box-layer-title {
    position: absolute;
    border: 2px solid #5D83B1;
    display: var(--box-title-display);
    cursor: pointer;
}

.box-layer-image {
    position: absolute;
    border: 2px solid #589A8D;
    display: var(--box-image-display);
    cursor: pointer;
}

.box-layer-line {
    position: absolute;
    border: 2px solid #196774;
    display: var(--box-line-display);
    cursor: pointer;
}

.box-layer-rect {
    position: absolute;
    border: 2px solid #FFAE00;
    display: var(--box-rect-display);
    cursor: pointer;
}

.box-layer-chart {
    position: absolute;
    border: 2px solid #ED8B16;
    display: var(--box-chart-display);
    cursor: pointer;
}

.box-layer-diagram {
    position: absolute;
    border: 2px solid #B95CF4;
    display: var(--box-diagram-display);
    cursor: pointer;
}

.box-layer-math {
    position: absolute;
    border: 2px solid #E1523D;
    display: var(--box-math-display);
    cursor: pointer;
}

.box-layer-caption {
    position: absolute;
    border: 2px solid #6750A4;
    display: var(--box-caption-display);
    cursor: pointer;
}

.box-layer-barcode {
    position: absolute;
    border: 2px solid #2c2c2c00;
    display: var(--box-barcode-display);
    cursor: pointer;
}

.box-layer-layout {
    position: absolute;
    border: 2px solid #F2668B;
    z-index: 8;
    display: var(--box-layout-display);
    cursor: pointer;
}

/* .tag-text-* class z-index 범위: 11 ~ 19 */

.tag-text-table {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-60%); 
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #90A19D;
    padding: 1px 1.5px;
    z-index: 11;
}

.tag-text-p {
    position: absolute;
    left: -10px;
    top: 0;
    transform: translateY(-10%); 
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #8EB2D9;
    padding: 1px;
    z-index: 12;
}

.tag-text-title {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-60%); 
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #5D83B1;
    padding: 1px 1.5px;
    z-index: 13;
}

.tag-text-image {
    position: absolute;
    left: -15px; 
    top: 0;
    transform: translateY(-50%); 
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #589A8D;
    padding: 1px;
    z-index: 14;
}

.tag-text-line {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #196774;
    padding: 1px;
    z-index: 15;
}

.tag-text-rect {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #FFAE00;
    padding: 1px;
    z-index: 16;
}

.tag-text-chart {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #ED8B16;
    padding: 1px;
    z-index: 17;
}

.tag-text-diagram {
    position: absolute;
    left: -24px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #B95CF4;
    padding: 1px;
    z-index: 18;
}

.tag-text-math {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #E1523D;
    padding: 1px;
    z-index: 18;
}

.tag-text-caption {
    position: absolute;
    left: -18px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #6750A4;
    padding: 1px;
    z-index: 19;
}

.tag-text-barcode {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--text-size);
    color: var(--text-color);
    background-color: #2c2c2c;
    padding: 1px;
    z-index: 20;
}

.tag-text-layout {
    position: absolute;
    left: -15px;
    top: 0;
    transform: translateY(-50%);
    font-weight: 600;
    color: #F2668B;
}

.thumb_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}

.thumbnail {
    display: block;
    width: 200px;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid #DADADA;
    overflow-y: scroll;
}

.wrapper {
    margin-top: 14px;
    display: block;
}

.thumb_content {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.thumb_span {
    margin-left: 40px;
    font-size: 15px;
    line-height: 1.15;
    color: #6c6c6c;
}

.thumb_focus {
    border: 4px solid #666666;
    box-shadow: 0 0 10px #000000;
    border-radius: 2px;
    opacity: 1.0;
}

.thumb_area {
    position: relative;
    display: inline-block;
    margin-left: 31px;
    margin-top: 1px;
    margin-bottom: 14px;
    line-height: 0;
}

.thumb_img {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 10px;
    z-index: 1;
    border: solid 1px;
    border-color: #C8C8C8;
}

.thumb_cur_page {
    border: 2px solid #F6B140;
    border-radius: 2px;
}

.thumb_img.gray-filter {
    filter: grayscale(100%) brightness(70%);
    cursor: default;
}

.thumb_loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.thumb_loader {
    width: 30px;
    height: 30px;
    border: 5px solid #f39700;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

.demo-container {
    display: block;
    border: 1px solid #2B63AE;
    border-radius: 8rem;
    font-size: 0.75rem;
    color: black;
    background-color: white;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.filename_box {
    display: block;
    position: absolute;
    left: 45%;
    color: black;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    padding-right: 1rem;
}

.product-container:hover {
    background-color: #0F1351;
    color: #B0C4DE;
}

.product-container {
    display: block;
    border-radius: .375rem;
    font-size: 0.75rem;
    color: white;
    background-color: #171C61;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-right: 0.75rem !important;
}

.login-container {
    display: block;
    border-radius: .375rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #1925B2;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    z-index: 10;
    top: 110%;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.tab-container i:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.bi {
    cursor: pointer;
    font-size: 1.25rem;
    color: #909090;
}

.tab-button {
    flex: 1;
    min-width: 3rem;
    max-width: 32px;
    height: 2rem;
    text-align: center;
    position: relative;
    background: none;
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #DADADA;
    border-radius: 1rem;
    text-wrap: nowrap;
}


/* layout tab-button의 background만 컬러 따로 지정해줍니다. */
.layout-back {
    background-color: #F1F2F3;
}

.tab-button span {
    display: block;
}

.tab-button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #DADADA;
}

.tab-button:last-child::after {
    display: none;
}

.tab-mu {
    flex: 1;
    min-width: 5rem;
    max-width: 40px;
    height: 2rem;
    position: relative;
    background: none;
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    border: none;
}

.tab-mu::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #DADADA;
}

.tab-button:last-child::after {
    display: none;
}

.tab-title.active {
    background-color: #5D83B1;
    color: white;
}

.tab-p.active {
    background-color: #8EB2D9;
    color: white;
}

.tab-line.active {
    background-color: #196774;
    color: white;
}

.tab-table.active {
    background-color: #90A19D;
    color: white;
}

.tab-image.active {
    background-color: #589A8D;
    color: white;
}

.tab-rect.active {
    background-color: #FFAE00;
    color: white;
}

.tab-chart.active {
    background-color: #ED8B16;
    color: white;
}

.tab-math.active {
    background-color: #E1523D;
    color: white;
}

.tab-caption.active {
    background-color: #6750A4;
    color: white;
}

.tab-barcode.active {
    background-color: #2c2c2c;
    color: white;
}

.tab-layout.active {
    background-color: #F2668B;
}

.tab-mu.active {
    background-color: #E2EBFB;
    border-bottom: 2px solid #6750A4;
}

.logo-container {
    display: flex;
    padding-left: 0.5rem;
    gap: 1px;
    align-items: center;
}

#download {
    margin-left: 5px !important;
}

#popup-container {
    display: none;
    position: fixed;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 450px;
    max-height: 1000px;
    min-width: 200px;
    min-height: 200px;
    top: 50%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#popup-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#popup-header.draggable {
    cursor: move;
    user-select: none;
}

#popup-close {
    position: absolute;
    top: 0;
    right: 0;
}

#popup-container table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

#popup-container img {
    max-width: 350px;
    max-height: 350px;
    object-fit: contain;
}

#popup-container.popup-diagram-mode {
    width: min(80vw, 1200px);
    height: auto;
    max-width: 1200px;
    max-height: calc(100vh - 190px);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

#popup-container.popup-diagram-mode.diagram-landscape {
    width: min(80vw, 1200px);
    max-width: 1200px;
}

#popup-container.popup-diagram-mode.diagram-portrait {
    width: min(60vw, 600px);
    max-width: 600px;
}

#popup-image-container.popup-diagram-mode {
    width: 100%;
    max-height: min(48vh, 480px);
    overflow: auto;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

#popup-container.popup-diagram-mode img {
    display: block;
    max-width: 100%;
    max-height: min(48vh, 480px);
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

#popup-container.popup-diagram-mode #popup-data {
    width: 100%;
    flex: 0 0 auto;
    max-height: min(20vh, 220px);
    overflow: hidden;
}

.popup-mermaid-text {
    max-height: calc(min(20vh, 220px) - 32px);
    overflow: auto;
}

#popup-filename {
    margin-top: 10px;
    font-size: 15px;
    width: 100%;
    word-wrap: break-word;
}

#popup-image-container {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popup-data {
    max-height: 250px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 15px;
    overflow: auto;
}

#popup-container.popup-diagram-mode #popup-tagname {
    flex: 0 0 auto;
    margin-bottom: 12px;
    text-align: center;
    align-self: center;
}

.popup-mermaid-text {
    margin: 0;
    padding: 12px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.popup-mermaid-label {
    padding: 8px 12px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

#popup-data td {
    border: 1px solid #ccc;
    height: 50px;
    font-size: 15px;
    text-align: center;
}

#popup-data th {
    height: 50px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    color: #000;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    font-size: 15px;
    text-align: center;
}

#popup-data tbody tr td:first-child {
    position: relative;
    padding-left: 18px;
    white-space: nowrap;
    text-align: center;
}

#popup-data tbody tr:nth-child(1) td:first-child::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #5B9BD5; /* 파란색 */
}

#popup-data tbody tr:nth-child(2) td:first-child::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #D55B5B; /* 빨간색 */
}

#popup-data tbody tr:nth-child(3) td:first-child::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #FFD700; /* 노란색 */
}

.scrollable {
    cursor: grab;
}

.scrollable:active {
    cursor: grabbing;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

.text-select {
    user-select: text;
    -webkit-user-select: text;
}