@charset "uft-8";

/* common (include, layout) */
body {font-family: 'NotoSansKR', '나눔고딕', 'NanumGothic', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 12px; color: var(--text-color); background: var(--gray6);}
body.popup {background-color: #ffffff;}
#wrapper {overflow: hidden; min-width: 1400px; padding: 60px 0 0 220px; transition: padding 0.3s;}
#wrapper.wide {padding-left: 20px;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 10000;}
#skip-nav:focus {top: 0;}

#header-top {position: fixed; display: grid; grid-template-columns: 220px auto; grid-template-rows: 100%; left: 0; top: 0; width: 100%; height: 60px; border-bottom: 1px solid var(--gray5); background-color: var(--bg-color); color: var(--text-color); z-index: 1000;}
#header-top div.logo {position: relative; border-right: 1px solid var(--gray5);}
#header-top div.logo h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); width: calc(100% - 80px); height: 80%;}
#header-top div.logo h1 > a {display: block; position: relative; height: 100%; padding-bottom: 15px;}
#header-top div.logo h1 > a img {display: block; width: 100%; height: 100%; object-fit: contain;}
#header-top div.logo h1 > a span {position: absolute; left: 0; bottom: 2px; font-size: 10px; font-weight: 400; color: var(--gray1);}
#header-top div.system {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%);}
#header-top div.system a.select {position: relative; display: block; width: 16px; height: 16px; border: 1px solid var(--gray5); border-radius: 3px; font-size: 8px; background-color: var(--bg-color); color: var(--gray2); transition: all 0.3s;}
#header-top div.system a.select:hover {border-color: var(--gray3);}
#header-top div.system a.select i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s;}
#header-top div.system a.select.close i {transform: translate(-50%, -50%) rotate(180deg);}
#header-top div.system .popup-menu-container {left: -30px; top: 100%;}
#header-top div.system .popup-menu::before,
#header-top div.system .popup-menu::after {left: 31px;}
#header-top div.system ul > li + li {border-top: 1px dashed var(--gray5);}
#header-top div.system ul > li > a {position: relative; display: block; line-height: 30px; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
#header-top div.system ul > li > a img {display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 10px; object-fit: contain;}
#header-top div.system ul > li > a:hover {background-color: var(--gray6); color: var(--blue);}

#header-top div.content {position: relative;}
#header-top div.user-info {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%);}
#header-top div.user-info a.user {position: relative; display: block;}
#header-top div.user-info a.user > * {vertical-align: middle;}
#header-top div.user-info a.user span.photo {display: inline-block; width: 36px; height: 36px; border-radius: 100px; overflow: hidden; border: 1px solid var(--gray5);}
#header-top div.user-info a.user span.photo img {display: block; width: 100%; height: 100%; object-fit: cover;}
#header-top div.user-info a.user em.name {font-size: 14px; font-weight: 700; margin-left: 6px; transition: color 0.3s;}
#header-top div.user-info a.user span.auth {font-size: 11px; color: var(--gray2); margin-left: 4px;}
#header-top div.user-info a.user i {font-size: 8px; color: var(--gray2); margin-left: 5px; transition: transform 0.3s;}
#header-top div.user-info a.user:hover em.name {color: var(--blue);}
#header-top div.user-info a.user.close i {transform: rotate(180deg);}
#header-top div.user-info .popup-menu-container {left: -10px;}
#header-top div.user-info .popup-menu {width: 300px; display: grid; grid-template-columns: 110px auto;}
#header-top div.user-info .popup-menu > li {display: flex; align-items: center; padding: 4px 8px;}
#header-top div.user-info .popup-menu > li.photo {grid-area: 1 / 1/ span 6 / span 1;}
#header-top div.user-info .popup-menu > li.photo img {display: block; border: 1px solid var(--gray5); margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; overflow: hidden; object-fit: cover;}
#header-top div.user-info .popup-menu > li + li + li {border-top: 1px dashed var(--gray5);}
#header-top div.user-info .popup-menu > li > em {font-size: 18px; font-weight: 700;}
#header-top div.user-info .popup-menu > li > span {font-size: 11px; margin-left: 5px; color: var(--gray2);}
#header-top div.user-info .popup-menu > li > i {margin-right: 8px; color: var(--gray2);}
#header-top div.user-info .popup-menu > li.button {grid-area: 7 / 1/ span 1 / span 2; padding: 4px 0; justify-content: space-between;}
#header-top div.user-info .popup-menu > li.button a {display: block; line-height: 24px; width: calc(33% - 2px); text-align: center; font-size: 11px; background-color: var(--blue); color: #ffffff; border-radius: 3px;}
#header-top div.user-info .popup-menu > li.button a.red {background-color: var(--red);}

#header-top div.mode {position: absolute; left: 300px; top: 50%; transform: translate(0, -50%);}
#header-top div.mode .toggle-input + .toggle-input {margin-left: 30px;}

#quick-menu {position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}
#quick-menu > li {position: relative; float: left;}
#quick-menu > li + li {margin-left: 6px;}
#quick-menu > li > a {position: relative; display: block; width: 34px; height: 34px; border: 2px solid var(--gray5); border-radius: 4px; font-size: 14px; transition: all 0.3s;}
#quick-menu > li > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.7;}
#quick-menu > li > a:hover {border-color: var(--gray3);}
#quick-menu > li span.badge {position: absolute; right: -6px; top: -8px; min-width: 14px; line-height: 14px; text-align: center; padding: 0 5px;  background-color: var(--orange); color: #ffffff; font-size: 9px; border-radius: 100px; z-index: 10;}

#gnb {position: fixed; left: 0; top: 60px; width: 220px; height: calc(100vh - 54px); background-color: var(--bg-color); font-size: 12px; border-right: 1px solid var(--gray5); transition: left 0.3s; z-index: 900;}
#gnb.close {left: -200px;}
#gnb > nav {position: relative; height: 100%; overflow: auto; padding: 20px 12px 60px 12px;}
#gnb a.toggle {position: absolute; right: 0; top: 15px; width: 20px; height: 20px; border-radius: 20px; border: 1px solid var(--gray5); background-color: var(--bg-color); transform: translateX(50%);}
#gnb a.toggle i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--gray1); transition: transform 0.3s;}
#gnb.close a.toggle i {transform: translate(-50%, -50%) rotate(180deg);}
#gnb h3 {font-size: 14px; font-weight: 400;}
#gnb h3.on {color: var(--blue); font-weight: 500;}
#gnb ul.nav + h3 {margin-top: 25px;}
#gnb ul.nav {font-size: 12px;}
#gnb h3 + ul.nav {margin-top: 5px;}
#gnb ul.nav > li + li {margin-top: 3px;}
#gnb ul.nav > li > a {position: relative; display: block; border: 1px solid var(--gray5); border-radius: 4px; line-height: 30px; padding: 0 20px 0 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
#gnb ul.nav > li.on > a {color: var(--blue);}
#gnb ul.nav > li > a:hover {border-color: var(--gray2);}
#gnb ul.nav > li > a > i:first-child {position: absolute; left: 6px; top: 50%; transform: translate(0, -50%); opacity: 0.4;}
#gnb ul.nav > li > a > i:last-child {position: absolute; right: 6px; top: 50%; transform: translate(0, -50%); opacity: 0.4; font-size: 10px; transition: transform 0.3s;}
#gnb ul.nav > li.open > a > i:last-child {transform: translate(0, -50%) rotate(90deg);}
#gnb ul.nav > li > ul {overflow: hidden; transition: height 0.3s; height: 0;}
#gnb ul.nav > li > ul > li {border-left: 1px solid var(--gray5); border-right: 1px solid var(--gray5); background-color: var(--gray6);}
#gnb ul.nav > li > ul > li + li {border-top: 1px dashed var(--gray5);}
#gnb ul.nav > li > ul > li:first-child {border-top: 1px solid var(--gray5); border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 3px;}
#gnb ul.nav > li > ul > li:last-child {border-bottom: 1px solid var(--gray5); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
#gnb ul.nav > li > ul > li > a {position: relative; display: block; line-height: 28px; padding: 0 10px 0 24px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
#gnb ul.nav > li > ul > li > a::before {content: ''; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 6px; height: 6px; border-radius: 10px; background-color: var(--gray3);}
#gnb ul.nav > li > ul > li.on > a {color: var(--blue);}
#gnb ul.nav > li > ul > li.on > a::before {background-color: var(--blue);}
#gnb ul.nav > li > ul > li > a:hover {background-color: var(--bg-color);}

#notification {position: fixed; right: 0; top: 54px; width: 200px; height: calc(100vh - 54px); background-color: var(--bg-color); border-left: 1px solid var(--gray5); padding: 10px; overflow: auto; transform: translateX(100%); transition: transform 0.3s; z-index: 1000;}
#notification.on {transform: translateX(0);}
#notification > ul > li {min-height: 50px; padding: 10px; border-radius: 4px; background-color: orange;}
#notification > ul > li + li {margin-top: 10px;}

#footer {position: relative; font-size: 11px; text-align: center; background-color: var(--bg-color);}
#footer p.copyright {line-height: 34px; opacity: 0.5;}



/* main 영역 */
#main {position: relative; overflow: hidden; min-height: calc(100vh - 90px); padding: 25px 20px 100px 20px;}
#main-start {position: absolute; left: 0; top: 0; transform: translateX(-100%); width: 160px; line-height: 30px; text-align: center; font-size: 14px; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; transition: all 0.3s; z-index: 1000;}
#main-start:focus {transform: translateX(0%);}
#main > h2 {font-size: 20px; font-weight: 300;}
#main > h2 + p.desc {font-size: 12px; margin-top: 6px; opacity: 0.4; margin-bottom: 20px;}

#bread-crumb {position: absolute; top: 50px; right: 20px; font-size: 12px; opacity: 0.7;}
#bread-crumb > li {float: left;}
#bread-crumb > li + li::before {content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 700; margin: 0 10px; opacity: 0.5;}
#bread-crumb > li a:hover {text-decoration: underline;}
#bread-crumb > li i {vertical-align: middle; margin-right: 5px; position: relative; top: -1px;}
#bread-crumb > li em {font-weight: 700; color: var(--blue);}


/* login 페이지 */
body.main #wrapper {padding: 0;}
body.main #main {padding: 0; min-height: 100vh; background: url(../img/login-bg.jpg) center center no-repeat; background-size: cover;}
body.main #main::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}

#login {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; background-color: var(--bg-color); border-radius: 10px; border: 1px solid var(--gray4); box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5); padding-left: 150px; overflow: hidden; z-index: 100;}
#login div.left {position: absolute; left: 0; top: 0; width: 150px; height: 100%; background-color: var(--yellow);}
#login div.left h1 {position: absolute; left: 15px; top: 30px; width: 120px;}
#login div.left h1 span {display: block; font-size: 12px; color: #ffffff; font-weight: 400; margin-top: 10px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);}
#login div.right {padding: 40px 30px;}
#login div.right h2 {font-size: 24px; margin-bottom: 30px; color: #777777;}
#login ul.form > li + li {margin-top: 10px;}
#login p.check {font-size: 14px; overflow: hidden;}
#login p.check > * {float: left;}
#login p.check input {margin: 0; position: relative; position: relative; top: 1px;}
#login p.check label {display: inline-block; padding-left: 8px;}
#login .dino-form-group,
#login .dino-form {
  --base-size: 36px;
  --font-size: 14px;
}




