@charset "utf-8";

/* Components */
/* form */
input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=url] {border-radius: .8rem; border: .1rem solid var(--Line_Default); background: var(--White); padding: 1.6rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 500; box-sizing: border-box; vertical-align: middle; color: var(--Black);}
input[type=text]:disabled, input[type=password]:disabled, input[type=file]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=search]:disabled, input[type=url]:disabled {background: var(--Gray_100); color: var(--Subbody_03);}
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=url]:focus {border: 1px solid var(--Black); outline: none !important; box-shadow: none !important;}
input[type=text].lg, input[type=password].lg, input[type=file].lg, input[type=email].lg, input[type=number].lg, input[type=tel].lg, input[type=search].lg, input[type=url].lg {font-size: 1.8rem; line-height: 2.2rem; padding: 2rem;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type="number"] {-moz-appearance: textfield; appearance: textfield;}
input.nobo {border-color: transparent !important;}
input.valid:not(:placeholder-shown):not(:focus):valid {background: url(../images/ic_valid.svg) no-repeat calc( 100% - 1.2rem ) 50%;}
input:read-only {background: var(--Gray_100);}

.inp-inlabel {position: relative; width: 100%; flex: 1;}
.inp-inlabel input {transition: all 0.3s ease; background-repeat: no-repeat; background-position: calc( 100% - 2.3rem ) 50%; width: 100%; padding: 1.6rem;}
.inp-inlabel label {position: absolute; top: 2rem; left: 1.6rem; font-size: 1.6rem; line-height: 1.6rem; color: var(--Subbody_03); transition: all 0.3s ease; pointer-events: none;}
.inp-inlabel input.lg {padding: 2rem;}
.inp-inlabel input.lg + label {left: 2rem; top: 2.4rem; font-size: 1.8rem;}
.inp-inlabel input:focus {border: 1px solid var(--Black); padding-top: 3rem; padding-bottom: 1rem;}
.inp-inlabel input.lg:focus {padding-top: 3rem; padding-bottom: 1rem;}
.inp-inlabel input:focus + label, .inp-inlabel input:not(:placeholder-shown) + label {top: 1rem; font-size: 1.4rem;}
.inp-inlabel input.lg:focus + label, .inp-inlabel input.lg:not(:placeholder-shown) + label {top: 1.2rem;}
.inp-inlabel small {display: none; font-size: 1.4rem; margin-top: 1.2rem; text-align: left;}
.inp-inlabel small.show {display: inline-block !important;}
.inp-inlabel .error-message {color: var(--Red-400);}
.inp-inlabel .guide-message {color: var(--Subbody_01);}
.inp-inlabel .success-message {color: var(--Green_400);}
form.submitted .inp-inlabel input:invalid {border-color: var(--Red_400); background-image: url(../images/ic_input_alert.svg);}
form.submitted .inp-inlabel input:invalid + label ~ .error-message {display: block;}
.inp-inlabel input:focus:invalid + label + .error-message {display: none;}
.inp-inlabel input:not(:placeholder-shown):not(:focus) {border-color: var(--Line_Default);}
.inp-inlabel input:not(:placeholder-shown):not(:focus) + label {display: none;}
/* .inp-inlabel input:not(:placeholder-shown):not(:focus):valid {background-image: url(../images/ic_valid.svg);} */
.inp-inlabel input:read-only:focus {border-color: var(--Line_Default);}
.inp-inlabel.fixed input.lg {padding-top: 3rem; padding-bottom: 1rem;}
.inp-inlabel.fixed input.lg + label, .inp-inlabel.fixed input.lg:not(:placeholder-shown) + label {top: 1.2rem; font-size: 1.4rem;}
.inp-inlabel.fixed input:not(:placeholder-shown):not(:focus) + label {display: block;}

.inp-file {display: flex; gap: 1.6rem;}
.inp-file input {display: none;}
.file-name {border-radius: .8rem; border: .1rem solid var(--Line_Default); background: var(--White); padding: 1.6rem; line-height: 2.2rem; font-size: 1.6rem; font-weight: 600; box-sizing: border-box; vertical-align: middle; color: var(--Black); width: 100%; height: 6.4rem;}

