@charset "uft-8";


/* --------------------------------- */
/* Grid (.dino-grid-container)       */
/* --------------------------------- */

/* 기본형 grid */
.dino-grid-container {position: relative; display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);}
.dino-grid-container.col-1 {grid-template-columns: repeat(1, 1fr);}
.dino-grid-container.col-2 {grid-template-columns: repeat(2, 1fr);}
.dino-grid-container.col-3 {grid-template-columns: repeat(3, 1fr);}
.dino-grid-container.col-4 {grid-template-columns: repeat(4, 1fr);}
.dino-grid-container.col-5 {grid-template-columns: repeat(5, 1fr);}
.dino-grid-container.col-6 {grid-template-columns: repeat(6, 1fr);}
.dino-grid-container.col-7 {grid-template-columns: repeat(7, 1fr);}
.dino-grid-container.col-8 {grid-template-columns: repeat(8, 1fr);}
* + .dino-grid-container {margin-top: 30px;}
.dino-btn-container + .dino-grid-container {margin-top: 30px;}
.dino-grid-container > .title {grid-column: 1 / -1; font-size: 16px; font-weight: 400; position: relative; color: var(--base-text2); padding-left: 20px;}
.dino-grid-container > .title::before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; border: 2px solid var(--gray3); border-radius: 20px;}
.dino-grid-container > :where(section, div) {position: relative; border: 1px solid var(--gray5); background-color: var(--base-bg); border-radius: 4px; min-height: 100px; padding: 15px 20px; min-width: 0; font-size: 13px;}
/* min-width: 0; --> grid item 내부 긴 요소 포함시 자동확장 방지  // overflow: hidden은 안됨(레이어 팝업) */
.dino-grid-container .nowrap {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dino-grid-container > :where(section, div).span-2 {grid-column: span 2;}
.dino-grid-container > :where(section, div).span-3 {grid-column: span 3;}
.dino-grid-container > :where(section, div).span-4 {grid-column: span 4;}
.dino-grid-container > :where(section, div).span-5 {grid-column: span 5;}
.dino-grid-container > :where(section, div).span-6 {grid-column: span 6;}
.dino-grid-container > :where(section, div).span-7 {grid-column: span 7;}
.dino-grid-container > :where(section, div).span-8 {grid-column: span 8;}
.dino-grid-container > :where(section, div, dl) .title {font-size: 15px; font-weight: 400; margin-bottom: 12px;}
.dino-grid-container > :where(section, div, dl) * + .title {margin-top: 30px;}

#popup-wrapper * + .dino-grid-container {margin-top: 10px;}



/* 탭 grid */
.dino-grid-container > dl {position: relative; overflow: hidden; transition: height 0.3s;}
.dino-grid-container > dl dt {float: left;}
.dino-grid-container > dl dt > a {display: block; background-color: var(--base-bg); border: 1px solid var(--color-border); border-bottom: none; text-align: center; min-width: 80px; max-width: 120px; padding: 0 10px; line-height: 27px; font-size: 12px; border-top-left-radius: 8px; border-top-right-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
.dino-grid-container > dl dt > a:hover {background-color: var(--gray6);}
.dino-grid-container > dl dt.on > a {background-color: var(--blue); color: #ffffff;}
.dino-grid-container > dl dd {position: absolute; left: 0; top: 28px; width: 100%; border: 1px solid var(--gray5); background-color: var(--base-bg); border-radius: 4px; min-height: 100px; padding: 15px 20px; min-width: 0; font-size: 13px; display: none;}
.dino-grid-container > dl dt.on + dd {display: block;}

/* --------------------------------- */
/* Grid (.dino-search-grid)          */
/* --------------------------------- */
.dino-search-grid {position: relative; display: grid; gap: 5px 10px; grid-template-columns: repeat(6, 1fr); font-size: 13px; overflow: hidden; padding: 5px 0;}
.dino-search-grid + .dino-btn-container {margin-top: 10px;}
.dino-search-grid > li {grid-column: span 2; display: inline-flex; gap: 10px;}
.dino-search-grid > li.half {grid-column: span 3;}
.dino-search-grid > li.long {grid-column: span 4;}
.dino-search-grid > li.full {grid-column: span 6;}
.dino-search-grid > li.unit {grid-column: span 1;}
.dino-search-grid > li > :where(label, .label) {display: inline-block; line-height: 26px; height: 28px; min-width: 80px; padding: 0 8px; background-color: var(--gray6); border: 1px solid var(--gray4); border-radius: 4px; vertical-align: middle; text-align: center; white-space: nowrap; flex-shrink: 0;}
.dino-search-grid > li span.text {line-height: 28px; color: var(--base-text2);}
.dino-search-grid.minimize {height: 72px;}
.dino-search-grid + div a.dino-btn.close {display: inline-block;}
.dino-search-grid.minimize + div a.dino-btn.close {display: none;}
.dino-search-grid + div a.dino-btn.open {display: none;}
.dino-search-grid.minimize + div a.dino-btn.open {display: inline-block;}

/* ---------------------------------  */
/* Grid (.dino-content-grid)          */
/* ---------------------------------  */
.dino-content-grid {position: relative; border: 2px solid var(--gray5); border-radius: 4px; padding: 5px; background-color: var(--gray6);}
.dino-content-grid > div.row {position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px;}
.dino-content-grid > div.row + div.row {margin-top: 10px;}
.dino-content-grid > div.row.center {position: relative; max-width: 90%; margin: 0 auto;}
.dino-content-grid div.grid {position: relative; min-height: 100px; border: 1px solid var(--gray4); border-radius: 4px; background-color: var(--base-bg);}
.dino-content-grid a.btn {position: relative; display: inline-block; width: 24px; height: 24px; border: 1px solid var(--gray4); border-radius: 4px; font-size: 16px; background-color: var(--gray6); vertical-align: top; z-index: 10;}
.dino-content-grid a.btn i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-content-grid a.btn.add {color: var(--color-text);}
.dino-content-grid a.btn.move {color: var(--color-point);}
.dino-content-grid a.btn.delete {color: var(--red);}
.dino-content-grid a.btn.add-data {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; font-size: 30px; color: var(--base-text2); border: 3px dashed var(--gray4);}
.dino-content-grid span.btn {position: absolute; z-index: 10;}
.dino-content-grid span.btn.up {top: 0; left: 50%; transform: translate(-50%, -30%);}
.dino-content-grid span.btn.down {bottom: 0; left: 50%; transform: translate(-50%, 30%);}
.dino-content-grid span.btn:where(.up, .down) {padding: 2px 15px; border: 1px solid var(--gray4); border-radius: 100px; background-color: var(--base-bg); line-height: 1; display: none;}
.dino-content-grid span.btn:where(.up, .down) > a + a {margin-left: 3px;}
.dino-content-grid span.btn.left {left: 5px; top: 50%; transform: translate(0, -50%);}
.dino-content-grid span.btn.right {right: 5px; top: 50%; transform: translate(0, -50%);}
.dino-content-grid span.btn:hover {z-index: 20;}
.dino-content-grid > div.row:hover span.btn:where(.up, .down) {display: block;}
.dino-content-grid a.btn.delete.col {position: absolute; right: 5px; top: 5px; color: var(--red);}
.dino-content-grid .dino-form.select {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-content-grid > div.row a.btn.full {display: none;}
.dino-content-grid > div.row a.btn.center {display: inline-block;}
.dino-content-grid > div.row.center a.btn.full {display: inline-block;}
.dino-content-grid > div.row.center a.btn.center {display: none;}





/* ---------------------------------- */
/* Button (.dino-btn)                 */
/* ---------------------------------- */

.dino-btn-container,
.dino-btn,
.dino-btn.line {
  --color-bg: var(--base-bg);
  --base-size: 28px;
  --font-size: 13px;
  --base-width: 80px;
}
.dino-btn.small {
  --base-size: 22px;
  --font-size: 11px;
  --base-width: 1.8em;
}
.dino-btn.regular {
  --base-size: 28px;
  --font-size: 13px;
  --base-width: 80px;
}
.dino-btn.medium {
  --base-size: 34px;
  --font-size: 14px;
  --base-width: 120px;
}
.dino-btn.large {
  --base-size: 40px;
  --font-size: 16px;
  --base-width: 180px;
}

/* button container */
.dino-btn-container {position: relative; line-height: 1.2;}
:where(section, div) ~ .dino-btn-container {margin-top: 20px;}
.dino-btn-container::after {content: ''; display: block; clear: both;}
.dino-btn-container.left {text-align: left;}
.dino-btn-container.center {text-align: center;}
.dino-btn-container.right {text-align: right;}

/* button basic */
.dino-btn {position: relative; display: inline-flex; justify-content: center; font-size: var(--font-size); min-width: var(--base-width); height: var(--base-size); line-height: calc(var(--base-size) - 2px); padding: 0 0.8em; border: 1px solid transparent; border-radius: 4px; background-color: #999999; color: #ffffff; vertical-align: middle; cursor: pointer; appearance: none; transition: all 0.3s; text-align: center; overflow: hidden;}
.dino-btn > * {position: relative;}
.dino-btn:hover {border-color: rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);}
.dino-btn:active {box-shadow: none;}
.dino-btn.angle {border-radius: 0;}
.dino-btn.circle {border-radius: 100px; padding: 0 1em;}
.dino-btn.disabled {opacity: 0.5; cursor: no-drop !important;}
.dino-btn.left {float: left; margin-right: 3px;}
.dino-btn.block {display: block; width: 100%;}

/* button color */
.dino-btn.default {background-color: var(--base-bg); color: var(--base-text); border-color: var(--gray3);}
.dino-btn.main {background-color: var(--blue);}
.dino-btn.sub1 {background-color: var(--mint);}
.dino-btn.sub2 {background-color: var(--yellow);}
.dino-btn.dark {background-color: var(--gray);}
.dino-btn.warn {background-color: var(--red);}

/* icon text */
.dino-btn > i {position: relative; opacity: 0.8;}
.dino-btn > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-btn > i:first-child {margin-right: 0.5em;}
.dino-btn > i:last-child {margin-left: 0.5em;}

/* icon box (with text) */
.dino-btn.icon-left {padding-left: calc(var(--base-size) + 0.5em);}
.dino-btn.icon-left > i {position: absolute; left: 0; top: 0; width: var(--base-size); height: 100%; margin: 0; background-color: rgba(255, 255, 255, 0.3);}
.dino-btn.icon-left.default > i {background-color: var(--gray6);}
.dino-btn.icon-right {padding-right: calc(var(--base-size) + 0.5em);}
.dino-btn.icon-right > i {position: absolute; right: 0; top: 0; width: var(--base-size); height: 100%; margin: 0; background-color: rgba(255, 255, 255, 0.3);}
.dino-btn.icon-right.default > i {background-color: var(--gray6);}

/* icon only (no text) */
.dino-btn.icon {min-width: var(--base-size); padding: 0;}
.dino-btn.icon > em {position: absolute; left: -9999px;}
.dino-btn.icon > i {margin: 0; opacity: 1;}

/* line 형 버튼 디자인 */
.btn-line .dino-btn,
.dino-btn.line {background-color: transparent; color: #999999; border: 2px solid #999999; line-height: calc(var(--base-size) - 4px);}
.dino-btn.line.no-line .dino-btn,
.dino-btn.line.no-line {background-color: transparent !important;}

/* line 형 버튼 button color */
.btn-line .dino-btn.default,
.dino-btn.line.default,
.btn-line .dino-btn.default[class*="icon-"] > i,
.dino-btn.line.default[class*="icon-"] > i {border-color: var(--main-text); color: var(--main-text);}
.btn-line .dino-btn.main,
.dino-btn.line.main,
.btn-line .dino-btn.main[class*="icon-"] > i,
.dino-btn.line.main[class*="icon-"] > i {border-color: var(--blue); color: var(--blue);}
.btn-line .dino-btn.sub1,
.dino-btn.line.sub1,
.btn-line .dino-btn.sub1[class*="icon-"] > i,
.dino-btn.line.sub1[class*="icon-"] > i {border-color: var(--mint); color: var(--mint);}
.btn-line .dino-btn.sub2,
.dino-btn.line.sub2,
.btn-line .dino-btn.sub2[class*="icon-"] > i,
.dino-btn.line.sub2[class*="icon-"] > i {border-color: var(--yellow); color: var(--yellow);}
.btn-line .dino-btn.dark,
.dino-btn.line.dark,
.btn-line .dino-btn.dark[class*="icon-"] > i,
.dino-btn.line.dark[class*="icon-"] > i {border-color: var(--gray); color: var(--gray);}
.btn-line .dino-btn.warn,
.dino-btn.line.warn,
.btn-line .dino-btn.warn[class*="icon-"] > i,
.dino-btn.line.warn[class*="icon-"] > i {border-color: var(--red); color: var(--red);}

/* line 형 버튼 icon box (with text) 라인 추가 */
.btn-line .dino-btn.icon-left > i,
.dino-btn.line.icon-left > i {border-right: 1px solid rgba(0, 0, 0, 0.1);}
.btn-line .dino-btn.icon-right > i,
.dino-btn.line.icon-right > i {border-left: 1px solid rgba(0, 0, 0, 0.1);}




















/* --------------------------------- */
/* Form (.dino-form)                 */
/* --------------------------------- */

.dino-form {
  --size-font: 13px;
  --size-height: 28px;
  --color-bg: var(--base-bg);
  --color-text: var(--base-text);
  --color-placeholder: var(--gray2);
  --color-border: var(--gray5);
  --color-label: var(--base-text2);
  --color-label-bg: var(--gray6);
  --color-focus: rgba(0, 122, 255, 0.6);
  --color-valid: var(--green);
  --color-focus-invalid: rgba(255, 59, 48, 0.6);
  --color-invalid: var(--red);
  --color-focus-valid: rgba(40, 205, 65, 0.6);
  --color-btn-bg: var(--mint);
  --color-btn-border: var(--mint);
  --color-btn-text: var(--base-bg);
  --color-check: var(--blue);
}
.dino-form {position: relative; display: inline-block; vertical-align: middle; font-size: var(--size-font);}
.dino-form.block {display: block;}
.dino-form ::placeholder {color: var(--color-placeholder);}
.dino-form > label {display: block; font-size: calc(var(--size-font) * 0.95); margin-bottom: calc(var(--size-font) * 0.3); color: var(--color-label);}
.dino-form > label em {color: var(--color-invalid); margin-right: 0.4em;}
.dino-form > span.message {display: block; font-size: calc(var(--size-font) * 0.90); color: var(--color-invalid); margin-top: calc(var(--size-font) * 0.3); display: none;}
.dino-form div.group a.btn {background-color: var(--color-btn-bg) !important; color: var(--color-btn-text) !important; border-color: var(--color-btn-border) !important;}
.dino-form div.group a.btn.icon i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.dino-form div.group {position: relative; display: flex;}
.dino-form div.group > *:not(input, select, textarea, div.icon) {position: relative; border: 1px solid var(--color-border); min-width: var(--size-height); text-align: center; line-height: calc(var(--size-height) - 2px); padding: 0 calc(var(--size-font) * 0.6); color: var(--color-label); background-color: var(--color-label-bg);}
.dino-form div.group > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.dino-form div.group > * + * {margin-left: -1px;}
.dino-form div.icon {position: relative; display: inline-block; vertical-align: middle;}
.dino-form.block div.icon {flex-grow: 1;}
.dino-form.block > div.icon {display: block;}
.dino-form div.icon > i {position: absolute; top: 50%; transform: translate(0, -50%); color: var(--base-text2); transition: color 0.3s; z-index: 20;}
.dino-form div.icon.left > i {left: calc(var(--size-font) * 0.6);}
.dino-form div.icon.right > i {right: calc(var(--size-font) * 0.6);}
.dino-form div.icon.left :where(input.text, select, textarea) {padding-left: calc(var(--size-font) * 2);}
.dino-form div.icon.right :where(input.text, select, textarea) {padding-right: calc(var(--size-font) * 2);}


/* round 처리 (div > form / div > div > form / div > div > div > form) */
.dino-form > :where(input, select, textarea) {border-radius: 4px;}
.dino-form.block > :is(input.text, select, textarea) {width: 100%;}
.dino-form > div.icon > :where(input, select, textarea) {border-radius: 4px;}
.dino-form div.group > :first-child,
.dino-form div.group > :first-child > :where(input, select, textarea) {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.dino-form div.group > :last-child,
.dino-form div.group > :last-child > :where(input, select, textarea) {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}

/* form 요소 기본 디자인 */
.dino-form :where(input.text, select, textarea) {position: relative; height: var(--size-height); background-color: var(--base-bg); color: var(--color-text); border: 1px solid var(--color-border); outline: 2px solid transparent; vertical-align: top; transition: outline 0.3s; z-index: 10; font-family: inherit;}
.dino-form :where(input.text, select, textarea):disabled {background-color: var(--color-label-bg); cursor: not-allowed;}
.dino-form input.text {width: calc(var(--size-font) * 12); padding: 0 calc(var(--size-font) * 0.8);}
.dino-form select {padding: 0 calc(var(--size-font) * 2.0) 0 calc(var(--size-font) * 0.8); background-image: url(../img/common/icon-select.png); background-position: right calc(var(--size-font) * 0.6) center; background-repeat: no-repeat; background-size: calc(var(--size-font) * 0.7) auto; appearance: none;}
.dino-form textarea {width: 100%; height: calc(var(--size-height) * 3); padding: calc(var(--size-font) * 0.8);}
.dino-form input[type="file"] {vertical-align: middle; outline: 2px solid transparent; transition: outline 0.3s;}

/* checkbox, radio 요소 디자인 */
.dino-form :where(input[type="checkbox"], input[type="radio"]) {vertical-align: middle; outline-color: transparent; transition: outline-color 0.3s;}
.dino-form :where(input[type="checkbox"], input[type="radio"]):focus-visible {outline-color: var(--color-focus);}
.dino-form ul.input-list {display: flex; gap: 0 20px; flex-wrap: wrap; line-height: var(--size-height);}
.dino-form ul.input-list label {position: relative; vertical-align: middle; padding-left: calc(var(--size-font) * 0.3);}
.dino-form ul.input-list.block {display: block; line-height: unset;}
.dino-form ul.input-list.block > li + li {margin-top: calc(var(--size-font) * 0.6);}
.dino-form ul.input-list.icon :where(input[type="checkbox"], input[type="radio"]) {position: absolute; opacity: 0;}
.dino-form ul.input-list.icon > li label {padding-left: 1.7em; z-index: 10;}
.dino-form ul.input-list.icon > li :where(input[type="checkbox"], input[type="radio"]) + label::before {content: '\f0c8'; font-family: 'Font Awesome 6 Free'; font-weight: 500; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); font-size: 1.3em; color: var(--color-check); outline: 2px solid transparent; line-height: 1em; transition: outline-color 0.3s; border-radius: 2px;}
.dino-form ul.input-list.icon > li input[type="checkbox"]:checked + label::before {content: '\f14a';}
.dino-form ul.input-list.icon > li input[type="radio"] + label::before {content: '\f111';}
.dino-form ul.input-list.icon > li input[type="radio"]:checked + label::before {content: '\f192';}
.dino-form ul.input-list.icon > li input:focus-visible + label::before {outline-color: var(--color-focus);}

/* data 형태별 길이 지정 */
.dino-form.block input.text,
input.text.full {width: 100%;}
.dino-form input.text[data-type="year"] {width: 60px;}
.dino-form input.text[data-type="month"] {width: 80px;}
.dino-form input.text[data-type="date"] {width: 100px;}
.dino-form input.text[data-type="date-hour"],
.dino-form input.text[data-type="date-min"] {width: 130px;}
.dino-form input.text[data-type="date-sec"] {width: 150px;}
.dino-form input.text[data-type="hour"],
.dino-form input.text[data-type="min"] {width: 60px;}
.dino-form input.text[data-type="time"] {width: 80px;}
.dino-form input.text[data-type="zip-code"] {width: 70px;}
.dino-form input.text.short {width: 60px;}
.dino-form input.text.digit {text-align: right;}
.dino-form textarea.long {height: 200px;}








/* 상태별 디자인 (normal, vaild, invalid + focus) */
.dino-form :is(input.text, select, textarea):focus {outline-color: var(--color-focus);}
.dino-form :is(input.text, select, textarea):focus + i {color: var(--color-focus);}
.dino-form.valid :is(input.text, select, textarea) {border-color: var(--color-valid); color: var(--color-valid); padding-right: calc(var(--size-font) * 2);}
.dino-form.valid :is(input.text, select, textarea):focus {outline-color: var(--color-focus-valid);}
.dino-form.valid :is(input.text, select, textarea):focus + i {color: var(--color-valid)}
.dino-form.valid div.icon::after {content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: calc(var(--size-font) * 0.6); top: 50%; transform: translate(0, -50%); color: var(--color-valid); z-index: 30;}
.dino-form.invalid :is(input.text, select, textarea) {border-color: var(--color-invalid); color: var(--color-invalid); padding-right: calc(var(--size-font) * 2);}
.dino-form.invalid :is(input.text, select, textarea):focus {outline-color: var(--color-focus-invalid);}
.dino-form.invalid :is(input.text, select, textarea):focus + i {color: var(--color-invalid)}
.dino-form.invalid div.icon::after {content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: calc(var(--size-font) * 0.6); top: 50%; transform: translate(0, -50%); color: var(--color-invalid); z-index: 30;}
.dino-form.invalid > span.message {display: block;}
:is(.dino-form.valid, .dino-form.invalid) div.icon.right :is(input.text, select, textarea) + i {opacity: 0.3;}
:is(.dino-form.valid div.icon, .dino-form.invalid div.icon, .dino-form div.icon.right) select {background-position: right calc(var(--size-font) * 1.8) center;}

input.text[data-type="date"] {width: 100px;}




/* --------------------------------- */
/* File (.dino-file)                 */
/* --------------------------------- */
.dino-file {
  --size-font: 12px;
  --size-height: 28px;
  --color-bg: var(--base-bg);
  --color-bg-hover: var(--gray6);
  --color-text: var(--base-text2);
  --color-text-hover: var(--mint);
  --color-border: var(--gray5);
  --color-border-hover: var(--gray4);
  --color-focus: rgba(0, 122, 255, 0.6);
  --color-size: var(--mint);
  --color-btn: var(--mint);
  --color-btn-del: var(--red);
  --color-icon-info: var(--yellow);
  --color-icon-file: var(--orange);
}
.dino-file {position: relative; font-size: var(--size-font); color: var(--color-text);}
.dino-file input[type="file"] {outline-color: transparent; transition: outline-color 0.3s;}
.dino-file input[type="file"].hidden {display: none;}
.dino-file input[type="file"]:focus {outline-color: var(--color-focus);}
.dino-file > ul + input[type="file"] {margin-top: 0.3em;}

.dino-file > ul.file > li {position: relative; border: 1px solid var(--color-border); border-radius: 4px; line-height: calc(var(--size-height) - 2px); background-color: var(--color-bg); transition: all 0.3s;}
.dino-file > ul.file > li:hover {border-color: var(--color-border-hover); box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);}
.dino-file > ul.file > li + li {margin-top: 0.3em;}

.dino-file > ul.file > li .filename {display: block; position: relative; padding-left: 2.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 100px; outline: 2px solid transparent; border-radius: 4px; transition: all 0.3s;}
.dino-file > ul.file > li .filename > i {position: absolute; left: 0.3em; top: 50%; transform: translate(0, -50%); color: var(--color-icon-info); font-size: 1.2em;}
.dino-file > ul.file > li.uploading .filename > i {animation: dino-file-rotate 2s linear 0s infinite normal forwards;}
.dino-file > ul.file > li:not(.no-file, .uploading) .filename > i {color: var(--color-icon-file);}
.dino-file > ul.file > li a.filename::after {content: '\f063'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; right: 70px; top: 50%; transform: translate(0, -50%); opacity: 0; transition: opacity 0.3s; color: var(--color-text-hover);}
.dino-file > ul.file > li > a.filename:hover::after {opacity: 1; animation: dino-file-down 0.3s ease 0s infinite alternate forwards;}
.dino-file > ul.file > li:hover > span.filename {padding-right: 150px;}
.dino-file > ul.file > li > a:hover {color: var(--color-text-hover);}
.dino-file > ul.file > li > a:focus-visible {color: var(--color-text-hover); outline-color: var(--color-focus);}
.dino-file > ul.file > li:not(.no-file, .uploading) > i {position: absolute; left: 0.7em; top: 0.6em; color: var(--color-icon-file);}
.dino-file > ul.file > li span.size {position: absolute; right: 0.5em; top: 50%; transform: translate(0, -50%); border: 1px solid var(--color-size); color: var(--color-size); border-radius: 4px; line-height: calc(var(--size-height) - 12px); font-size: calc(var(--size-font) - 1px); padding: 0 0.3em;}
.dino-file > ul.file > li .function {position: absolute; right: 70px; top: 50%; transform: translate(0, -50%); display: none;}
.dino-file > ul.file > li:hover .function {display: block;}
.dino-file > ul.file > li .function > a {float: left; position: relative; width: calc(var(--size-height) - 8px); height: calc(var(--size-height) - 8px); vertical-align: middle; border: 1px solid var(--color-btn); color: var(--color-btn); border-radius: 100px; background-color: var(--color-bg); transition: background-color 0.3s;}
.dino-file > ul.file > li .function > a.del {border-color: var(--color-btn-del); color: var(--color-btn-del);}
.dino-file > ul.file > li .function > a:hover {background-color: var(--color-bg-hover);}
.dino-file > ul.file > li .function > a + a {margin-left: 3px;}
.dino-file > ul.file > li .function > a > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.dino-file > ul.image {position: relative; display: flex; flex-wrap: wrap; gap: 5px;}
.dino-file > ul.image > li {position: relative; width: 160px; height: 155px; border: 1px solid var(--color-border); border-radius: 4px; padding: 3px; overflow: hidden;}
.dino-file > ul.image > li span.image {display: block; position: relative; height: 95px; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden;}
.dino-file > ul.image > li.no-file span.image::before {content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4em; color: var(--color-icon-info); opacity: 0.6;}
.dino-file > ul.image > li.uploading span.image::before {content: '\f110'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4em; color: var(--color-icon-info); opacity: 0.6; animation: dino-file-rotate-center 2s linear 0s infinite normal forwards;}
.dino-file > ul.image > li span.image img {width: 100%; height: 100%; object-fit: contain;}
.dino-file > ul.image > li span.image a {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3em; height: 3em; border-radius: 100px; border: 1px solid var(--color-border); background-color: var(--base-bg); overflow: hidden; opacity: 0; transition: opacity 0.3s;}
.dino-file > ul.image > li span.image:hover a {opacity: 0.7;}
.dino-file > ul.image > li span.image a:hover {opacity: 0.95;}
.dino-file > ul.image > li span.image a span {position: absolute; left: -999px;}
.dino-file > ul.image > li span.image a::before {content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.6em; color: var(--color-icon-info);}
.dino-file > ul.image > li span.image a.origin::before {content: '\f002';}
.dino-file > ul.image > li span.image a.rotate::before {content: '\f2f9';}
.dino-file > ul.image > li span.image span.dimension {position: absolute; left: 0; bottom: -20px; width: 100%; line-height: 20px; background-color: rgba(0, 0, 0, 0.4); color: #ffffff; font-size: 11px; text-align: center; transition: bottom 0.3s;}
.dino-file > ul.image > li span.image:hover span.dimension {bottom: 0;}
.dino-file > ul.image > li span.filename {display: block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; padding-left: 2em;}
.dino-file > ul.image > li span.filename > i {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); color: var(--color-icon-info); font-size: 1.2em;}
.dino-file > ul.image > li.uploading span.filename > i {animation: dino-file-rotate 2s linear 0s infinite normal forwards;}
.dino-file > ul.image > li:not(.no-image, .uploading) span.filename > i {color: var(--color-icon-file);}
.dino-file > ul.image > li:not(.no-image, .uploading) span.filename > em {vertical-align: middle;}
.dino-file > ul.image > li span.size {position: absolute; left: 3px; bottom: 5px; border: 1px solid var(--color-size); color: var(--color-size); border-radius: 4px; line-height: calc(var(--size-height) - 12px); font-size: calc(var(--size-font) - 1px); padding: 0 0.3em;}
.dino-file > ul.image > li .function {position: absolute; right: 3px; bottom: 5px;}
.dino-file > ul.image > li .function > a {float: left; position: relative; width: calc(var(--size-height) - 8px); height: calc(var(--size-height) - 8px); vertical-align: middle; border: 1px solid var(--color-btn); color: var(--color-btn); border-radius: 100px; background-color: var(--color-bg); transition: background-color 0.3s;}
.dino-file > ul.image > li .function > a.del {border-color: var(--color-btn-del); color: var(--color-btn-del);}
.dino-file > ul.image > li .function > a:hover {background-color: var(--color-bg-hover);}
.dino-file > ul.image > li .function > a + a {margin-left: 3px;}
.dino-file > ul.image > li .function > a > i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

@keyframes dino-file-down {
  0% {transform: translate(0, -60%);}
  100% {transform: translate(0, -40%);}
}
@keyframes dino-file-rotate {
  0% {transform: translate(0, -50%) rotate(0);}
  100% {transform: translate(0, -50%) rotate(360deg);}
}
@keyframes dino-file-rotate-center {
  0% {transform: translate(-50%, -50%) rotate(0);}
  100% {transform: translate(-50%, -50%) rotate(360deg);}
}








/* --------------------------------- */
/* Table                             */
/* --------------------------------- */

table {
  --size-font: 13px;
  --size-height: 28px;
  --color-bg: var(--gray6);
  --color-border: var(--gray5);
}
table.info-detail {font-size: var(--size-font); table-layout: fixed; width: 100%; color: var(--base-text);}
table.info-detail :where(th, td) {position: relative; border: 1px solid var(--color-border); padding: 5px 10px;}
table.info-detail thead th {background-color: var(--color-bg); line-height: 20px;}
table.info-detail tbody :where(th, td.th) {background-color: var(--gray6); font-weight: 500; padding-right: 15px; line-height: var(--size-height); text-align: right;}
table.info-detail tbody :where(th.line-break, td.th.line-break) {line-height: unset;}
table.info-detail tbody :where(th, td.th) em {color: var(--red); margin-right: 4px;}
table.info-detail col.th {width: 120px;}
table.info-detail p.desc {font-size: calc(var(--size-font) - 1px); color: var(--red); margin-top: 5px;}
table.info-detail span.desc {font-size: calc(var(--size-font) - 1px); color: var(--red); margin-left: 10px; vertical-align: middle;}
table.info-detail a.status {display: inline-block; min-width: 60px; height: 28px; line-height: 26px; text-align: center; vertical-align: middle; border: 1px solid var(--gray5); background-color: var(--base-bg); color: var(--base-text); border-radius: 4px; vertical-align: middle; margin-left: 20px;}
table.info-detail .dino-form.block + a.status {margin-left: 0; margin-left: 0; margin-top: 5px;}


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;}
div.dino-data-table + div.dino-pagination {margin-top: 10px;}
table.data-list {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color); min-width: 100%;}
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.multi-line-header thead th {line-height: 1.6em;}
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 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:not(.dino-btn) {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
table.data-list td > a:not(.dino-btn):hover {color: var(--blue);}
table.data-list td span.image {display: block; position: relative; border: 1px solid var(--gray6); transition: all 0.3s; height: 60px; overflow: hidden;}
table.data-list td > a:hover span.image {border-color: var(--blue);}
table.data-list td span.image img {width: 100%; height: 100%; object-fit: cover;}
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 > *.sticky {position: sticky; left: 0; z-index: 100; background-color: var(--gray6);}
table.data-list tr > *.sticky.last::after {content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: var(--gray4);}
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;}


table.data-detail {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color); min-width: 100%; border-top: 1px solid var(--gray4);}
table.data-detail > colgroup > col {width: calc(50% - 140px);}
table.data-detail > colgroup > col.th {width: 140px;}
table.data-detail > tbody > tr:last-child > :where(th, td) {border-bottom-style: solid;}
table.data-detail > :where(thead, tbody, tfoot) > tr > :where(th, td) {position: relative; padding: 5px 10px; line-height: 28px; border-bottom: 1px dashed var(--gray4);}
table.data-detail > :where(thead, tbody, tfoot) > tr > :where(th, td.th) {background-color: var(--gray6); text-align: right; padding-right: 20px; border-right: 1px dashed var(--gray4);}
table.data-detail > :where(thead, tbody, tfoot) > tr > :where(th, td.th) em {color: var(--red); margin-right: 4px;}
table.data-detail tbody :where(th.line-break, td.th.line-break) {line-height: unset;}
table.data-detail td.editor {padding: 0;}
table.data-detail div.long-text {white-space: pre-line; line-height: 1.4em;}
table.data-detail span.desc {font-size: 11px; color: var(--red); margin-left: 20px;}
table.data-detail p.desc {font-size: 11px; color: var(--red); margin-top: 3px; line-height: 1.2;}


div.data-cell {position: relative;}
div.data-cell > .dino-btn-container:first-child {margin-bottom: 5px;}
table.data-cell {table-layout: fixed; background-color: var(--bg-color); color: var(--text-color); width: 100%; font-size: 12px; text-align: center;}
table.data-cell thead {line-height: 22px;}
table.data-cell :where(th, td) {border: 1px solid var(--gray4); padding: 3px 8px;}
table.data-cell :where(th, td.th) {background-color: var(--gray6);}
table.data-cell td.left {text-align: left;}
table.data-cell + div {line-height: 1.2; margin-top: 5px;}
table.data-cell input[type="checkbox"] {vertical-align: middle;}
table.data-cell div.function {position: relative;}
table.data-cell div.function > ul {position: absolute; display: flex; gap: 0 3px; left: 50%; top: calc(100% + 5px); transform: translate(-50%, 0); border: 1px solid var(--gray4); border-radius: 4px; background-color: var(--gray6); padding: 3px 8px; line-height: initial; z-index: 100; box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1); display: none;}
table.data-cell div.function.on > ul {display: flex;}
table.data-cell div.function > ul > li > a {vertical-align: top;}
table.data-cell div.function > ul::before {content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); top: -16px; border: 8px solid transparent; border-bottom-color: var(--gray4);}
table.data-cell div.function > ul::after {content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); top: -15px; border: 8px solid transparent; border-bottom-color: var(--gray6);}
table.data-cell thead th em {color: var(--red); margin-right: 3px;}
table.data-cell span.logo {position: relative; display: inline-block; vertical-align: middle; width: 30px; height: 30px; border-radius: 100px; border: 1px solid var(--gray4); overflow: hidden; font-size: 16px; color: var(--base-text2); margin-right: 5px;}
table.data-cell span.logo > :where(i, img) {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%;}



