@charset "UTF-8";

/* * { font-family:'Spoqa Han Sans Neo', 'Nanum Gothic', 'sans-serif'; font-weight: 300; }
.nanum-gothic-regular { font-family: "Nanum Gothic", sans-serif; font-weight: 400; font-style: normal; }
.nanum-gothic-bold { font-family: "Nanum Gothic", sans-serif; font-weight: 700; font-style: normal; }
.nanum-myeongjo-regular { font-family: "Nanum Myeongjo", serif; font-weight: 400; font-style: normal; }
.nanum-myeongjo-bold { font-family: "Nanum Myeongjo", serif; font-weight: 700; font-style: normal; }
.nanum-gothic-coding-regular { font-family: "Nanum Gothic Coding", monospace; font-weight: 400; font-style: normal; }
.nanum-gothic-coding-bold { font-family: "Nanum Gothic Coding", monospace; font-weight: 700; font-style: normal; } */

:root {
    --font-sans-serif: "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "Nanum Gothic", sans-serif;
    --font-serif: 'Nanum Myeongjo', serif;
    --font-monospace: 'Nanum Gothic Coding', monospace;
}

/* 7,5,4,3,1 */
html { height: 100%; font-size: 16px; font-family: var(--font-sans-serif); font-weight: 300; }

body { margin: 0; padding: 0; height: 100%; color: #333; }

a { text-decoration: none; }
h1, p, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: 400; }

h1 { font-size: 1.2rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.1rem; }

.symbol { margin: 0; padding: 0; }
button:has(.symbol) { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px; }
button > .symbol + span { padding-right: 4px; }

.page-action { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; }