.inp-search {padding-right: 4.6rem !important;}
.inp-search.lg {background-position:  calc( 100% - 2rem ) 50%; padding-right: 4.6rem !important;}

input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none;}
input[type=checkbox] + label {display: inline-flex; align-items: flex-start; gap: .8rem; cursor: pointer; color: var(--Gray_500); line-height: 2.4rem; word-break: keep-all;}
input[type=checkbox] + label::before {content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_checkbox_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; flex: 0 0 2.2rem;}
input[type=checkbox]:checked + label::before {background-image: url('../images/ic_checkbox_on.svg');}
input[type=checkbox]:focus-visible + label {outline: 1px solid var(--White) !important; box-sizing: border-box !important; box-shadow: 0 0 0 2px inset var(--Black) !important;}

input[type=radio] {position: absolute; opacity: 0; pointer-events: none;}
input[type=radio] + label {display: inline-flex; align-items: center; gap: .8rem; cursor: pointer; color: var(--Gray_500); line-height: 2.4rem; word-break: keep-all;}
input[type=radio] + label::before {content: ''; display: inline-block; width: 2.2rem; height: 2.2rem; background: url('../images/ic_radio_off.svg') no-repeat center / 100% 100%; transition: all 0.2s ease; flex: 0 0 2.2rem;}
input[type=radio]:checked + label::before {background-image: url('../images/ic_radio_on.svg');}
input[type=radio]:focus-visible + label {outline: 1px solid var(--White) !important; box-sizing: border-box !important; box-shadow: 0 0 0 2px inset var(--Black) !important;}

textarea {border-radius: .8rem; border: 1px solid var(--Line_Default); background: var(--White); min-height: 10rem; padding: 2rem; box-sizing: border-box; resize: none; font-size: 1.6rem; line-height: 2.4rem; text-align: left; color: var(--Black); width: 100%;}
textarea:disabled {background: var(--Gray_100); color: var(--Subbody_03);}

.select {position: relative; display: inline-block; min-width: 12rem; text-align: left;}
.select select {display: none;}
.select::after {content: ''; position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); pointer-events: none; background: url(../images/ic_select_arrow.svg) no-repeat center; width: 1.6rem; height: 1.6rem;}
.select div.selected-display {border: .1rem solid var(--Line_Default); padding: 1.2rem 4rem 1.2rem 1.6rem; cursor: pointer; background-color: var(--White); border-radius: .8rem; font-size: 1.6rem; line-height: 2.2rem;}
.select div.selected-display.active {color: var(--Black);}
.select div.select-list {position: absolute; list-style: none; padding: 0; margin: 0; border: .1rem solid var(--Line_Default); width: 100%; overflow-y: auto; background-color: var(--White); z-index: 10; border-radius: .8rem; margin-top: .2rem; box-shadow: 0 1.2rem 1.6rem -.4rem rgba(16, 24, 40, 0.08), 0 .4rem .6rem -.2rem rgba(16, 24, 40, 0.03); pointer-events: none; visibility: hidden; transition: all .3s ease-in-out; opacity: 0;}
.select div.select-list.show {pointer-events: all; visibility: visible; opacity: 1;}
.select ul {display: block; max-height: 22rem; padding: .4rem 0; font-size: 1.6rem;}
.select ul li {padding: 1rem 4rem 1rem 1.6rem; cursor: pointer; line-height: 2.4rem; position: relative; white-space: nowrap;}
.select ul li:hover {background: var(--BG_body);}
.select .dropdown-list li.selected {background: var(--BG_body);}
.select .dropdown-list li.selected::after {content: ''; position: absolute; top: 50%; right: 1.6rem; width: 2rem; height: 2rem; background: url(../images/ic_select_check.svg) no-repeat center / 100% 100%; transform: translateY(-50%);}
.select.h64 div.selected-display {height: 6.4rem; font-size: 1.8rem; line-height: 2.8rem; padding: 1.6rem 1.9rem;}
.select.h56 div.selected-display {height: 5.6rem; font-size: 1.6rem; line-height: 2.4rem; padding: 1.6rem;}
.select .bs-head {display: none; gap: .8rem; justify-content: space-between; align-items: center; height: 7.2rem; border-bottom: .1rem solid var(--Line_Default); padding: 2.4rem;}
.select .tit {display: block; font-size: 2rem; line-height: 2.4rem; font-weight: 700; text-align: left;}
.select .btn-close {display: block; width: 2.4rem; height: 2.4rem; background: url(../images/ic_close.svg) no-repeat center / 100% 100%; font-size: 1px; overflow: hidden; text-indent: -10rem;}