/* 목록 검색 영역 */
div.search-container {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 4px 10px; font-size: 12px;}
div.search-container > div {position: relative; grid-column: span 2;}
div.search-container > div.half {grid-column: span 3;}
div.search-container > div.double {grid-column: span 4;}
div.search-container > div.full {grid-column: span 6;}
div.search-container > div > label,
div.search-container > div > span.label {display: inline-block; vertical-align: top; line-height: 24px; min-width: 90px; text-align: center; padding: 0 10px; border: 1px solid var(--gray4); border-radius: 4px; margin-right: 10px; background-color: var(--gray6);}
div.search-container + div.dino-btn-container {margin-top: 6px;}

/* 정보 목록 */
p.list-info {font-size: 12px; margin-bottom: 10px;}
p.list-info em {font-weight: 700; color: var(--blue);}
div.list-function {position: absolute; right: 20px; top: 30px;}
div.list-function > div {float: left;}
div.list-function > div + div {margin-left: 30px;}

div.dino-data-table {position: relative; font-size: 12px; border: 1px solid var(--gray4);}
div.dino-data-table > div.container {overflow: auto;}
table.data-list {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color);}
table.data-list th,
table.data-list td {position: relative; padding: 3px 6px; line-height: 30px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; overflow: hidden;}
table.data-list thead {position: sticky; top: 0; z-index: 100;}
table.data-list thead th {background-color: var(--gray5);}
table.data-list thead th[rowspan] {line-height: 1.3em;}
table.data-list thead th::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--gray4);}
table.data-list thead th::after {content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: var(--gray4);} 
table.data-list thead th[colspan],
table.data-list thead tr:nth-child(n + 2) th {line-height: 22px;}
table.data-list tbody td {border-bottom: 1px solid var(--gray4); background-color: var(--bg-color);}
table.data-list tbody.sum td {text-align: right; background-color: var(--gray6); font-weight: 700;}
table.data-list td.left {text-align: left !important; padding-left: 14px;}
table.data-list td.center {text-align: center !important;}
table.data-list td.right {text-align: right !important;}
table.data-list td a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
table.data-list td a:hover {color: var(--blue);}
table.data-list td span.image {display: block;}
table.data-list td span.image img {max-height: 60px;}
table.data-list tbody p.loading {position: relative; height: 200px;}
table.data-list tbody p.loading > em {position: absolute; left: calc(50vw - 150px); top: 50%; transform: translate(-50%, -50%);}
table.data-list tbody p.loading > em i {font-size: 60px; color: var(--yellow); opacity: 0.5;}
/*
table.data-list tr > *:nth-child(1) {position: sticky; left: 0; z-index: 10;}
table.data-list tr > *:nth-child(2) {position: sticky; left: 40px; z-index: 10;}
table.data-list tr > *:nth-child(3) {position: sticky; left: 90px; z-index: 10;}
table.data-list tr > *:nth-child(3)::after {content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: var(--gray4);}
table.data-list tr > *.sticky {position: sticky; left: 0; z-index: 10;}
*/
table p.no-info {color: var(--gray); position: relative; line-height: 30px;}
table p.no-info::before {content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 700; color: var(--yellow); margin-right: 0.6em;}