/* form */
form, input, button, select, option, textarea { color: #333; font-size: 0.9rem; font-family: var(--font-sans-serif); font-weight: 300; }
fieldset { border: 1px solid #ccc; border-radius: 4px; }
legend { font-weight: 400; }
textarea { resize: none; }
textarea, input:not([type=radio],[type=checkbox]) { outline: 0; transition: all .15s ease-in-out; }
textarea:focus, input:focus:not([type=radio],[type=checkbox]) { border-color: #fe8d59; box-shadow: 0 0 0 4px rgba(254, 141, 89, .25); }
textarea, input[type=text], input[type=date], input[type=number], input[type=password], button, select {
    margin: 0; padding: 4px; border: 1px solid #ccc; border-radius: 5px; }
button { padding: 4px 16px; cursor: pointer; background-color: #fff; transition: border-color .15s ease-in-out; }
button:hover { border-color: #666; }
button svg { margin-right: 4px; color: #666; }
input[type=checkbox], input[type=radio] { margin: 0; margin-right: 4px; padding: 0; width: 1rem; height: 1rem; cursor: pointer; }
label:has([type=checkbox],[type=radio]) { display: inline-flex; align-items: center;
    padding-left: 8px; padding-right: 8px; cursor: pointer; border-radius: 3px; background-color: #eee; }
::placeholder { padding-left: 4px; font-size: 0.9rem; color: #333; }

.unit { margin-left: 4px; padding: 2px 4px; border-radius: 4px; background-color: #eee; }
.full { width: 100%; }
.txt { vertical-align: top; }
td:has(.txtbox) { position: relative; }
.txtbox { min-height: 6rem; }
.txtbox > textarea { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.btn-input-clear { display: none; margin: 0; margin-left: 8px; padding: 0; border: none; }
.form-group-item { display: flex; gap: 4px; }
.form-each-item { display: flex; }
.form-each-item:has(.unit) { align-items: flex-end; }
.form-each-item input { margin-left: 16px; }
.form-each-item input:first-child { margin-left: 0; }
.form-action { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; }
#formFitting .form-action button span { font-size: 1.15rem; }

/* table */
table.grid { margin-bottom: 16px; width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { border: 1px solid #ccc; padding: 8px; text-align: left; }
table.grid th { font-weight: 400; background-color: #f6f6f6; }

/* modal */
dialog { position: fixed; opacity: 0; transform: scale(0.75); visibility: hidden; border: none; border-radius: 16px;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0s 0.25s; }
dialog[open].transition-in { opacity: 1; transform: scale(1); visibility: visible; transition-delay: 0s; }
dialog[open].transition-out { opacity: 0; transform: scale(0.75);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0s 0.25s; }
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px);
    opacity: 0; transition: opacity 0.25s ease-in-out; }
dialog[open].transition-in::backdrop { opacity: 1; }
dialog[open].transition-out::backdrop { opacity: 0; }

body:has(dialog[open]) { overflow: hidden; }

footer { margin: 0; padding: 1rem 0; }

.kakao-talk { color: #3c1e1e; background-color: #fae100; }
.kakao-talk * { color: #3c1e1e; }


/* grid */
/*
<div class="grid-wrap">
    <div class="grid-title">그리드 제목</div>
    <div class="grid-head">
        <div class="grid-row">
            <div class="grid-col">컬럼</div>
        </div>
    </div>
    <div class="grid-body">
        <div class="grid-row">
            <div class="grid-col">데이터</div>
        </div>
    </div>
</div>
*/
.grid-wrap { display: grid; grid-template-rows: auto auto 1fr; width: 100%;
    min-height: 400px; height: 400px; border: 1px solid #e5e8ec;
    border-radius: 8px; background-color: #fff; overflow: hidden;
    box-shadow: 0 0 4px rgba(31, 41, 55, 0.05); transition: height 0.5s ease-in-out; }
.grid-wrap .grid-col:nth-child(even) { background-color: #fafafa; }
.grid-title { padding: 8px; font-weight: 400; }
.grid-row { display: grid; }
.grid-head { border-top: 1px solid #e5e8ec; background-color: #f9fafb; }
.grid-head .grid-row { grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr)); }
.grid-head .grid-col { padding: 6px 8px; font-size: 0.9rem; font-weight: 400; }
.grid-body { margin-bottom: -1px; border-top: 1px solid #e5e8ec; overflow-y: scroll; overflow-x: hidden; }
.grid-body .grid-row { border-bottom: 1px solid #e5e8ec; grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr)); }
.grid-body .grid-col { padding: 12px 8px; font-size: 0.9rem; }
.grid-foot { border-top: 1px solid #e5e8ec; }
.grid-foot .grid-row { grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr)); }
.grid-col.num { padding-right: 16px; text-align: right; }
.grid-indicate { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: #999; }

/* pagination */
/* .pagination {} */
.paginator { display: flex; justify-content: center; align-items: center; padding: 8px 0; gap: 4px; }
.paginator a,
.paginator span,
.paginator button { display: inline-flex; justify-content: center; align-items: center;
    padding: 4px 8px 3px; min-width: 2rem; color: #999; border: 1px solid #ccc;
    border-radius: 5px; background-color: #fff; cursor: pointer;
    transition: all 0.15s ease-in-out; }
.paginator .current { color: white; cursor: default; border-color: #fe8d59; background-color: #fe8d59; }
.paginator .disabled { color: #ccc; cursor: not-allowed; background-color: #eee; opacity: .5; }
.paginator a:hover:not(.current):not(.disabled),
.paginator button:hover { color: #333; border-color: #fe8d59; }
.paginator input { width: 5rem; text-align: right; }
.pagination .page-info { padding-right: 16px; line-height: 2; text-align: right; }

#wrapToast { position: fixed; display: flex; flex-direction: column; align-items: flex-end;
    right: 24px; bottom: 24px; z-index: 1000; }
#wrapToast .toast { margin: 0; margin-bottom: 16px; padding: 16px 24px; min-width: 240px; color: white;
    border-radius: 5px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); background-color: #333;
    opacity: 0; transition: opacity 0.5s, transform 0.5s; transform: translateX(100%); }
#wrapToast .toast.success { background-color: #1B5E20; }
#wrapToast .toast.error { background-color: #B71C1C; }
#wrapToast .toast.warn { background-color: #F57F17; }
#wrapToast .toast.show { opacity: 1; transform: translateX(0); }

/*
input[type=text], input[type=date] { padding: 0 0.5em; }
button { padding: 0 1em; cursor: pointer; }
select { padding: 0 0.25em; }
input[type=date] { width: 8.5em; }
input[type=number] { text-align: right; }
label input + span { user-select: none; }

a { text-decoration: none; }
h1, p, ul, ol, li, dl, dt, dd, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
form { margin: 0; padding: 0; }

input, button, textarea { margin: 0; padding: 5px 10px; border:1px solid #999; border-radius: 5px;
    font-family: var(--font-monospace); font-size: 1rem; }

fieldset { margin: 0; padding: 0.5rem; }
fieldset.action { margin-top: 1rem; }

legend { margin: 0; padding: 0 0.5rem; line-height: 1.5; } */

/* form */
/*     form { margin: 0; padding: 0; outline: none; user-select: none; }
    form *:disabled { border: 1px solid #ccc; color: #666; text-shadow: 1px 1px 1px #ccc; background-color: #999; }
    form fieldset { margin: 0; padding: 0.5rem; }
    form fieldset.action { margin-top: 1rem; }
    form legend { margin: 0; padding: 0 0.5rem; line-height: 1.5; }
    form input, form button, form select, form textarea { outline: none; }
    form input, form select, form button, form label { font-family: var(--font-monospace); }
    form input { padding: 0 5px; height: 1.5rem; border: 1px solid #999; border-radius: 5px; }
    form input[type=time] { padding: 0 5px; height: 1.5rem; }
    form input[type=button], form button { padding: 0 5px; height: 1.5rem; vertical-align: 0;
        cursor: pointer; border: 1px solid #999; border-radius: 5px; }
    form select { padding: 0 5px; height: 1.5rem; border: 1px solid #999; border-radius: 5px; }

    form label.btn { display: inline-flex; align-items: center; margin-top: -1px;
        padding: 0 5px; border: 1px solid #999; border-radius: 5px; cursor: pointer;
        height: 1.5rem; vertical-align: middle; background-color: #eee; }
    form label.btn span { margin-bottom: -1px; padding-left: 5px; } */












/*




header { position: fixed; top: 0; left: 80px; right: 0; height: 64px; background-color: #fff; z-index: 9000; }
header h1 { display: inline-block; padding-left: 8px; font-size: 14pt; font-weight: normal; line-height: 60px; text-shadow: 0 0 1px #333; }

aside { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; background-color: #131313; z-index: 9000; }
aside ul {}
aside li {}
aside a { display: block; margin: 32px 0; color: #5b637a; text-align: center; }
aside a:hover { color: #fbe158; }
aside i { font-size: 28px; }
aside span { display: block; font-size: 14px; line-height: 2; }
 */
/*
table { border-collapse: collapse; }
table th, table td { border: 1px solid #999; }

.pagination { display: flex; justify-content: center; margin: 0; padding: 10px 0; background-color: #fff; }
.pagination a, .pagination span { display: flex; justify-content: center; align-items: center; color: #333;
    margin: 0 2px; padding: 0; min-width: 2rem; height: calc(2rem + 2px); text-align: center;
    border-bottom: 4px solid #fff; }
.pagination a { text-decoration: none; }
.pagination a.disable { color: #ccc; }
.pagination a.current { font-weight: bold; border-bottom: 2px solid #333; }
.pagination i { font-style: normal; }
.pagination i.daquo { font-size: 0.95rem; font-weight: bold; }
.pagination i.saquo { font-size: 0.8rem; font-weight: bold; }
.pagination i.ellip { font-size: 1.5rem; font-weight: bold; }
.pagination i.reload { font-size: 1.1rem; font-weight: bold; }
.pagination span.summary { padding: 0 8px; }
.pagination i.summary { margin-right: 8px; font-size: 1.15rem; }

header { margin:-16px -16px 16px -16px; padding: 0; height: 52px; border-bottom: 1px solid #ddd; background-color: #fff; }
header nav { margin: 0; padding: 0; height: 100%; }
header nav ul { display: flex; align-items: center; margin: 0; padding: 0; height: 100%; }
header nav ul li { margin: 0 8px; padding: 0; }
header nav ul li a { display: block; padding: 8px; color: #333; font-size: 1.1rem; font-weight: 400; text-decoration: none; }

section { margin: 0; padding: 0; }
section h1 { margin: 0; padding: 0; font-size: 1.25rem; }

footer { position: fixed; left: 0; right: 0; bottom: 0; height: 32px;
    color: #fff; font-size: 1.25rem; background-color: #333; }
 */

/* 말풍선 컨테이너: 버튼,링크등 */
[data-tooltip] { position: relative; }
[data-tooltip]::after,
[data-tooltip]::before { position: absolute; margin: 0; opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s; }
/* 말풍선 */
[data-tooltip]::after { padding: 4px 8px; content: attr(data-tooltip); font-size: 0.9rem; color: #fff;
    border-radius: 4px; white-space: nowrap; background: #333; z-index: 10; }
/* 화살표 */
[data-tooltip]::before { padding: 0; content: ''; border: 6px solid transparent; z-index: 11; }
/* hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before { opacity: 1; visibility: visible; }
/* right / default */
[data-tooltip]:not([data-tooltip-position])::after,
[data-tooltip][data-tooltip-position="right"]::after,
[data-tooltip]:not([data-tooltip-position])::before,
[data-tooltip][data-tooltip-position="right"]::before { top: 50%; left: 100%; transform: translateY(-50%) translateX(0); }
[data-tooltip]:not([data-tooltip-position])::before,
[data-tooltip][data-tooltip-position="right"]::before { margin-left: -11px; border-right-color: #333; }
[data-tooltip]:not([data-tooltip-position]):hover::after,
[data-tooltip][data-tooltip-position="right"]:hover::after,
[data-tooltip]:not([data-tooltip-position]):hover::before,
[data-tooltip][data-tooltip-position="right"]:hover::before { transform: translateY(-50%) translateX(8px); }
/* top */
[data-tooltip][data-tooltip-position="top"]::after,
[data-tooltip][data-tooltip-position="top"]::before { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(0); }
[data-tooltip][data-tooltip-position="top"]::before { margin-bottom: -11px; border-top-color: #333; }
[data-tooltip][data-tooltip-position="top"]:hover::after,
[data-tooltip][data-tooltip-position="top"]:hover::before { transform: translateX(-50%) translateY(-8px); }
/* bottom */
[data-tooltip][data-tooltip-position="bottom"]::after,
[data-tooltip][data-tooltip-position="bottom"]::before { top: 100%; left: 50%; transform: translateX(-50%) translateY(0); }
[data-tooltip][data-tooltip-position="bottom"]::before { margin-top: -11px; border-bottom-color: #333; }
[data-tooltip][data-tooltip-position="bottom"]:hover::after,
[data-tooltip][data-tooltip-position="bottom"]:hover::before { transform: translateX(-50%) translateY(8px); }
/* left */
[data-tooltip][data-tooltip-position="left"]::after,
[data-tooltip][data-tooltip-position="left"]::before { top: 50%; right: 100%; transform: translateY(-50%) translateX(0); }
[data-tooltip][data-tooltip-position="left"]::before { margin-right: -11px; border-left-color: #333; }
[data-tooltip][data-tooltip-position="left"]:hover::after,
[data-tooltip][data-tooltip-position="left"]:hover::before { transform: translateY(-50%) translateX(-8px); }


/*



.num { text-align: right; }
.won { text-align: right; }
.sta { text-align: center; }
.dat { text-align: center; }
.hide { display: none; }

.system_error { padding: 1em 2em; width: auto; color: #c00; font-family: var(--font-monospace); font-size: 1.5rem;
    border: 1px solid #999; border-left: 0.3em solid #c00; border-radius: 0.2em; text-shadow: 0 0 3px #999;
    background-color: #ff9; }

body { padding-top: 64px; padding-left: 80px; }

header { position: fixed; top: 0; left: 80px; right: 0; height: 61px; border-bottom: 1px solid #ddd;
    background-color: #fff; z-index: 9000; } */
/* header h1 { display: inline-block; padding-left: 8px; font-size: 1rem; font-weight: normal; line-height: 60px; text-shadow: 0 0 1px #333; } */
/*
#siteMenu { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; background-color: #111; z-index: 9000; }
#siteMenu a { display: block; margin: 32px 0; color: #567; text-align: center; }
#siteMenu i { font-size: 1.65rem; }  *//* 메뉴 아이콘 *//*
#siteMenu span { display: block; font-size: 0.95rem; line-height: 2; font-weight: 400; }
#siteMenu a:hover { color: #fe5; }
#siteMenu .active { color: #fe5; }

#pageMenu { position: fixed; top: 0; left: 80px; right: 0; height: 60px; background-color: #fff; z-index: 9001; }
#pageMenu aside { margin: 0; padding: 0; }
#pageMenu ul { display: flex; }
#pageMenu li { border-right: 1px solid #ddd; }
#pageMenu a { display: flex; height: 60px; align-items: center; padding: 0 0.75em; font-size: 1.15rem; font-weight: 400;
    color: #ccc; }
#pageMenu li.active a { color: #333; background-color: #fd0; }
#pageMenu a:hover { color: #fff; background-color: #fd0; }

main { margin: 0; padding: 8px; }

.grid { border-collapse: separate; border-spacing: 0; border: 1px solid #999; border-top: none;
    background-color: #fff; }
.grid thead th { padding: 0.5em 1em; font-weight: 400; white-space: nowrap; background-color: #eee;
    border-top: 1px solid #999; border-left: 1px solid #999; border-bottom: 1px solid #999; }
.grid thead th:nth-child(1) { border-left: none; }
.grid tbody td { padding: 0.25em 0.5em; white-space: nowrap; border-top: 1px solid #ccc; border-left: 1px solid #ccc;
    white-space: nowrap; }
.grid tbody tr:nth-child(1) td { border-top-color: #999; }
.grid tbody td:nth-child(1) { border-left: none; } */
/* Grid Status Message *//*
.grid tfoot td { padding: 0; text-align: center; border-top: 1px solid #999; }
.grid .grid_status { position: relative; font-size: 5rem; font-weight: 700; text-shadow: 0 0 3px #999; color: #eee; }
.grid .grid_status.empty { color: #ecc; }
.grid .grid_status::after { position: absolute; top: 0; left: 0; right: 0; color: #fff; overflow: hidden;
    animation: grid_status_animation 2s linear infinite; }
@keyframes grid_status_animation {
    0%   { height: 0%; }
    100% { height: 100%; }
}

.paginator { display: flex; align-items: center; background-color: #fff; }
.paginator a, .paginator span { margin: 0 0.25em; padding: 0.5em 0.75em; line-height: 1; border-radius: 0.25em; }
.paginator a { color: #fff; cursor: pointer; background-color: #444; }
.paginator .current { color: #444; box-shadow: 0px 0px 5px inset #444; font-weight: 400; }
.paginator .ddd { color: #333; }
 */
/*
Flex Container
    display:            flex | inline-flex
    flex-flow:          flex-direction, flex-wrap
    flex-direction:     row | row-reverse | column | column-reverse
    flex-wrap:          wrap | nowrap | wrap-reverse
    justify-content:    flex-start | flex-end | center | space-around | space-between | space-evenly
    align-content:      stretch | flex-start | flex-end | center | space-around | space-between | space-evenly
    align-items:        stretch | flex-start | flex-end | center | baseline
    gap:                flex-item 의 간격

Flex Items
    order:      index number
    flex:       flex-grow, flex-shrink, flex-basis
    flex-grow:
    flex-shrink:
    flex-basis:
    align-self:
*/

/*
table { border-collapse: collapse; }
table th, table td { border: 1px solid #999; }

.pagination { display: flex; justify-content: center; margin: 0; padding: 10px 0; font-size: 1rem; background-color: #fff; }
.pagination a, .pagination span { display: flex; justify-content: center; align-items: center; color: #333;
    margin: 0 2px; padding: 0; min-width: 2rem; height: calc(2rem + 2px); text-align: center;
    border-bottom: 4px solid #fff; }
.pagination a { text-decoration: none; }
.pagination a.disable { color: #ccc; }
.pagination a.current { font-weight: bold; border-bottom: 2px solid #333; }
.pagination i { font-style: normal; }
.pagination i.daquo { font-size: 0.95rem; font-weight: bold; }
.pagination i.saquo { font-size: 0.8rem; font-weight: bold; }
.pagination i.ellip { font-size: 1.5rem; font-weight: bold; }
.pagination i.reload { font-size: 1.1rem; font-weight: bold; }
.pagination span.summary { padding: 0 8px; }
.pagination i.summary { margin-right: 8px; font-size: 1.15rem; }

header { margin:-16px -16px 16px -16px; padding: 0; height: 52px; border-bottom: 1px solid #ddd; background-color: #fff; }
header nav { margin: 0; padding: 0; height: 100%; }
header nav ul { display: flex; align-items: center; margin: 0; padding: 0; height: 100%; }
header nav ul li { margin: 0 8px; padding: 0; }
header nav ul li a { display: block; padding: 8px; color: #333; font-weight: bold; text-decoration: none; }

section { margin: 0; padding: 0; }
section h1 { margin: 0; padding: 0; font-size: 1.25rem; }
 */