.inp-search-wrap {position: relative;}
.inp-search-wrap .inp-search {padding-right: 4.6rem !important; width: 100%;}
.inp-search-wrap .btn-search {background: url(../images/ic_search.svg) no-repeat center / 2rem 2rem; font-size: 1px; overflow: hidden; text-indent: -200px; display: inline-block; position: absolute; top: .8rem; right: .4rem; width: 4rem; height: 4rem; z-index: 1;
							  cursor: pointer; border: none; transition: all .2s;}
.inp-search-wrap .inp-search.lg ~ .btn-search {top: 1.3rem;}


/* button */
button[type=button], input[type=submit], input[type=button]  {cursor: pointer; border: 0; transition: all .2s;}
button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {cursor: default; pointer-events: none;}
.btn, .btn.primary {display: inline-flex; padding: .8rem 1.3rem; justify-content: center; align-items: center; gap: .8rem; border-radius: .8rem; border: .1rem solid var(--blue_400); background: var(--Blue_400); color: var(--White); font-size: 1.4rem; text-align: center; font-weight: 600; line-height: 2.2rem; font-style: normal; white-space: nowrap; vertical-align: middle; height: 4rem; min-width: 8rem;}
.btn:hover, .btn.primary:hover {border-color: var(--Blue_300); background: var(--Blue_300); color: var(--White);}
.btn:focus, .btn.primary:focus {border-color: var(--Blue_400); background: var(--Blue_400); color: var(--White);}
.btn:disabled, .btn.primary:disabled {color: rgba(255,255,255,.7); opacity: .5;}
.btn.ssm {font-size: 1.2rem; font-weight: 500; line-height: 2rem; padding: .4rem .8rem; height: 2.8rem; min-width: 5.6rem;}
.btn.sm {font-size: 1.2rem; font-weight: 500; line-height: 1.6rem; padding: .7rem .9rem; height: 3.2rem;}
.btn.md {font-size: 1.4rem; font-weight: 600; line-height: 2.2rem; padding: .8rem 1.3rem; height: 4rem;}
.btn.xl48 {font-size: 1.6rem; font-weight: 600; line-height: 2rem; padding: 1.3rem 1.7rem; height: 4.8rem;}
.btn.xl56 {font-size: 1.6rem; font-weight: 600; line-height: 2rem; padding: 1.7rem 2.1rem; height: 5.6rem;}
.btn.xl64 {font-size: 1.8rem; font-weight: 600; line-height: 2.2rem; padding: 2rem 2.3rem; height: 6.4rem;}
.btn.xl72 {font-size: 2rem; font-weight: 600; line-height: 2.4rem; padding: 2.3rem 2.7rem; height: 7.2rem;}
.btn.xl80 {font-size: 2rem; font-weight: 600; line-height: 2.4rem; padding: 2.7rem 3.5rem; height: 8rem;}

.btn.black {border: 1px solid var(--Black); background: var(--Black); color: var(--White) !important;}
.btn.black:hover {border-color: var(--Black); background: var(--Black);}
.btn.black:focus {border-color: var(--Black); background: var(--Black);}
.btn.black:disabled {border-color: var(--BG_disable); background: var(--BG_disable); color: var(--White);}

.btn.gray {border: 1px solid var(--btn_bg-63); background: var(--btn_bg); color: var(--Black);}
.btn.gray:hover {border-color: var(--btn_bg-63); background: var(--btn_bg); color: var(--Black);}
.btn.gray:focus {border-color: var(--btn_bg-63); background: var(--btn_bg); color: var(--Black);}
.btn.gray:disabled {border-color: var(--btn_bg-63); background: var(--btn_bg); color: var(--Subbody_04);}

