@charset "utf-8";
@import url('/fonts/PretendardGOV/font_PretendardGOV.css');

@import url('iconoir.css');

/*-------------------------------------------------
Title       : Reset
-------------------------------------------------*/

/* --- Root --- */
:root{
    --color-primary-5:  #e7f7e3;
    --color-primary-10: #d0efc9;
    --color-primary-20: #a4dd99;
    --color-primary-30: #78c66f;
    --color-primary-40: #4da64a;
    --color-primary-50: #358a36;
    --color-primary-60: #2b6f2d;
    --color-primary-70: #235628;
    --color-primary-80: #193e1f;
    --color-primary-90: #122e1a;
    --color-primary-95: #0d2114;

    --color-secondary-5:  #eef8f7;
    --color-secondary-10: #d5ecea;
    --color-secondary-20: #b7dedd;
    --color-secondary-30: #94cbca;
    --color-secondary-40: #70b3b2;
    --color-secondary-50: #569c9b;
    --color-secondary-60: #448785;
    --color-secondary-70: #35716f;
    --color-secondary-80: #2a5c5a;
    --color-secondary-90: #1d4544;
    --color-secondary-95: #122f2f;

    --color-gray-5:  #f7f8f7;
    --color-gray-10: #e9ebe9;
    --color-gray-20: #d1d4d1;
    --color-gray-30: #b5bab5;
    --color-gray-40: #969c96;
    --color-gray-50: #797f79;
    --color-gray-60: #5f645f;
    --color-gray-70: #494e49;
    --color-gray-80: #353835;
    --color-gray-90: #222422;
    --color-gray-95: #161716;

    --color-point-5:  #fff2e0;
    --color-point-10: #ffe0b8;
    --color-point-20: #ffc888;
    --color-point-30: #ffa84d;
    --color-point-40: #ff8a1f;
    --color-point-50: #e76e00;
    --color-point-60: #c25900;
    --color-point-70: #9b4500;
    --color-point-80: #753300;
    --color-point-90: #552400;
    --color-point-95: #3f1a00;

    --color-danger-5: #fdefec;
    --color-danger-10: #fcdfd9;
    --color-danger-20: #f7afa1;
    --color-danger-30: #f48771;
    --color-danger-40: #f05f42;
    --color-danger-50: #de3412;
    --color-danger-60: #bd2c0f;
    --color-danger-70: #8a240f;
    --color-danger-80: #5c180a;
    --color-danger-90: #390d05;
    --color-danger-95: #260903;

    --color-warning-5: #fff3db;
    --color-warning-10: #ffe0a3;
    --color-warning-20: #ffc95c;
    --color-warning-30: #ffb114;
    --color-warning-40: #c78500;
    --color-warning-50: #9e6a00;
    --color-warning-60: #8a5c00;
    --color-warning-70: #614100;
    --color-warning-80: #422c00;
    --color-warning-90: #2e1f00;
    --color-warning-95: #241800;
    
    --color-success-5: #eaf6ec;
    --color-success-10: #d8eedd;
    --color-success-20: #a9dab4;
    --color-success-30: #7ec88e;
    --color-success-40: #3fa654;
    --color-success-50: #228738;
    --color-success-60: #267337;
    --color-success-70: #285d33;
    --color-success-80: #1f4727;
    --color-success-90: #122b18;
    --color-success-95: #0e2012;

    --color-information-5: #e7f4fe;
    --color-information-10: #d3ebfd;
    --color-information-20: #9ed2fa;
    --color-information-30: #5fb5f7;
    --color-information-40: #2098f3;
    --color-information-50: #0b78cb;
    --color-information-60: #096ab3;
    --color-information-70: #085691;
    --color-information-80: #053961;
    --color-information-90: #03253f;
    --color-information-95: #021a2c;

    --color-border: #ccd1cc;
    --color-text-subtle: var(--color-gray-70);
    --color-text-disabled: var(--color-gray-40);

    --transition-base: 0.2s ease-in-out;
    --box-shadow-base: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

/* --- Reset --- */
*, *::before, *::after {box-sizing: border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-break: keep-all;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section, picture, source {display: block;}
ol, ul {list-style: none;}
table {width: 100%; border-collapse: collapse; border-spacing: 0;}
a {text-decoration: none; color: inherit;}
img {max-width: 100%; border: 0; font-size: 0; vertical-align: middle;}
input, button, textarea, select {font-family: inherit; font-size: inherit; color: inherit;}
button, input[type="button"], input[type="submit"] {cursor: pointer;}
button {background: none; border: 0; font: inherit; padding: 0;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
textarea {resize: none;}
html {font-size: 10px; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;}
body {min-height: 100vh; line-height: 1.5; font-size: 1.7rem; font-family: 'Pretendard GOV', sans-serif; color: var(--color-gray-90);}
caption, legend, .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
a, button {transition: var(--transition-base);}
h1, h2, h3, h4, h5, h6, strong {font-weight: 700;}

@media screen and (max-width: 767px) {
    *, *::before, *::after,
    p {word-break: break-all;}
}

/* --- Skip --- */
#skip-link > a {
    position: fixed;
    top: 100%;
    left: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4rem;
    background: var(--color-gray-95);
    font-size: 1.5rem;
    color: #fff;
    transition: none;
}


#skip-link > a:focus, 
#skip-link > a:active {
    top: 0;
    outline-offset: -0.4rem;
    box-shadow: inset 0 0 0 0.4rem var(--color-gray-50);
}

/* --- Focus --- */
*:focus {
    outline: 0.2rem solid #fff;
    outline-offset: 0;
	box-shadow: 0 0 0 0.4rem var(--color-gray-50);
}

/* --- Margin --- */
.m0 {margin: 0 !important}

.mt0 {margin-top: 0 !important}
.mt5 {margin-top: 0.5rem !important}
.mt10 {margin-top: 1rem !important}
.mt15 {margin-top: 1.5rem !important}
.mt20 {margin-top: 2rem !important}
.mt25 {margin-top: 2.5rem !important}
.mt30 {margin-top: 3rem !important}
.mt35 {margin-top: 3.5rem !important}
.mt40 {margin-top: 4rem !important}
 
.mb0 {margin-bottom: 0 !important}
.mb5 {margin-bottom: 0.5rem !important}
.mb10 {margin-bottom: 1rem !important}
.mb15 {margin-bottom: 1.5rem !important}
.mb20 {margin-bottom: 2rem !important}
.mb25 {margin-bottom: 2.5rem !important}
.mb30 {margin-bottom: 3rem !important}
.mb35 {margin-bottom: 3.5rem !important}
.mb40 {margin-bottom: 4rem !important}

.ml0 {margin-left: 0 !important}
.ml5 {margin-left: 0.5rem !important}
.ml10 {margin-left: 1rem !important}
.ml15 {margin-left: 1.5rem !important}
.ml20 {margin-left: 2rem !important}
.ml25 {margin-left: 2.5rem !important}
.ml30 {margin-left: 3rem !important}
.ml35 {margin-left: 3.5rem !important}
.ml40 {margin-left: 4rem !important}

.mr0 {margin-right: 0 !important}
.mr5 {margin-right: 0.5rem !important}
.mr10 {margin-right: 1rem !important}
.mr15 {margin-right: 1.5rem !important}
.mr20 {margin-right: 2rem !important}
.mr25 {margin-right: 2.5rem !important}
.mr30 {margin-right: 3rem !important}
.mr35 {margin-right: 3.5rem !important}
.mr40 {margin-right: 4rem !important}

.mr_auto {margin-right: auto !important}
.ml_auto {margin-left: auto !important}


/* --- Padding --- */
.p0 {padding: 0 !important}

.pt5 {padding-top: 0.5rem !important}
.pt10 {padding-top: 1rem !important}
.pt15 {padding-top: 1.5rem !important}
.pt20 {padding-top: 2rem !important}
.pt25 {padding-top: 2.5rem !important}
.pt30 {padding-top: 3rem !important}
.pt35 {padding-top: 3.5rem !important}
.pt40 {padding-top: 4rem !important}

.pb5 {padding-bottom: 0.5rem !important}
.pb10 {padding-bottom: 1rem !important}
.pb15 {padding-bottom: 1.5rem !important}
.pb20 {padding-bottom: 2rem !important}
.pb25 {padding-bottom: 2.5rem !important}
.pb30 {padding-bottom: 3rem !important}
.pb35 {padding-bottom: 3.5rem !important}
.pb40 {padding-bottom: 4rem !important}

.pl5 {padding-left: 0.5rem !important}
.pl10 {padding-left: 1rem !important}
.pl15 {padding-left: 1.5rem !important}
.pl20 {padding-left: 2rem !important}
.pl25 {padding-left: 2.5rem !important}
.pl30 {padding-left: 3rem !important}
.pl35 {padding-left: 3.5rem !important}
.pl40 {padding-left: 4rem !important}

.pr5 {padding-right: 0.5rem !important}
.pr10 {padding-right: 1rem !important}
.pr15 {padding-right: 1.5rem !important}
.pr20 {padding-right: 2rem !important}
.pr25 {padding-right: 2.5rem !important}
.pr30 {padding-right: 3rem !important}
.pr35 {padding-right: 3.5rem !important}
.pr40 {padding-right: 4rem !important}
 

/* --- Width(rem) --- */
.w50 {width: 5rem !important}
.w55 {width: 5.5rem !important}
.w60 {width: 6rem !important}
.w65 {width: 6.5rem !important}
.w70 {width: 7rem !important}
.w75 {width: 7.5rem !important}
.w80 {width: 8rem !important}
.w85 {width: 8.5rem !important}
.w90 {width: 9rem !important}
.w95 {width: 9.5rem !important}
.w100 {width: 10rem !important}
.w110 {width: 11rem !important}
.w120 {width: 12rem !important}
.w130 {width: 13rem !important}
.w140 {width: 14rem !important}
.w150 {width: 15rem !important}
.w160 {width: 16rem !important}
.w170 {width: 17rem !important}
.w180 {width: 18rem !important}
.w190 {width: 19rem !important}
.w200 {width: 20rem !important}
.w210 {width: 21rem !important}
.w220 {width: 22rem !important}
.w230 {width: 23rem !important}
.w240 {width: 24rem !important}
.w250 {width: 25rem !important}
.w260 {width: 26rem !important}
.w270 {width: 27rem !important}
.w280 {width: 28rem !important}
.w290 {width: 29rem !important}
.w300 {width: 30rem !important}
.w350 {width: 35rem !important}
.w400 {width: 40rem !important}
.w450 {width: 45rem !important}
.w500 {width: 50rem !important}


/* width(%) */
.w10p {width: 10% !important}
.w15p {width: 15% !important}
.w20p {width: 20% !important}
.w25p {width: 25% !important}
.w30p {width: 30% !important}
.w35p {width: 35% !important}
.w40p {width: 40% !important}
.w45p {width: 45% !important}
.w50p {width: 50% !important}
.w55p {width: 55% !important}
.w60p {width: 60% !important}
.w65p {width: 65% !important}
.w70p {width: 70% !important}
.w75p {width: 75% !important}
.w80p {width: 80% !important}
.w85p {width: 85% !important}
.w90p {width: 90% !important}
.w95p {width: 95% !important}
.w100p {width: 100% !important}


/* --- Max Width(rem) --- */
.max-w50 {max-width: 5rem !important}
.max-w100 {max-width: 10rem !important}
.max-w150 {max-width: 15rem !important}
.max-w200 {max-width: 20rem !important}
.max-w250 {max-width: 25rem !important}
.max-w300 {max-width: 30rem !important}
.max-w400 {max-width: 40rem !important}
.max-w500 {max-width: 50rem !important}


/* --- Font --- */
.text-normal {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-bold {
    font-weight: 700;
}

.text-point-primary {
    color: var(--color-primary-60);
}

.text-point-secondary {
    color: var(--color-secondary-60);
}

.text-point-point {
    color: var(--color-point-50);
}

.text-point-danger {
    color: var(--color-danger-60);
}

.text-point-warning {
    color: var(--color-warning-60);
}

.text-point-success {
    color: var(--color-success-60);
}

.text-point-information {
    color: var(--color-information-60);
}

.text-point-gray {
    color: var(--color-gray-60);
}

.text-xsmall {
    font-size: 1.3rem;
}

.text-small {
    font-size: 1.5rem;
}

.text-size-medium {
    font-size: 1.7rem !important;
}

.text-large {
    font-size: 1.9rem;
}

.text-xlarge {
    font-size: 2.4rem;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.underline {
    text-decoration: underline;
    text-underline-position: under;
}


/* --- Contextual Help --- */
.contextual-help-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.contextual-help {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.contextual-help .tooltip-action {
    position: relative;
    display: flex;
    align-items: center;
}

.contextual-help .tooltip-action .tooltip-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contextual-help .tooltip-action .tooltip-btn i {
    color: var(--color-information-50);
}

.contextual-help .tooltip-popover {
    display: none;
    position: absolute;
    z-index: 10;
    padding: 1.6rem 3.2rem 1.6rem 1.6rem;
    border-radius: 1.2rem;
    border: 0.1rem solid var(--color-border);
    background: #fff;
    box-shadow: var(--box-shadow-base);
    width: 36rem;
}

.contextual-help .tooltip-popover.fixed {
    position: fixed;
    z-index: 1000;
}

.contextual-help .tooltip-popover::before {
    content: '';
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    position: absolute;
    margin-top: calc((1.6rem / 2) * -1);
    transform: rotate(45deg);
    border: 0.1rem solid var(--color-border);
    border-top-color: transparent;
    border-left-color: transparent;
    background: #fff;
}

.contextual-help .tooltip-popover .tooltip-contents {
    display: flex;
    gap: 0.8rem;
    flex-direction: column;
    font-size: 1.5rem;
    font-weight: 400;
    white-space: normal;
}

.contextual-help.top .tooltip-popover {
    bottom: 100%;
    margin-bottom: 1.6rem;
}

.contextual-help.bottom .tooltip-popover {
    top: 100%;
    margin-top: 1.6rem;
}

.contextual-help.left .tooltip-popover {
    left: 0;
    margin-left: -2rem;
}

.contextual-help.center .tooltip-popover {
    left: 50%;
    transform: translateX(-50%);
}

.contextual-help.right .tooltip-popover {
    right: 0;
    margin-right: -2rem;
}

.contextual-help .tooltip-popover .tooltip-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    color: var(--color-text-subtle);
}

.contextual-help.top .tooltip-popover::before {
    top: 100%;
}

.contextual-help.bottom .tooltip-popover::before {
    bottom: 100%;
    transform: rotate(225deg);
    margin-bottom: calc((1.6rem / 2) * -1);
}

.contextual-help.left .tooltip-popover::before {
    left: 2.4rem;
}

.contextual-help.center .tooltip-popover::before {
    left: 50%;
    margin-left: calc((1.6rem / 2) * -1);
}

.contextual-help.right .tooltip-popover::before {
    right: 2.4rem
}

@media screen and (max-width: 767px) {
    .contextual-help .tooltip-popover {
        right: unset !important;
        transform: none !important;
        margin-left: 0 !important;
    }

    .contextual-help .tooltip-popover::before {
        display: none;
    }
}



/* Loading Bar */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner {
    width: 4rem;
    height: 40px;
    border: 5px solid var(--color-border);
    border-top-color: var(--color-information-50);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}