@import url('./reset.css');
@import url('./font.css');

* { font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif; font-size: 14px; } 

:root {--background-color: rgba(0, 0, 0, 0.3); --color1: #6944F0; --color2: #6944F0; --gray: rgba(255, 255, 255, 0.7); }

html,body { position: relative; font-size: 62.5%; } 
body { overflow: hidden; user-select: none; } 

.wrap { display: flex; flex-direction: column; height: 100%; }


/* -------------------- Main : Center -------------------- */
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }

.btnGroup { display: flex; gap: 10px; position: absolute; left: 460px; top: 20px;  }
.btnGroup > button { width: fit-content; font-size: 12px;}
.btnGroup > input { width: fit-content; font-size: 12px;}

.left { display: flex; flex-direction: column; position: absolute; top: 14px; left: 14px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5);  }
.left .side-resize { position: absolute; top: 0; right: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }
.left .left-header .file-info { display: flex; align-items: center;}
.left .left-header .file-info .schema { width: fit-content; margin-right: 6px; padding: 0 4px; border-radius: 4px; color: white; background: gray; font-size: 12px; }
.left .left-header .file-info .file-name { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left .left-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
.left .left-conts { display: flex; flex-direction: column; position: relative; overflow: auto; scrollbar-gutter: stable; margin-right: -14px; }

.tree-container { width: fit-content; min-width: -webkit-fill-available; background: var(--gray); user-select: none; font-size: 14px; }
.tree { list-style: none; margin: 8px 14px; width: 100%;}
.tree *:before { width: 14px; height: 14px; display: inline-block; }

.tree ul { list-style: none; margin-left: 10px; padding-left: 11px; border-left: 1px dashed #999;}
.tree ul:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.tree li { list-style: none; width: 100%; white-space: nowrap; }

.tree li > .input-caret { display: none; }
.tree li > .label-caret { display: inline-block; width: 14px; height: 14px; margin: 0 4px; background: url('../img/arrow-plus.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
.tree li > .input-caret:checked+.label-caret { background: url('../img/arrow-minus.svg') no-repeat center center/cover; transform: rotate(-360deg); }
.tree li > div { display: inline-block; }
.tree li > div > .ifc-type { display: inline-block; padding-left: 6px; color: gray; font-size: 14px; cursor: pointer; }
.tree li > div > .ifc-name { display: inline-block; padding-left: 6px; font-size: 14px; }
.tree li > div.selected { background-color: rgba(0, 123, 255, 0.2); }
.tree li .label-caret > span { margin-left: 14px; color: #000; }
.tree .input-caret:not(:checked)~ul { display: none; }

.tree li > .input-visible { display: none; }
.tree li > .label-visible { display: inline-block; width: 14px; height: 14px; margin-left: 4px; background: url('../img/hide.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
.tree li > .input-visible:checked+.label-visible { background: url('../img/show.svg') no-repeat center center/cover; transform: rotate(-360deg); }

.right { display: flex; flex-direction: column; position: absolute; top: 14px; right: -680px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
.right .side-resize { position: absolute; top: 0; left: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }

.show-right { right: 14px !important; }

.right .right-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
.right .right-conts { display: flex; flex-direction: column; position: relative; overflow-y: auto; scrollbar-gutter: stable; margin-right: -14px; }

.accordion { margin-top: 8px;}
.accordion .accordion-header { display: flex; height: 32px; border-left: 2px solid var(--color2); border-bottom: 1px solid rgba(0, 0, 0, 0.1);  background:var(--gray); }
.accordion .accordion-header .btn-accordion { display: flex; align-items: center; position: relative; width: 100%; padding-left: 14px; font-size: 16px; font-weight: bold; text-align: left; }
.accordion .accordion-header .btn-accordion img { width: 16px;  height: 16px; margin-right: 7px; }
.accordion .accordion-header .btn-accordion::after { content: ""; display: inline-block; position: absolute; right: 4px; width: 16px; height: 16px; background: url('../img/caret.svg') no-repeat center center/cover; transition: all 0.2s; }
.accordion .accordion-header .btn-accordion.collapse::after { transform: rotate(-180deg); }
.accordion .accordion-collapse { max-height: 0; overflow: hidden; transition: all 0.2s; background:var(--gray);  }
.accordion .accordion-collapse[aria-hidden="false"] { max-height: 5000px; /* A large enough value to accommodate content */ }
.accordion .accordion-collapse .accordion-body { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-left: 2px solid var(--color2); }
.accordion .accordion-collapse .accordion-body .sub-title { margin-top: 7px; }
.accordion .accordion-collapse .accordion-body .sub-title:first-child { margin-top: 0; }
.accordion .accordion-collapse .accordion-body dl { display: flex; }
.accordion .accordion-collapse .accordion-body dl dt { width: 40%; padding-left: 8px; color: gray; word-break: break-all; }
.accordion .accordion-collapse .accordion-body dl dd { flex:1; padding-left: 8px; word-break: break-all; }



/* -------------------- Scrollbar -------------------- */
.scrollbar::-webkit-scrollbar { width: 16px; }
.scrollbar::-webkit-scrollbar-track { background-color: transparent; }
.scrollbar::-webkit-scrollbar-thumb { background-color: gray; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; min-height: 50px; }
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--color1); }
.scrollbar::-webkit-scrollbar-corner { background: transparent; }



/* -------------------- Progress -------------------- */
.progress-wrap { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.progress-wrap .progress-content { display: flex; flex-direction: column; align-items: center; font-family: 'Protest Riot'; font-size: 30px; }

.loader { display: inline-block; position: relative; width: 48px; height: 48px; }
.loader::after, .loader::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border: 4px solid #FFF; box-sizing: border-box; animation: rotation 2s ease-in-out infinite; }
.loader::after { border-color: var(--color1); animation-delay: 1s; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 



/* -------------------- Media query -------------------- */
@media (max-width: 768px) {
    .left { display: none }
    .right { display: none }
}