.btn.outline {border: 1px solid var(--Line_Default); background: var(--White); color: var(--Black);}
.btn.outline:hover {border-color: var(--Black); color: var(--Black);}
.btn.outline:focus {border-color: var(--Black); background: var(--Black); color: var(--White);}
.btn.outline:disabled {border-color: var(--btn_bg-63); color: var(--Subbody_04);}

.btn.outline2 {border: 1px solid var(--Line_Default); background: var(--White); color: var(--Black);}
.btn.outline2:hover {border-color: var(--Green_400); background: var(--Green_100); color: var(--Green_400);}
.btn.outline2:focus {border-color: var(--Green_400); background: var(--Green_100); color: var(--Green_400);}
.btn.outline2:disabled {border-color: var(--btn_bg-63); color: var(--Subbody_04);}

.btn.outline-g {border: 1px solid var(--Green_400); background: var(--White); color: var(--Green_400);}
.btn.outline-g:hover {border-color: var(--Green_500); background: var(--Green_100); color: var(--Green_500);}
.btn.outline-g:focus {border-color: var(--Green_500); background: var(--Green_100); color: var(--Green_500);}
.btn.outline-g:disabled {border-color: var(--btn_bg-63); color: var(--Subbody_04);}

.btn.outline-blue {border: 1px solid var(--Blue_400); background: var(--White); color: var(--Blue_400);}
.btn.outline-blue:hover {border-color: var(--Blue_500); background: var(--Blue_100); color: var(--Blue_500);}
.btn.outline-blue:focus {border-color: var(--Blue_500); background: var(--Blue_100); color: var(--Blue_500);}
.btn.outline-blue:disabled {border-color: var(--btn_bg-63); color: var(--Subbody_04);}

.btn.darkgray {border: 1px solid var(--Subbody_01); background: var(--Subbody_01); color: var(--White);}
.btn.darkgray:hover {border-color: var(--Subbody_02); background: var(--Subbody_02); color: var(--White);}
.btn.darkgray:focus {border: 1px solid var(--Subbody_01); background: var(--Subbody_01); color: var(--White);}

.btn.lightgray {border: 1px solid var(--btn_bg-63, rgba(231, 236, 239, 0.63)); background: var(--btn_bg-63); color: var(--Black);}

.btn.blue {border: 1px solid var(--Blue_400); background: var(--Blue_400); color: var(--White);}
.btn.blue:hover {border-color: var(--Blue_300); background: var(--Blue_300); color: var(--White);}
.btn.blue:focus {border-color: var(--Blue_400); background: var(--Blue_400); color: var(--White);}

.btn.green {border: 1px solid var(--Green_400); background: var(--Green_400); color: var(--White);}
.btn.green:hover {border-color: var(--Green_300); background: var(--Green_300); color: var(--White);}
.btn.green:focus {border-color: var(--Green_400); background: var(--Green_400); color: var(--White);}

.btn.mint {border: 1px solid var(--Mint_300); background: var(--Mint_300); color: var(--White);}
.btn.mint:hover {border-color: var(--Mint_200); background: var(--Mint_200); color: var(--White);}
.btn.mint:focus {border-color: var(--Mint_300); background: var(--Mint_300); color: var(--White);}

.btn.orange {border: 1px solid var(--Orange_400); background: var(--Orange_400); color: var(--White);}
.btn.orange:hover {border-color: var(--Orange_300); background: var(--Orange_300); color: var(--White);}
.btn.orange:focus {border: 1px solid var(--Orange_400); background: var(--Orange_400); color: var(--White);}

.tbl-basic .btn {margin: -.6rem 0;}