div.pagination {position: relative; text-align: center;}
div.pagination > .contaniner {display: inline-block;}
div.pagination a {display: inline-block; position: relative; width: 30px; height: 30px; border: 2px solid transparent; border-radius: 4px; color: var(--gray); line-height: 26px; vertical-align: top; overflow: hidden; transition: all 0.3s;}
div.pagination a:hover {background-color: var(--gray6);}
div.pagination a span {position: absolute; left: -999px;}
div.pagination ol {display: inline-flex; vertical-align: top;}
div.pagination ol > li.on > a {border-color: var(--blue);}
div.pagination ol > li + li {margin-left: 3px;}
div.dino-data-table + div.pagination {margin-top: 20px;}
div.pagination + div.dino-btn-container {margin-top: 20px;}


/* 정보 상세보기(reg, mod, view) */
table.data-detail {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color); width: 100%; line-height: 1.4em;}
table.data-detail > tbody > tr > td {position: relative; padding: 5px 10px; border-bottom: 1px dashed var(--gray4);}
table.data-detail > tbody > tr > td.th {background-color: var(--gray6); font-weight: 700; text-align: right; padding-right: 15px; border-right: 1px dashed var(--gray4); line-height: 26px; width: 130px;}
table.data-detail > tbody > tr > td + td.th {border-left: 1px dashed var(--gray4);}
table.data-detail > tbody > tr > td.th em {color: var(--red); margin-right: 6px;}
table.data-detail > tbody > tr:first-child td {border-top: 1px dashed var(--gray4);}
table.data-detail + div.dino-btn-container {margin-top: 20px;}
table.data-detail p.desc {font-size: 11px; color: var(--red); margin-top: 3px;}
table.data-detail span.desc {display: inline-block; line-height: 26px; vertical-align: middle; font-size: 11px; color: var(--red); margin-left: 30px;}
table.data-detail > tbody div.long {line-height: 1.4em; white-space: pre-line;}
table.data-detail * + div.input-two {margin-top: 5px;}
table.data-detail div.input-two > div.dino-form {float: left; width: calc(50% - 3px); margin-top: 0;}
table.data-detail div.input-two > div.dino-form + div.dino-form {margin-left: 6px;}