/* 2 분할 */
table td div.form-line {position: relative;}
table td div.form-line + div.form-line {margin-top: 5px;}
table td div.form-line.grid {display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);}









/* --------------------------------- */
/* Pagination                        */
/* --------------------------------- */

div.dino-pagination {position: relative; text-align: center; font-size: 13px; color: var(--base-text2);}
div.dino-pagination > .container {display: inline-flex; border: 1px solid var(--color-border);; border-radius: 4px; overflow: hidden;}
div.dino-pagination ol {display: inline-flex;}
div.dino-pagination ol > li {border-right: 1px solid var(--color-border);}
div.dino-pagination ol > li:first-child {border-left: 1px solid var(--color-border);}
div.dino-pagination a {display: block; position: relative; min-width: 30px; line-height: 30px; padding: 0 6px; transition: all 0.3s;}
div.dino-pagination a:hover {background-color: var(--gray6);}
div.dino-pagination > .container > a:first-child {border-right: 1px solid var(--color-border);}
div.dino-pagination > .container > a:last-child {border-left: 1px solid var(--color-border);}
div.dino-pagination ol > li.on > a {background-color: var(--color-point); color: #ffffff;}




/* --------------------------------- */
/* loading                      */
/* --------------------------------- */
#page-loading {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); display: none; z-index: 1000000;}
#page-loading.on {display: block;}
#page-loading > p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(0, 0, 0, 0.3); border-radius: 200px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);}
#page-loading > p > img {width: 160px;}
#page-loading > p > em {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 12px;}

.dino-component-loading {position: relative; text-align: center; background-color: rgba(0, 0, 0, 0.05);}
.dino-component-loading > p {display: inline-block; padding: 10px 0;}
.dino-component-loading > p > img {height: 100px;}