.btn.round {border-radius: 8rem;}
.btn .ico {width: 1.4rem; height: 1.4rem;}
.btn-go {display: flex; gap: .4rem; align-items: center; font-size: 1.4rem;}
.btn-go::after {content: ''; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; background: url(../images/ic_arrow_right3.svg) no-repeat center / contain;}
.btn-go.black::after {background: url(../images/ic_arrow_right2_w.svg);}
.btn-txt {color: var(--Subbody_01); text-decoration: underline; white-space: nowrap; padding: 0 1.2rem; line-height: 2.4rem;}
.btn-txt2 {color: var(--White); position: relative;}
.btn-txt2::after {content: ''; display: block; width: 100%; height: .1rem; background: var(--White); position: absolute; bottom: -.4rem; left: 0;}

.btn-txt-go {color: var(--Black); text-decoration: underline; white-space: nowrap; padding: 0 .8rem; line-height: 1.8rem; background: transparent; display: flex; gap: .8rem; align-items: center; font-size: 1.4rem; font-weight: 500;}
.btn-txt-go::after {content: ''; display: block; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; background: url(../images/ic_arrow_right3.svg) no-repeat center / contain;}
.btn-txt-go-w {color: var(--White); text-decoration: underline; white-space: nowrap; padding: 0 .8rem; line-height: 1.8rem; background: transparent; display: flex; gap: .8rem; align-items: center; font-size: 1.4rem; font-weight: 500;}
.btn-txt-go-w::after {content: ''; display: block; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; background: url(../images/ic_arrow_right3.svg) no-repeat center / contain; filter:invert();}
.btn-refresh {border-radius: 1rem; background: var(--Green_100) !important; color: var(--Green_500) !important; padding: .8rem !important;}
.btn-outline-w {display: flex; min-width: 20rem; padding: 1.6rem 2rem; justify-content: space-between; align-items: center; text-align: center; margin: 0 auto; border: .1rem solid var(--White) !important; background: transparent; color: var(--White); color: var(--White); font-size: 1.8rem; font-weight: 400; line-height: 2.2rem;}
.btn-outline-w::after {content: ''; width: 2rem; height: 2rem; display: block; background: url(../images/ic_arrow_right_w.svg) no-repeat center / contain;}

.btn-more {border-radius: .8rem; background: var(--White); box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); padding: 1rem 0; display: flex; gap: 1.6rem; align-items: center; font-size: 1.6rem;}
.btn-more::after {content: ''; display: block; width: 2rem; height: 2rem; background: url(../images/ic_arrow_down5.svg) no-repeat center / contain;}
.btn-more.active::after {transform: rotate(180deg);}
.btn-more2 {display: flex; width: 30%; max-width: 32rem; height: 4.8rem; padding: 1.4rem 1.8rem; justify-content: center; align-items: center; gap: .8rem; border-radius: .8rem; border: .1rem solid var(--Line_Default) !important; background: var(--White); color: var(--Black); text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 2rem; margin: 0 auto;}
.btn-more2::after {display: block; content: ''; width: 1.6rem; height: 1.6rem; background: url(../images/ic_add.svg) no-repeat center / contain;}

.btn-more3 {border-radius: .8rem; border: 1px solid var(--Line_Default); background: var(--White); display: flex; width: 100%; padding: 2rem 2.4rem 2rem 2.8rem; justify-content: center; align-items: center; gap: 8px; color: var(--Black); text-align: center; font-size: 1.8rem; font-weight: 600; line-height: 2.2rem;}
.btn-more3::after {display: block; content: ''; width: 2rem; height: 2rem; background: url(../images/ic_add.svg) no-repeat center / contain;}