table.cell-content {position: relative; width: 100%; font-size: 12px; text-align: center;}
table.cell-content th,
table.cell-content td {border: 1px solid var(--gray4); padding: 4px 8px; max-width: 1px;}
table.cell-content thead {background-color: var(--gray6); line-height: 20px;}
table.cell-content thead th {padding: 4px;}
table.cell-content thead th em {color: var(--red); margin-left: 4px;}
table.cell-content tbody + tbody {border-top: 2px solid var(--gray4);}
table.cell-content tbody th {background-color: var(--gray6); line-height: 26px;}
table.cell-content tbody tr td:nth-of-type(1) {line-height: 26px;}
table.cell-content tbody td.left {text-align: left;}
table.cell-content td.right {text-align: right;}
table.cell-content span.image {display: block;}
table.cell-content span.image img {max-width: 100%; max-height: 50px;}
table.cell-content + div.dino-btn-container {margin-top: 4px;}
table.cell-content td > span.function {position: relative; display: inline-block; vertical-align: top; width: 40px; height: 26px;}
table.cell-content td > span.function > a {position: absolute; width: calc(50% - 1px); height: calc(50% - 1px); border: 1px solid var(--blue); background-color: var(--bg-color); border-radius: 4px; color: var(--blue);}
table.cell-content td > span.function > a > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px;}
table.cell-content td > span.function > a.prev {left: 0; top: 0;}
table.cell-content td > span.function > a.next {left: 0; bottom: 0;}
table.cell-content td > span.function > a.del {right: 0; top: 0; height: 100%; border-color: var(--red); color: var(--red);}
table.cell-content textarea {height: 100%;}
table.cell-content + div.dino-btn-container * {--base-size: 22px; vertical-align: top; font-size: 11px;}
table.cell-content tfoot {background-color: var(--gray5); font-weight: 700;}å
table.cell-content.stat th,
table.cell-content.stat td {line-height: 2em;}
div.table-scroll {position: relative; overflow: auto;}
table.cell-content.report tbody tr td:nth-of-type(1) {line-height: initial;}
table.cell-content.report td {padding: 8px 4px;}
p.search-date {font-size: 14px; margin-bottom: 20px;}
p.search-date em {font-size: 16px; font-weight: 700;}
table.cell-content ~ p.desc {margin-top: 10px; font-size: 12px; color: var(--red);}