.btn-more4 {width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; background: var(--White); font-size: 1px; text-indent: -200px; overflow: hidden;}
.btn-more4::after {content: ''; display: block; flex: 0 0 2rem; width: 2rem; height: 2rem; background: url(../images/ic_arrow_down5.svg) no-repeat center / 100% 100%;}
.btn-more4.active::after {transform: rotate(180deg);}
.btn-calendar {width: 2.4rem; height: 2.4rem; display: inline-block; border: .06rem solid var(--Line_Default) !important; border-radius: 1.2rem; overflow: hidden; text-indent: -200px; font-size: 1px; background: url(../images/ic_calendar.svg) no-repeat center / 2.4rem 2.4rem var(--White);}
.btn-calendar2 {width: 2.4rem; height: 2.4rem; display: inline-block; overflow: hidden; text-indent: -200px; font-size: 1px; background: url(../images/ic_calendar2.svg) no-repeat center / 2rem 2rem var(--White); margin-left: -4.4rem; margin-right: 1.2rem;}
.btn-filter {display: inline-block; border-radius: 1.6rem; border: 1px solid var(--Line_Default) !important; width: 3.2rem; height: 3.2rem; background: url(../images/ic_filter.svg) no-repeat center / 1.6rem 1.6rem; overflow: hidden; font-size: 1px; text-indent: -200px;}
.btn-viewtable, .btn-viewtable-m {width: 2.4rem; height: 2.4rem; background: url(../images/ic_download.svg) no-repeat center / 100% 100%; overflow: hidden; font-size: 1px; text-indent: -200px; display: inline-block;}
.btn-download2 {width: 2.4rem; height: 2.4rem; background: url(../images/ic_download2.svg) no-repeat center / 2rem auto; overflow: hidden; font-size: 1px; text-indent: -200px; display: inline-block;}
.btn img.gray {opacity: .7;}


/* popup */
/* .pop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--Black_bg); z-index: 10; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 2rem;} */
.pop {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--Black_bg); z-index: 10; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s; padding: 2rem; overflow-y: auto;}
.pop.show {visibility: visible; opacity: 1; pointer-events: all;}
.pop-container {display: flex; width: 100%; max-width: 40rem; padding: 3.2rem; flex-direction: column; justify-content: center; align-items: center; border-radius: .8rem; background: var(--White); position: relative; max-height: 100%;}
.pop h3 {font-size: 2.4rem; font-weight: 700; line-height: 3.4rem; margin-bottom: 1.6rem;}
.pop p {text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 2.4rem}
.pop .btn-wrap {margin-top: 4rem; display: flex; gap: .8rem; width: 100%; justify-content: center;}
.pop .btn-wrap .btn {max-width: 24rem; width: 100%;}
.pop .btn-close {display: block; width: 3.2rem; height: 3.2rem; background: url(../images/ic_close.svg) no-repeat center / 2.4rem 2.4rem var(--White); border-radius: 50%; font-size: 1px; overflow: hidden; text-indent: -10rem; position: absolute; top: 1.6rem; right: 1.6rem;}


/* tooltip */
.tooltip {position: absolute; background-color: var(--Black); color: var(--White); padding: .8rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1;}

/* sponsor popup */
.sponsor-popup-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;}
.sponsor-popup-overlay.show {display: block;}
.sponsor-popup-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--White); padding: 40px; border-radius: 10px; max-width: 500px; width: 90%; text-align: center;}
.sponsor-popup-title {margin-bottom: 20px; color: var(--Black);}
.sponsor-popup-text {margin-bottom: 20px; line-height: 1.6; color: var(--Gray_500);}
.sponsor-popup-info-box {margin-bottom: 30px; padding: 20px; border-radius: 5px;}
.sponsor-popup-info-box.regular {background: var(--Blue_100);}
.sponsor-popup-info-box.onetime {background: var(--Green_100);}
.sponsor-popup-info-box.join {background: var(--Orange_100);}
.sponsor-popup-info-box p {margin-bottom: 10px;}
.sponsor-popup-info-box p:last-child {margin-bottom: 0;}
.sponsor-popup-btn {color: var(--White); border: none; padding: 10px 30px; border-radius: 5px; cursor: pointer;}
.sponsor-popup-btn.regular {background: var(--Blue_300);}
.sponsor-popup-btn.onetime {background: var(--Green_300);}
.sponsor-popup-btn.join {background: var(--Orange_400);}

/* table col width utilities */
.col-w50 {width: 50px !important;}
.col-w80 {width: 80px !important;}
.col-w100 {width: 100px !important;}
.col-w120 {width: 120px !important;}
.col-w150 {width: 150px !important;}
.col-auto {width: auto !important;}
.col-w15p {width: 15% !important;}
.col-w85p {width: 85% !important;}

/* error/not found page styles */
.error-page-container {text-align: center; padding: 100px 0;}
.error-page-title {font-size: 3.2rem; margin-bottom: 2rem; color: var(--Gray_500);}
.error-page-subtitle {font-size: 2.4rem; margin-bottom: 2rem;}
.error-page-text {font-size: 1.8rem; color: var(--Subbody_02); margin-bottom: 4rem;}
.error-page-container-small {text-align: center; padding: 50px;}

/* receipt debug info */
.receipt-debug-info {margin: 1px; font-size: 10px; color: var(--Gray_500);}

/* quill editor */
.quill-editor {height: 200px;}

/* file upload button */
.file-upload-btn {margin-left: 8px; background: none; border: 1px solid var(--Red_500); color: var(--Red_500); padding: 2px 8px; font-size: 11px; cursor: pointer;}
.file-upload-icon {display: inline-block; margin-top: 5px; width: 16px; vertical-align: middle;}

/* utility classes */
.w-fit-content {width: fit-content !important;}
.border-blue {border: 4px solid var(--Mint_300) !important;}
.mt18 {margin-top: 1.8rem !important;}
.btn-help:hover ~ .tooltip {opacity: 1;}
.tooltip::after {content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .8rem .8rem 0 .8rem; border-color: var(--Black) transparent transparent transparent; position: absolute; left: 50%; top: 100%; transform: translate(-50%);}
.tooltip.right {left: auto; right: -1rem; transform: none;}
.tooltip.right::after {left: auto; right: .6rem;}
.tooltip.left {left: -1rem; transform: none;}
.tooltip.left::after {left: 2.2rem;}

.toast {position: absolute; background-color: var(--Black); color: var(--White); padding: 1.2rem 1.6rem; border-radius: .8rem; font-size: 1.4rem; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s ease; font-weight: 400; text-align: center; transition: all .3s ease; width: max-content; max-width: 36.2rem; left: 50%; bottom: calc(100% + 1rem); z-index: 1;}
.toast.show {opacity: 1;}


/* list */
.list-dot {font-size: 1.4rem; text-align: left;}
.list-dot > li {color: var(--Subbody_01); font-weight: 400; line-height: 1.5; position: relative; padding-left: 2rem; word-break: keep-all; margin-bottom: .4rem;}
.list-dot > li::before {content: ''; width: .3rem; height: .3rem; border-radius: .2rem; display: inline-block; background: var(--Subbody_01); position: absolute; top: 1rem; left: .8rem;}

.list-dot2 {padding-left: 0; position: relative; font-size: 1.6rem; text-align: left;}
.list-dot2 > li {color: var(--Black); font-weight: 400; line-height: 2.4rem; position: relative; padding-left: 2rem; word-break: keep-all; margin-bottom: .4rem}
.list-dot2 > li:last-child {margin-bottom: 0;}
.list-dot2 > li::before {content: ''; width: .4rem; height: .4rem; border-radius: .2rem; display: inline-block; background: var(--Black); position: absolute; top: .95rem; left: .8rem;}
.list-dot2 .list-dot {margin-top: .8rem; margin-left: -.8rem;}

.list-bar {text-align: left;}
.list-bar > li {color: var(--Subbody_01); font-size: 1.6rem; font-weight: 400; line-height: 2.4rem; position: relative; padding-left: 2rem; word-break: keep-all;}
.list-bar > li::before {content: '-'; width: .4rem; height: .4rem; border-radius: .2rem; display: inline-block; position: absolute; top: 0; left: .8rem;}

.list-star {font-size: 1.2rem; display: flex; flex-direction: column; gap: .4em; text-align: left;}
.list-star > li {color: var(--Subbody_01); font-weight: 400; line-height: 2rem; position: relative; padding-left: 1em; word-break: keep-all;}
.list-star > li::before {content: '*'; display: inline-block; position: absolute; top: .2em; left: .2em;}

.list-num {text-align: left;}
.list-num > li {list-style: decimal; margin-left: 1.6rem; padding: .4rem 0;}
.list-num > li:first-child {padding-top: 0;}
.list-num > li:last-child {padding-bottom: 0;}