table.cell-content.report .color1 {background-color: rgba(255, 204, 0, 0.5);}
table.cell-content.report .color2 {background-color: rgba(85, 190, 240, 0.5);}
table.cell-content.report em.large {font-size: 14px; font-weight: 700;}
table.cell-content.report .door-0 {background-color: #ffffff;}
table.cell-content.report .door-33 {background-color: #ffffff;}
table.cell-content.report .door-34 {background-color: #d1e6a9;}
table.cell-content.report .door-70 {background-color: #9de1ce;}
table.cell-content.report .door-35 {background-color: #a4ddf3;}
table.cell-content.report .door-36 {background-color: #ffdcB9;}
table.cell-content.report .door-37 {background-color: #f9cb9c;}
table.cell-content.report .door-38 {background-color: #ffff00;}
table.cell-content.report .door-39 {background-color: #ead1db;}
table.cell-content.report .door-40 {background-color: #b8c1e9;}
table.cell-content.report .door-normal {background-color: #ffffff;}
table.cell-content.report .door-mortice {background-color: #f7d6e0;}
table.cell-content.report .door-hinge {background-color: #b2f7ef;}
table.cell-content.report .door-fix {background-color: #f2b5d4;}
table.cell-content.report .door-system {background-color: #efffc8;}


div.scroll-horizon {position: relative; overflow-x: auto;}
table.calendar {position: relative; width: 100%; font-size: 12px; table-layout: fixed;}
table.calendar th,
table.calendar td {border: 1px solid var(--gray4); padding: 6px 10px; position: relative;}
table.calendar thead {background-color: var(--gray6); line-height: 20px;}
table.calendar tbody th {background-color: var(--gray6);}
table.calendar tbody td {height: 100px; width: 210px; padding: 40px 6px 15px 6px; vertical-align: top;}
table.calendar em.red {color: var(--red);}
table.calendar em.blue {color: var(--blue);}
table.calendar span.date {position: absolute; left: 0; top: 0; width: 100%; line-height: 24px; background-color: var(--gray6); border-bottom: 1px solid var(--gray4); text-align: center;}

div.schedule-card {position: relative; border: 1px solid var(--gray4); border-radius: 10px; padding: 30px 10px 10px 10px; font-size: 12px; overflow: hidden;}
div.schedule-card.blue {border-color: var(--blue);}
div.schedule-card.yellow {border-color: var(--yellow);}
div.schedule-card.orange {border-color: var(--orange);}
div.schedule-card + div.schedule-card {margin-top: 10px;}
div.schedule-card div.title {position: absolute; left: 0; top: 0; width: 100%; line-height: 24px; font-size: 13px; background-color: var(--gray5); padding: 0 10px;}
div.schedule-card.blue div.title {background-color: var(--blue); color: #ffffff;}
div.schedule-card.yellow div.title {background-color: var(--yellow); color: #ffffff;}
div.schedule-card.orange div.title {background-color: var(--orange); color: #ffffff;}
div.schedule-card div.title span {position: absolute; right: 10px; font-size: 11px;}
div.schedule-card ul > li + li {margin-top: 5px;}
div.schedule-card ul > li > em {font-size: 14px; font-weight: 700;}
div.schedule-card ul > li span.site {color: var(--gray1);}
div.schedule-card ul > li span.option {margin-left: 4px; color: var(--gray1);}
div.schedule-card ul > li > span {display: inline-block; position: relative;}
div.schedule-card ul > li > span * {vertical-align: middle;}
div.schedule-card ul > li > span + span:not(.tag) {margin-left: 10px;}
div.schedule-card ul > li > span i {color: var(--gray3); margin-right: 4px;}
div.schedule-card ul > li span.tag {display: inline-block; line-height: 12px; border: 1px solid var(--green); border-radius: 4px; padding: 2px 4px; margin-right: 4px; margin-bottom: 2px; font-size: 10px; color: var(--gray1);}
div.schedule-card ul > li span.tag.red {border-color: var(--red); color: var(--red);}
div.schedule-card ul > li span.tag.yellow {border-color: var(--yellow); color: var(--yellow);}
div.schedule-card ul > li span.tag.blue {border-color: var(--blue); color: var(--blue);}
div.schedule-card a.detail {position: absolute; right: 5px; bottom: 12px; font-size: 10px; color: var(--green); padding: 2px 5px; border: 1px solid var(--green); border-radius: 10px; transition: all 0.2s;}
div.schedule-card a.detail:hover {background-color: var(--green); color: var(--bg-color);}

ul.install-yet {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 10px;}





/* Components */
.popup-menu-container {position: absolute; overflow: hidden; transition: height 0.3s; z-index: 100; height: 0;}
.popup-menu {position: relative; width: 200px; background-color: var(--bg-color); border: 1px solid var(--gray5); border-radius: 4px; padding: 8px 10px; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1); margin: 6px 5px 5px 0;}
.popup-menu::before {content: ''; position: absolute; left: 20px; top: -12px; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: var(--gray5);}
.popup-menu::after {content: ''; position: absolute; left: 20px; top: -11px; width: 0; height: 0; border: 6px solid transparent; border-bottom-color: var(--bg-color);}

.toggle-input {position: relative; display: inline-block; vertical-align: middle;}
.toggle-input > * {position: relative; display: inline-block; vertical-align: middle;}
.toggle-input > span {font-size: 16px; opacity: 0.7; z-index: 10;}
.toggle-input input[type="radio"] {position: absolute; opacity: 0; left: -9999px;}
.toggle-input > span label {cursor: pointer;}
.toggle-input input[type="radio"]:focus + label {outline: 2px solid var(--blue);}
.toggle-input > a {position: relative; width: 40px; height: 24px; border-radius: 100px; background-color: var(--gray6); margin: 0 4px; border: 1px solid var(--gray5); transition: all 0.3s;}
.toggle-input > a span {position: absolute; left: 1px; top: 50%; transform: translate(0, -50%); width: 20px; height: 20px; border-radius: 100px; background-color: var(--bg-color); border: 1px solid var(--gray5); transition: left 0.3s;}
.toggle-input.on > a {background-color: var(--gray6); background-color: var(--yellow);}
.toggle-input.on > a span {left: 17px;}

ul.tag-list {display: inline-flex; vertical-align: middle; gap: 0 10px; font-size: 12px;}
ul.tag-list > li {position: relative; line-height: 24px; padding: 0 30px 0 10px; border: 1px solid var(--yellow); border-radius: 100px; background-color: var(--bg-color);}
ul.tag-list > li > a {position: absolute; right: 8px; top: 50%; transform: translate(0, -50%); line-height: 1.2em; font-size: 14px; color: var(--red);}
ul.tag-list + a.dino-btn {margin-left: 20px;}

/* 스크롤바 디자인 : Webkit 계열 */
.custom-scroll {overflow: auto;}
.custom-scroll::-webkit-scrollbar {width: 10px;}
.custom-scroll::-webkit-scrollbar-thumb {background-color: transparent; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; transition: background-color 0.3s;}
.custom-scroll:hover::-webkit-scrollbar-thumb {background-color: #e8e8e8;}
.custom-scroll::-webkit-scrollbar-track {background-color: transparent;}
/* Fire Fox */
.custom-scroll {scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s;}
.custom-scroll:hover {scrollbar-color: #e8e8e8 transparent;}
/* IE */
.custom-scroll {-ms-overflow-style: none;}



/* 팝업창 */
#wrapper-popup {padding: 50px 0 30px 0;}
#wrapper-popup #main {padding: 20px 10px 30px 10px;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 50px; background-color: var(--mint); color: #ffffff; padding: 0 20px; z-index: 1000;}
#popup-header h2 {line-height: 50px; font-size: 20px; font-weight: 400;}
#popup-header a.popup-close {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 30px; font-weight: 300;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background-color: var(--mint); color: #ffffff; font-size: 11px; font-weight: 300; text-align: center; line-height: 30px; z-index: 900;}
#wrapper-popup .dino-grid-container + .dino-grid-container {margin-top: 20px;}
#wrapper-popup #main h3.title {margin-top: 20px; margin-bottom: 4px; font-size: 14px; font-weight: 400; position: relative; padding-left: 20px;}
#wrapper-popup #main h3.title::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; border: 2px solid var(--gray4); border-radius: 100px;}

table.report-title {position: relative; width: 100%; font-size: 12px; text-align: center; margin-bottom: 20px;}
table.report-title h2 {font-size: 24px;}
table.report-title th,
table.report-title td {border: 1px solid var(--gray4); padding: 4px 8px;}
table.report-title td.sign {width: 80px;}
table.report-title tbody tr:nth-child(2) {height: 60px;}

table.report-detail {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color); width: 100%; line-height: 1.2em; font-size: 11px;}
* + table.report-detail {margin-top: 20px;}
table.report-detail.left tbody td {text-align: left;}
table.report-detail.center tbody td {text-align: center;}
table.report-detail th,
table.report-detail td {border: 1px solid var(--gray4); padding: 5px 8px;}
table.report-detail th,
table.report-detail td.th {background-color: var(--gray6);}
table.report-detail tbody th {font-weight: 400;}
table.report-detail tbody td.left {text-align: left;}
table.report-detail > tbody div.long {line-height: 1.4em; white-space: pre-line;}
table.report-detail span.image {display: block;}
table.report-detail span.image img {max-width: 100%; max-height: 36px; vertical-align: top;}
table.report-detail .narrow {padding: 2px 2px;}
table.report-detail .big-text {font-size: 14px; font-weight: 500;}
table.report-detail.large {font-size: 14px;}
table.report-detail.bar thead th:nth-child(8),
table.report-detail.part thead th:nth-child(7),
table.report-detail tbody td + th {border-left: double 5px var(--gray2);}
table.report-detail tbody td.big {font-weight: 700; font-size: 12px;}
table.report-detail tr.line th {background-color: var(--gray3);}


/* --------------------------  */
/* color guide page            */
/* --------------------------  */

ul.dino-palette {background-color: var(--main-bg); color: var(--main-text); border: 1px solid var(--gray4); border-radius: 10px; padding: 20px; font-size: 13px;}
ul.dino-palette > li {display: flex;}
ul.dino-palette > li > span {width: 50%; line-height: 34px; padding: 0 20px;}
ul.dino-palette > li > span:first-child {color: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
ul.dino-palette > li:nth-child(1) > span:first-child {background-color: var(--bg-color);}
ul.dino-palette > li:nth-child(2) > span:first-child {background-color: var(--main-bg-text);}
ul.dino-palette > li:nth-child(3) > span:first-child {background-color: var(--main-text);}
ul.dino-palette > li:nth-child(4) > span:first-child {background-color: var(--red);}
ul.dino-palette > li:nth-child(5) > span:first-child {background-color: var(--orange);}
ul.dino-palette > li:nth-child(6) > span:first-child {background-color: var(--yellow);}
ul.dino-palette > li:nth-child(7) > span:first-child {background-color: var(--green);}
ul.dino-palette > li:nth-child(8) > span:first-child {background-color: var(--mint);}
ul.dino-palette > li:nth-child(9) > span:first-child {background-color: var(--teal);}
ul.dino-palette > li:nth-child(10) > span:first-child {background-color: var(--cyan);}
ul.dino-palette > li:nth-child(11) > span:first-child {background-color: var(--blue);}
ul.dino-palette > li:nth-child(12) > span:first-child {background-color: var(--indigo);}
ul.dino-palette > li:nth-child(13) > span:first-child {background-color: var(--purple);}
ul.dino-palette > li:nth-child(14) > span:first-child {background-color: var(--pink);}
ul.dino-palette > li:nth-child(15) > span:first-child {background-color: var(--brown);}
ul.dino-palette > li:nth-child(16) > span:first-child {background-color: var(--gray);}
ul.dino-palette > li:nth-child(17) > span:first-child {background-color: var(--gray2);}
ul.dino-palette > li:nth-child(18) > span:first-child {background-color: var(--gray3);}
ul.dino-palette > li:nth-child(19) > span:first-child {background-color: var(--gray4);}
ul.dino-palette > li:nth-child(20) > span:first-child {background-color: var(--gray5);}
ul.dino-palette > li:nth-child(21) > span:first-child {background-color: var(--gray6);}


#error-msg-container {position: fixed; width: 500px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid var(--gray4); background-color: var(--bg-color); text-align: center; padding: 50px 40px; border-radius: 20px;}
#error-msg-container h1 {font-size: 30px; margin-bottom: 30px;}


/* --------------------------  */
/* 출력용 화면 구성                */
/* --------------------------  */

@media print {
  body {font-size: 10px;}
  #wrapper {min-width: 100%; padding: 0;}
  #header {display: none;}
  #main > h2 + p.desc {display: none;}
  #main section.dino-grid-container {border: none; padding: 0;}
  #main section.dino-grid-container > section {border: none; padding: 0;}
  #bread-crumb {display: none;}
  #footer {display: none;}
  .print-hidden {display: none !important;}
  .dino-btn-container {display: none !important;}

  /* table.data-detail colgroup {display: none;} */
  table.data-detail td.th {width: 80px;}
  table.cell-content {font-size: 9px;}

}