/* [ Basic ] */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Noto Sans KR;
	background-color: inherit;
    /* detail CHECK later */
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

/* scrollbar custom */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border-radius: 3px; transition: background-color 0.3s; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }
/* *::-webkit-scrollbar-track { background: inherit; margin: 1px; } */

ul { list-style: none; }



.input-wrapper { position: relative; width: 100%; }
.input-wrapper input[type="text"] { height: var(--line-content-height); width: 100%; }

input[type="text"]::placeholder, textarea::placeholder { color: #CFCFCF; }
input[type="text"].bg-gray::placeholder, textarea.bg-gray::placeholder { color: #C6C6C6; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime-local"], textarea, select {
    position: relative;
	border: 1px solid #CFCFCF; outline: none; border-radius: 0.4rem;
	padding: 0 1em; line-height: 1; min-width: 130px;
	color: #121212; /* font-size: 0.9rem; font-weight: 400; */
	-webkit-user-drag: none;
}
input[type="text"].adjust-input { min-width: 3em; text-align: center; }
input[type="text"].bg-gray { background-color: #F7F7F7; border-color: #DADADA; }

select option { color: #121212; } /* unempty option */

textarea { resize: none; }
select { min-width: 1em; padding-right: 2em; }

input[type="text"]:focus, input[type="password"]:focus,
input[type="date"]:focus, textarea:focus, select:focus,
input[type="text"]:hover, input[type="password"]:hover,
input[type="date"]:hover, textarea:hover { border-color: var(--primary-color); }

input[type="checkbox"], input[type="radio"] { cursor: pointer; }

label:has(> input[type="checkbox"], > input[type="radio"]) { cursor: pointer; }
label { display: flex; gap: 10px; align-items: center; font-size: 0.9em; font-weight: 400; white-space: nowrap; }
label > span { overflow: hidden; text-overflow: ellipsis; }

.input-hidden { display: none !important; }

/* [ Layout ] */

body {
    color: #121212;
    /* font-family: Arial, sans-serif; */
    font-family: Noto Sans KR;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-width: 330px;
    word-break: keep-all;
}

.def-content {
    flex: 1; /* for footer staging to bottom */
	justify-content: center;
	align-items: center;
    padding: 60px 0;
    margin: 0 auto;
    width: 100%; max-width: 1279px;
}


.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto; /* possible scroll */
    z-index: 0;
    min-height: calc(100vh - var(--top-menu-height));
    height: calc(100vh - var(--top-menu-height));
    margin-top: var(--top-menu-height); 
    width: 100%; /* for except vertical scroll bar */
}
.fill-wrapper { flex: 1; /* min-width: 300px; */ }
.fix-wrapper { flex-shrink: 0; min-width: 0; }
.flex-row { display: flex; gap: 8px; flex-direction: column; padding: 10px 20px; text-align: left; height: 100%; }
.flex-row > *:last-child { margin-top: auto; }

.grid-col {
    display: grid !important;
    gap: 10px;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    width: 100%;
}
.grid-col.center { padding: 10px 20px; place-items: center; }
.grid-col.left-align { justify-items: flex-start; }
.grid-col.top-align { align-items: flex-start; }

.grid-col.col-two { grid-template-columns: repeat(2, 1fr); }
.grid-col.col-two.auto-first { grid-template-columns: auto 1fr; line-height: 1; }
.grid-col.col-two.auto-last { grid-template-columns: 1fr auto; line-height: 1; }
.grid-col.col-three { grid-template-columns: repeat(3, 1fr); }
.grid-col.col-four { grid-template-columns: repeat(4, 1fr); }


.container { position: relative; text-align: center; width: 100%; padding: 10px 35px; margin-bottom: 15px; }
.container.cont-flex { display: flex; padding: 45px 35px; gap: 45px; flex-wrap: wrap; justify-content: center; flex-grow: 1; }
.container.cont-flex.half { flex-basis: 50%; }
.container.cont-flex.third { flex-basis: 33%; }

.flex-wrapper.w-filled { width: 100%; }
.flex-wrapper { display: flex !important; gap: 10px; align-items: center; flex-wrap: wrap; }

.flex-col { display: flex !important; column-gap: 0.9em; overflow: hidden; /* check */ }
.flex-col > * { width: 100%; }
.flex-col.col-two > * { width: calc(((100% - (0.9em * (2 - 1))) / 2) - 1px); }
.flex-col.col-three > * { width: calc(((100% - (0.9em * (3 - 1))) / 3) - 1px); }
.flex-col.col-four > * { width: calc(((100% - (0.9em * (4 - 1))) / 4) - 1px); }

.adjust-height { height: auto !important; }


.spacer,
.spacer10 { height: 10px; background-color: transparent; }
.spacer15 { height: 15px; background-color: transparent; }
.spacer20 { height: 20px; background-color: transparent; }
.spacer25 { height: 25px; background-color: transparent; }
.spacer30 { height: 30px; background-color: transparent; }
.spacer35 { height: 35px; background-color: transparent; }
.spacer40 { height: 40px; background-color: transparent; }
.spacer45 { height: 45px; background-color: transparent; }
.spacer50 { height: 50px; background-color: transparent; }


/* [ text ] */

.title { width: 100%; color: #121212; font-weight: 800; text-align: center; margin: 35px 0 20px; }
.title.primary { color: var(--primary-color); }
.title.white { color: #FFFFFF; }
.title.left { text-align: left; }

.ft-left { text-align: left; width: 100%; }
.ft-center { text-align: center; width: 100%; }
.ft-right { text-align: right; width: 100%; }

.ft-primary { color: var(--primary-color); }
.ft-white { color: #FFFFFF; }
.ft-gray { color: var(--gray); }

.ft-tiny { font-size: 0.6em; font-weight: 300; }
.ft-small { font-size: 0.85em; font-weight: 400; line-height: 0.85em; }

.ft-bold { font-weight: 500; }

.numbering {
    width: 100%;
    text-align: left; align-items: start;
    display: grid; grid-template-columns: auto 1fr; gap: 0.5em;
}
.numbering > *:first-child { color: var(--primary-color); margin-right: 7px; }
.numbering > * { display: flex; flex-wrap: wrap; column-gap: 1em; align-items: center; }

p.numbering > *:first-child { color: inherit; margin-right: 0; }
p { line-height: 1.3em; }
p + p { margin-top: 0.3em; }


hr {
    width: 100%; height: 1px; line-height: 1px;
    background-color: #B7B7B7; border: none;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 20px;
}
.hr {
	display: block; background-color: #B7B7B7;
    width: 100%; height: 1px; line-height: 1px;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 20px;
}
.hr.light-grey { background-color: #CECECE; }




/* [ Component ] */

.xy-center-box {
    display: flex; flex-direction: column;
    width: 100%; align-items: center; height: 100%;
    justify-content: center; margin: auto 0;
}

.box-container { min-width: 330px; width: 80%; }
.box-container.small { max-width: 550px; }
.box-container.regular { max-width: 750px; }

.box {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 6px 4px 9px -1px #00000012;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}
.box:last-child { margin-bottom: 0; }
.box .box-item { padding: 20px 40px; }

.box.box-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    white-space: normal;
}
.box.box-flex .box-item { padding: 30px 40px; }


.radius-box {
    background-color: #FFFFFF;
    border-radius: 1em;
    width: 100%; /* height: 512px; */ min-width: 330px;/*check*/
    padding: 3rem; margin: 10px 0;
    display: flex; gap: 10px;
    flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 6px 4px 9px -1px #00000012;
}
.radius-box.small { padding: 20px 40px; }
.radius-box.big { padding: 40px 60px; }

.dsbl { position: relative; }
.dsbl .box-overlay { display: flex; border-radius: inherit; }
.box-overlay {
    display: none; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;
    background-color: #343434; opacity: 0.9; color: #FFFFFF;
}
.box-overlay a { color: inherit; font-size: 14px; width: fit-content; }


/* [ INPUT ] */
/* < SELECT > */
.custom-select {
	position: relative; background: #FFFFFF;
	display: flex; align-items: center;
	border: 1px solid #CFCFCF; border-radius: 0.4em;
	font-size: 0.9em; font-weight: 400; line-height: 1; 
}

.custom-select.hide .custom-select-view { padding-left: 0.8em; }
.custom-select .custom-select-view { padding: 0.5em 0.8em 0.5em 1em; cursor: pointer; }
.custom-select .custom-select-option { padding: 0.5em 1em; cursor: pointer; white-space: nowrap; }

.custom-select-native { position: absolute; display: none; opacity: 0; pointer-events: none; }
.custom-select-view.placeholder { color: var(--basic-no-active-color); }
.custom-select-view { display: grid; column-gap: 0.7em; grid-template-columns: 1fr auto; align-items: center; }
.custom-select:not(.hide):has(.custom-select-options.open) .custom-select-view::after { transform: rotate(-90deg); }
.custom-select:not(.hide) .custom-select-view::after {
	content: ''; display: inline-block; height: 0.8em; aspect-ratio: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("/img/icon/right-gray-arrow.png"); transform: rotate(-270deg)/*temp*/;
}

.custom-select-options.open { display: block; top: calc(100% + 1px); }
.custom-select-options {
	position: absolute; display: none; overflow-y: auto; z-index: 10; text-align: left;
	/* width: 100%; background-color: inherit; */ max-height: 200px; border: 1px solid #CFCFCF;
}
.custom-select-options::-webkit-scrollbar { width: 2px; }

.custom-select-option:hover, .custom-select-option.selected { background-color: var(--primary3-color); color: var(--primary-color-soft); }




/* [ auto-search & add-button ] */
.autocomplete-wrapper { position: relative; display: flex; gap: 0.7em; flex-wrap: wrap; }

.autocomplete-wrapper .input-wrapper { width: fit-content; }

.autocomplete-items.view:has(.autocomplete-item.view) { display: block; }
.autocomplete-items {
    position: absolute;
    display: none;
    border: 1px solid #D4D4D4;
    min-width: 100%; max-height: 400px;
    overflow-y: auto;
    z-index: 10;
    background-color: #FFFFFF;
    text-align: left;
}
.autocomplete-items .autocomplete-item.view { display: block; }
.autocomplete-items .autocomplete-item { display: none; padding: 10px; cursor: pointer; }
.autocomplete-items .autocomplete-item * { pointer-events: none; }
.autocomplete-items .autocomplete-item input { display: none; }
.autocomplete-item:hover { background-color: #E9E9E9; }
.autocomplete-item * { pointer-events: none; }
.autocomplete-item:has(input[type="checkbox"]:checked) { background-color: var(--primary3-color); color: var(--primary-color-soft); }

.autocompelete-selects:empty { display: none; } /* for ignore grid/flex gap */
.autocompelete-selects { display: flex; gap: 5px; flex-wrap: wrap; }

.autocompelete-selects > div {
    display: flex; gap: 0.5em; align-items: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 0.7em; height: var(--line-content-height);
    border: 1px solid var(--primary-color); color: var(--primary-color);
    border-radius: 0.3em;
}



/* [ Button ] */

div.buttons { width: 100%; display: flex; gap: 25px; justify-content: center; align-items: center; }
div.buttons.per90 { width: 90%; margin: 0 auto; gap: 7%; }
div.buttons.per80 { width: 80%; margin: 0 auto; }
div.buttons.per70 { width: 70%; margin: 0 auto; }
div.buttons.per50 { width: 50%; margin: 0 auto; }
div.buttons.vertical { flex-direction: column; gap: 20px; }

div.buttons .btn { flex-grow: 1; }
.btn:hover { filter: /* contrast(1.2) */ brightness(0.975); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn {
    display: flex; align-items: center; place-content: center; gap: 1em;
    width: fit-content; padding: 1em; border-radius: 0.5rem; 
	color: #3C3C3C; font-weight: 500; text-align: center; line-height: 1; text-decoration: none; /* a tag */
    cursor: pointer; transition: background-color 0.1s; user-select: none;
}

.btn.shad:hover { box-shadow: var(--shadow-md); }
.btn.shad { box-shadow: var(--shadow-sm); }
.btn.circle { border-radius: 1.5em; }

.btn.small { font-size: 0.85rem; padding: 0.6em 1.1em; }
.btn.medium { font-size: 0.9rem; padding: 0.75em 1.2em; }

.btn.primary { background-color: var(--primary-color); color: var(--primary-font-color); border: 1px solid var(--primary-color);  }
.btn.primary2 { background-color: var(--primary2-color); color: var(--primary-color); }
.btn.white { background-color: #FFFFFF; color: var(--gray); }
.btn.real-darkgray { background-color: #3B3B3B; color: #FFFFFF; }
.btn.gray { background-color: var(--gray); color: #FFFFFF; }
.btn.light-gray { background-color: #EDEDED; border: 1px solid #A7A7A7; }

.btn.prim-line { background-color: #FFFFFF; border: 1px solid var(--primary-color);  }
.btn.gray-line { background-color: #FFFFFF; border: 1px solid #8D8D8D; color: var(--gray); }

.btn.w-filled { width: 100%; }


.icon-btn {
    display: inline-block;
    height: 25px;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: 100% 100%;
    border: none;
    cursor: pointer;
    flex-shrink: 0; /* w/h hold */
}
.icon-btn.add { background-image: url("/img/button/plus-wh-circle-prim.png"); }
.icon-btn.rmv { background-image: url("/img/button/x-primary.png"); height: 10px; }




/* [ To top button ] */

.to-top-button:hover { opacity: 0.6; }
.to-top-button.active {
	display: flex; gap: 0.2em;
}
.to-top-button {
	position: fixed; bottom: 20px; right: 20px;
	display: none;
	opacity: 0.2;
	border-radius: 0.4em;
	align-items: center;
	justify-content: center;
	color: #FFFFFF; background-color: var(--gray);
	line-height: 1; padding: 0.7em 0.4em;
	font-size: 1rem; font-weight: 500;
	cursor: pointer;
}
.to-top-button::before {
    content: ''; height: 0.9em; aspect-ratio: 1;
    background-image: url('/img/icon/icon-white-thick-up-arrow.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.bg-icon {
    display: block;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
}



/* [ BALLOON ] */

/* basic */
*:has(> .balloon-wrapper) { position: relative; }
.balloon-wrapper {
    position: absolute;
    top: -15px; left: 50%; transform: translateX(-50%);
    pointer-events: none;
}
.balloon-wrapper:has(.up) { top: -35px; left: 50%; transform: translateX(-50%); }
.balloon-wrapper:has(.down) { bottom: -35px; left: 50%; transform: translateX(-50%); }

.balloon.tiny { padding: 3px 13px; }
.balloon {
    position: relative;
    /* height: 25px; */ line-height: 1.1;
    border-radius: 13px; 
    border: 1px solid var(--primary-color);
    background-color: #FFFFFF;
    color: #000000;
    padding: 5px 15px;
    font-weight: 400;
    display: flex;
    justify-content: center; align-items: center;
}
.balloon.kakao {
    border-radius: 8px; border: 1px solid #20266F; box-shadow: 0px 4px 4px 0px #00000025;
    padding: 0.5em 25px; background-color: #20266F; color: #FFFFFF; white-space: nowrap; line-height: 1;    
}
.balloon.kakao:after {
    content: "";
    position: absolute;
    border: 7px solid transparent;
}
.balloon.kakao.up:after {
    top: 100%;
    border-top: 10px solid #20266f;
    left: 50%;
    transform: translateX(-50%);
}
.balloon.kakao.down:after {
    bottom: 100%;
    border-bottom: 10px solid #20266f;
    left: 50%;
    transform: translateX(-50%);
}

/* [ Frame ] */
/* .circle-img-frame.empty { background-image: url(/img/anonymous2.png); } */
.circle-img-frame {
    overflow: hidden;
    width: 100px; aspect-ratio: 1;
    border-radius: 50%;
    background-color: #EEEEEE;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	background-image: url(/img/anonymous2.png);
    box-shadow: 0px 2px 2px 0px #00000025;
}

/* [ Loading bar ] */

.temp-rel-pos { position: relative; } /* for overlay */
/* Overlay */
.loading-proc.inner { position: absolute; /* for selelct window */ }
.loading-proc {
    position: fixed; /* for full window */
    display: inline-block;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 300; /* bigger than alert(200) */ 
}
.loading-proc::after { 
    content: "";
    position: absolute;
    top: calc(50% + 15px); /* for shadow color z-index */
    left: 50%; transform: translate(-50%, -50%);
    width: 15px; height: 15px;
    background-color: transparent;
    animation: shadow-pulse 1.2s linear infinite;
    border-radius: 3px;
    z-index: 301;
}
@keyframes shadow-pulse {
    0%, 80%, 100% {
        box-shadow:
            -20px -15px 0 #3399FF,
                0 -15px 0 #0055FF,
             20px -15px 0 #003FCC;
    }
    20% {
        box-shadow:
            -20px -25px 0 #3399FF,
                0 -15px 0 #0055FF,
             20px -15px 0 #003FCC;
    }
    40% {
        box-shadow:
            -20px -15px 0 #3399FF,
                0 -25px 0 #0055FF,
             20px -15px 0 #003FCC;
    }
    60% {
        box-shadow:
            -20px -15px 0 #3399FF,
                0 -15px 0 #0055FF,
             20px -25px 0 #003FCC;
    }
}


@media (max-width: 768px) {
    .container { padding: 30px 10px; }
    .content-wrapper { margin: 0; min-height: 100vh; }
}


@media (max-width: 480px) {
    .container { padding: 20px 10px; }
}


/* MODAL */

.modal-wrapper.on { display: block; }
.modal-wrapper {
    position: fixed;
    display: none; top: 0; left: 0;  width: 100%; height: 100%;
    background-color: transparent; z-index: 100; /* between content(0) AND alert(200) */
}
.modal-wrapper::after {
    /* Modal Ovelay */
    content: "";
    position: fixed;
    display: inline-block;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 101;
}

.modal-wrapper.on > .modal.wait { display: none; }
.modal-wrapper.on > .modal.on { display: inline-block; }

.modal.tert-bg { background-color: var(--tertiary-body-color); }
.modal {
    display: none;
    position: relative;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    min-width: 420px; min-height: 120px;
    width: 50%; /* default */
    max-height: 80vh;
    background-color: #FFFFFF;
    overflow: hidden;
    z-index: 102;
}

.modal > .modal-close.hidden { display: none; }
.modal > .modal-close {
    position: absolute;
    top: 20px; right: 20px;
    cursor: pointer;
    width: 15px; aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/img/button/x-black.png");
}

.modal:has(.modal-footer:not(.empty-btns)) > .modal-content {
    margin: 20px 0 110px; /* scroll blind spot ( radius ) + footer-height(bottom) */
    max-height: calc(80vh - 40px - 110px); /* margin + footer-height */
}
.modal > .modal-content {
    margin: 20px 0; /* scroll blind spot ( radius ) */
    padding: 20px 50px;
    /* overflow: hidden; */
    overflow-y: auto;
    max-height: calc(80vh - 40px); /* max-height of modal class - margin */
}

.modal > .modal-footer.empty-btns { display: none; }
.modal > .modal-footer {
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    padding: 0 30px;
    bottom: 0; height: 70px;
    padding: 20px 50px;
    margin-bottom: 20px;
}



/* [ custom alert ( message view ) ] */
.alert-wrapper.on, .alert-wrapper.nest { display: block; }
.alert-wrapper {
    position: fixed; background-color: transparent; z-index: 200;
    display: none; top: 0; left: 0; width: 100%; height: 100%;
}
.alert-wrapper::after { /* alert Overlay */
    content: "";
    position: fixed;
    display: inline-block;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.alert-wrapper.nest::after { /* transparent overlay */
    content: "";
    position: fixed;
    display: inline-block;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

/*
.alert-wrapper.on > .alert.wait { display: none; }
.alert-wrapper.on > .alert.on { display: block; }
*/
.alert-wrapper > .alert {
    /* display: none; */
    display: inline-block;
    position: relative;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    min-width: 250px; min-height: 150px;
    background-color: #3C3C3C;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
    z-index: 201;
    padding: 35px 80px;
}
.alert > .alert-close {
    position: absolute;
    top: 20px; right: 20px;
    cursor: pointer;
    width: 15px; aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/img/icon-close_x.png");
}
.alert h5 { margin: 10px 0 20px; }
.alert .alert-content {
    display: flex;
    justify-content: center;
}
.alert .btn {
	padding: 10px;
    max-width: 180px; min-width: 80px;
    width: 100%;
    margin: auto;
    font-size: 0.8em; font-weight: 500;
    border-radius: 0.4em;
    background-color: #FFFFFF; color: #737373;
}
.alert .btn.deny { background-color: #848484; color: #FFFFFF; }



/**** ui/ux ****/


/* [ CHART ] */
.circle-chart {
    position: relative;
    width: 155px; height: 155px;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    transition: background 3s ease;
}
.circle-hole {
    position: absolute;
    width: 110px; height: 110px;
    background: var(--basic-bg-color);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}
.circle-hole .chart-text {
    position: absolute;
	width: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.chart-name { color: var(--gray); font-size: 12px; font-weight: 600; }

.progress-rate {
    margin-top: 3px;
	display: inline-block;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
    color: #121212; /* var(--primary-color) */
}


/* [ radio-button ] */

.choose-btns { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.choose-btns input[type="radio"], .choose-btns input[type="checkbox"] { display: none; }

.choose-btns label {
    line-height: 1; min-width: 80px; padding: 8px 30px; 
	border: 1px solid #A7A7A7; border-radius: 20px;
    text-wrap: nowrap; text-align: center;
    user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
    cursor: pointer; overflow: hidden;
}
.choose-btns input[type="radio"]:checked + .choose-btns label,
.choose-btns input[type="checkbox"]:checked + .choose-btns label,
.choose-btns label:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-font-color);
}

.choose-btns.circle label {
    border: 0; border-radius: 20px; background-color: #FFFFFF;
    width: 150px; padding: 8px 0; justify-content: center; overflow: hidden;
    box-shadow: 2px 2px 3.3px -1px rgba(0, 0, 0, 0.25);
}
.choose-btns.circle input[type="radio"]:checked + label,
.choose-btns.circle input[type="checkbox"]:checked + label,
.choose-btns.circle label:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-font-color);
}

.choose-btns.mem-color label { justify-content: center; flex: 40%; }
.choose-btns.mem-color input[type="radio"]:checked + label,
.choose-btns.mem-color input[type="checkbox"]:checked + label { border: 2px solid var(--primary-color); }

	
.choose-btns.circle2 label {
    border: 1px solid #A7A7A7; border-radius: 17px; background-color: #EDEDED;
    min-width: 140px; max-width: 180px; padding: 8px 0; flex-grow: 1;
	justify-content: center; text-wrap: nowrap; overflow: hidden; 
}
.choose-btns.circle2 input[type="radio"]:checked + label,
.choose-btns.circle2 input[type="checkbox"]:checked + label,
.choose-btns.circle2 label:hover {
    background-color: var(--primary3-color);
    border: 2px solid var(--primary-color); 
    color: var(--primary-color);
}

.choose-btns.circle3 label {
    border: none; border-radius: 20px; background-color: #FFFFFF; color: var(--primary-color-hard);
    width: 150px; padding: 8px 0; justify-content: center; overflow: hidden;
	box-shadow: 2px 2px 3.3px -1px rgba(0, 0, 0, 0.25);
}
.choose-btns.circle3 input[type="radio"]:checked + label,
.choose-btns.circle3 input[type="checkbox"]:checked + label,
.choose-btns.circle3 label:hover { background-color: darkblue; color: #FFFFFF; }


/* [ tab ] */

/* horizontal */
.tab-buttons.tab-left { justify-content: flex-start; gap: 30px; }
.tab-buttons {
	display: flex; column-gap: 15px; row-gap: 5px; overflow-x: auto;
	align-content: center; justify-content: space-between;
	flex-grow: 1; border-bottom: 1px solid #D4D4D4; color: var(--gray);
	font-weight: 600;
}
.tab-buttons::-webkit-scrollbar { height: 3px; }
.tab-buttons::-webkit-scrollbar-thumb { border-radius: 1.5px; }

.tab-button { position: relative; font-size: inherit; font-weight: inherit; padding: 0.5em 0; cursor: pointer; }
.tab-button:has(input[type="radio"]:checked), .tab-button:hover { color: var(--primary-color); }
.tab-button input[type="radio"] { display: none; }
.tab-button:has(input[type="radio"]:checked)::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	border-radius: 1px;
	height: 2.5px; width: 100%;
	background-color: var(--primary-color);
}
.tab-content { display: none; }
.tab-wrapper:has(input[type="radio"][value="tab0"]:checked) .tab-content[name="tab0"],
.tab-wrapper:has(input[type="radio"][value="tab1"]:checked) .tab-content[name="tab1"],
.tab-wrapper:has(input[type="radio"][value="tab2"]:checked) .tab-content[name="tab2"],
.tab-wrapper:has(input[type="radio"][value="tab3"]:checked) .tab-content[name="tab3"],
.tab-wrapper:has(input[type="radio"][value="tab4"]:checked) .tab-content[name="tab4"],
.tab-wrapper:has(input[type="radio"][value="tab5"]:checked) .tab-content[name="tab5"],
.tab-wrapper:has(input[type="radio"][value="tab6"]:checked) .tab-content[name="tab6"],
.tab-wrapper:has(input[type="radio"][value="tab7"]:checked) .tab-content[name="tab7"],
.tab-wrapper:has(input[type="radio"][value="tab8"]:checked) .tab-content[name="tab8"],
.tab-wrapper:has(input[type="radio"][value="tab9"]:checked) .tab-content[name="tab9"],
.tab-wrapper:has(input[type="radio"][value="tab10"]:checked) .tab-content[name="tab10"],
.tab-wrapper:has(input[type="radio"][value="tab11"]:checked) .tab-content[name="tab11"],
.tab-wrapper:has(input[type="radio"][value="tab12"]:checked) .tab-content[name="tab12"],
.tab-wrapper:has(input[type="radio"][value="tab13"]:checked) .tab-content[name="tab13"],
.tab-wrapper:has(input[type="radio"][value="tab14"]:checked) .tab-content[name="tab14"],
.tab-wrapper:has(input[type="radio"][value="tab15"]:checked) .tab-content[name="tab15"],
.tab-wrapper:has(input[type="radio"][value="tab16"]:checked) .tab-content[name="tab16"],
.tab-wrapper:has(input[type="radio"][value="tab17"]:checked) .tab-content[name="tab17"],
.tab-wrapper:has(input[type="radio"][value="tab18"]:checked) .tab-content[name="tab18"],
.tab-wrapper:has(input[type="radio"][value="tab19"]:checked) .tab-content[name="tab19"],
.tab-wrapper:has(input[type="radio"][value="tab20"]:checked) .tab-content[name="tab20"] { display: block; padding: 40px 0; }

/* vertical */         
.tab-wrapper.vertical { display: grid; grid-template-columns: auto 1fr; padding-left: 10px; }

.tab-wrapper.vertical .tab-buttons { flex-direction: column; justify-content: flex-start; border: none; padding: 10px 0; font-size: 14px; }
.tab-wrapper.vertical .tab-button:hover { color: #000000; }
.tab-wrapper.vertical .tab-button:has(input[type="radio"]:checked) {
	color: #000000; background-color: #FFFFFF; border: none; box-shadow: 6px 4px 8px -1px #00000007; z-index: -1;
}
.tab-wrapper.vertical .tab-button:has(input[type="radio"]:checked)::after {
	left: -10px; top: 0; height: 100%; width: 10px; border-radius: 4px 0 0 4px;
}
.tab-wrapper.vertical .tab-button:has(input[type="radio"]:checked) + .tab-button { border-top: none; }
.tab-wrapper.vertical .tab-button { padding: 20px 10px; border-top: 1px solid #D4D4D4; }
.tab-wrapper.vertical .tab-button:last-child:not(:has(input[type="radio"]:checked)) { border-bottom: 1px solid #D4D4D4; }

.tab-wrapper.vertical .tab-content {
	padding: 15px 10%; min-height: 515px; background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 0 8px -1px #00000007;
}


.input-lines-box {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-sm);
    /* overflow: hidden; */ /* for absolute dropdown visible */
}

.input-line {
	position: relative; display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: 7%; row-gap: 0.5em; padding: 0.5em 7%; font-size: 14px; 
}
/* for absolute dropdown visible */
.input-lines-box .input-line:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.input-lines-box .input-line:last-child {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

.input-line.no-use { background: #E9E9E9; }
.input-line.no-use input[type="text"] { pointer-events: none; }

/*
.input-line.divide::before {
    content: '';
    position: absolute;
    top: 0; left: 30px; right: 30px; height: 0.5px;
    background-color: #D4D4D4;
}
*/

.input-line > .line-label > *, .input-line > .line-content > * {
	display: flex; align-items: center; height: var(--line-content-height);
}

.input-line .line-content { position: relative; display: flex; flex-wrap: wrap; flex-grow: 1; column-gap: 0.9em; row-gap: 0.5em; align-items: center; line-height: 1; }

.input-line .line-label { color: var(--gray); text-align: left; font-weight: 600; min-width: 80px; }
.input-line .line-label.long { min-width: 200px; }
.input-line .line-label > * { position: relative; }
.input-line.line-required .line-label > *::before {
    content: ''; position: absolute; top: 0.7em; left: -0.8em; height: 4px; aspect-ratio: 1;
    background-color: var(--primary-color);  border-radius: 50%;
}
.line-content input { border: none; height: 100%; }
.line-content input[type="text"]:first-child:last-child { width: 100%; }
.line-content input[type="text"]:hover, .line-content input[type="text"]:focus { filter: brightness(0.975); }
/* .line-content input.border-input, .line-content textarea.border-input { padding: 10px 15px; border: 1px solid var(--basic-no-active-color); border-radius: 5px; } */
/* .line-content input[type="text"], .line-content .custom-select, .line-content button { height: var(--line-content-height); } */

.line-qaut-msg.active, .line-qaut-msg.req { display: flex;  align-items: center; }
.line-qaut-msg {
    display: none; margin-left: auto; height: 100%; line-height: 1;
    background-color: transparent; color: #FF40A9; font-size: 0.7em; font-weight: 500;
}
.input-line > .line-qaut-msg {
    position: absolute; right: 7%; /* (= padding-right of input-line) */
    height: var(--line-content-height);
}
.input-wrapper > .line-qaut-msg {
    position: absolute;
    top: 50%; transform: translateY(-50%); right: 1em; /* (= padding-right of input) */ 
}



/* [ RADIO ] */
.tog-btn-radio { display: flex; flex-wrap: nowrap; align-items: center; }
.tog-btn-radio input[type="radio"] { display: none; }
.tog-btn-radio > label {
    display: flex; justify-content: center; align-items: center;
	color: var(--basic-no-active-color); font-weight: 500; height: 100%;
	border: 1px solid var(--basic-no-active-color); padding: 0.6em 2.5em;
    cursor: pointer; line-height: 1;
}
.tog-btn-radio > label:first-child { border-radius: 0.3em 0 0 0.3em; }
.tog-btn-radio > label:last-child { border-radius: 0 0.3em 0.3em 0; }
.tog-btn-radio > label:has(input[type="radio"]:checked) {
    color: var(--primary-font-color);
    background-color: var(--primary-color);
	border-color: var(--primary-color);
}
.tog-btn-radio > label:has(input[type="radio"]:not(:checked)):hover {
    color: var(--primary-color); border-color: var(--primary-color);
}




/* [ slider ] */
.slider-container {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative; /* for absolute button */
}
.slider.center { justify-content: center; } /* when item-width < slider-width */
.slider {
    display: flex; gap: 20px;
    align-items: center;
    padding: 10px 0;
    justify-content: flex-start; /* default( when item-width > slider-width ) */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    transition: transform 0.3s ease; /* slide move animation */
}
.slider::-webkit-scrollbar { display: none; } /* hide scrollbar for Chrome/Safari/Opera */

.slider .slide {
    display: grid;
    grid-template-rows: 4fr 1fr;
    min-width: 330px;/*420 -> 330*/ max-width: 420px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 6px 4px 9px -1px #00000012;
    background-color: #FFFFFF;
    cursor: pointer;
}

.slider .slide .img-content { position: relative; display: inline-block; overflow: hidden; }
.slider .slide .img-content img { display: block; width: 100%; height: auto; z-index: 0; }
.slider .slide .img-content::after {
    content: ""; z-index: 1;
    position: absolute; bottom: 0; left: 0; right: 0;
	height: 30%; background: linear-gradient(to bottom, transparent, #FFFFFF);
    pointer-events: none;
}
.slider .slide .info-content {
    display: grid; grid-template-columns: 1fr 60px;
    align-items: center; padding: 0 20px; overflow: hidden; 
}
.slider .slide .info-content > h4 { text-align: left; }

/* autoscroll slider */
.slider.auto { overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.slider.auto .slide { gap: 20px; flex: 0 0 auto; min-width: 330px;/* 420 -> 330 */ max-width: 420px; scroll-snap-align: center; }

/* def-content : max-width 1279px */
.slider.auto .slide-spacer { flex: 0 0 calc((100% - 460px) / 2); } /* => 20px*2 + 420px */
/* .slider.auto .slide-spacer { flex: 0 0 calc((100vh - 460px) / 2); } */ /* => 20px*2 + 420px */

.slider-btn.hide { display: none; }
.slider-btn {
    position: absolute;
    /* opacity: 0.8; */
    top: 50%; transform: translateY(-50%);
    width: auto; height: 30px; aspect-ratio: 1;
    cursor: pointer;
    /* background-color: rgba(9, 9, 9, 9.5); color: #FFFFFF; border: none; padding: 10px; z-index: 1; */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.slider-btn.small { height: 15px; }
.slider-btn.regular { height: 23px; }

.slider-btn.prev { left: 0; background-image: url(/img/icon-box_arrow-left.png); }
.slider-btn.next { right: 0; background-image: url(/img/icon-box_arrow-right.png); }

.slide-page { display: flex; gap: 25px; justify-content: center; align-items: center; height: 50px; margin: 10px auto; }
.slide-page .slider-btn { position: relative; top: inherit; transform: inherit; }

.pagination { display: flex; justify-content: center; }
.dot {
    width: 10px; height: 10px; margin: 0 5px;
    background-color: #8A8A8A; border-radius: 5px; /* 50% of w/h */
    cursor: pointer;
}
.dot.active { background-color: var(--primary-color); width: 15px; } /* stretch-dot */


/* [ paging ] */
.page-container { position: relative; width: 100%; margin: auto; /* overflow: hidden; */ }
.card-paging {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0;
    transition: transform 0.3s ease; /* slide move animation */
}
.card-paging .card:hover { border: 2px solid var(--primary-color); transform: translateY(-1px); }
.card-paging .card {
    display: grid;
    grid-template-rows: auto 10fr 7fr auto;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 6px 4px 9px -1px #00000012;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    text-align: left;
    align-items: start;
    white-space: normal;
    position: relative;
}
.card-paging .card.team { grid-template-rows: 3fr 2fr 0fr; height: 240px; }

.icon-heart {
    width: 20px; height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/img/empty-heart.png");
    transform-origin: center center;
    transition: trnasform 0.3s ease;
}
.icon-heart:hover { transform: scale(1.2); }
.icon-heart.active { background-image: url("/img/filled-heart.png"); }
.card .icon-heart { position: absolute; top: 15px; right: 15px; z-index: 10; }

.card-paging .card .img-content {
    overflow: hidden;
    padding: 20px 0;
}
.card-paging .card .img-content img {
    display: block;
    height: 100%;
    width: auto;
    z-index: 0;
}
.card-paging .card .info-content {
    overflow: hidden;
    display: grid;
    grid-template-rows: 3fr 1fr;
    align-self: flex-start;
    text-align: left;
    white-space: normal;
}

.d-day { color: #FF40A9; font-size: 0.9em; height: 100%; }
.day-end::after {
    content: '마감되었습니다';
    padding: 4px 13px;
    background-color: lightgrey;
    line-height: 1;
    border-radius: 5px;
}
.card:has(.show-all-wrapper):hover { overflow: visible; height: auto; /* [def] height:300px */ }
.card:has(.show-all-wrapper):hover, .card:has(.show-all-wrapper):hover .show-all-wrapper { overflow: visible; }

.show-all-wrapper { overflow: hidden; position: relative; }

.card:has(.show-all-wrapper):hover .show-all-wrapper::after { display: none; }
.show-all-wrapper::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 10%; height: 100%;
	background: linear-gradient(to right, transparent 0%, #FFFFFF 100%); /* parent bg-color */
}

.show-items { display: flex; gap: 5px; flex-wrap: nowrap; align-items: center; white-space: nowrap; text-overflow: ellipsis; }
.card:has(.show-all-wrapper):hover .show-items { flex-wrap: wrap; transition: 1s ease; }

.show-items > span {
	background-color: #749FF5; color: #FFFFFF; border-radius: 0.3em;
	width: fit-content; padding: 3px 15px; font-size: 0.9em;
}

.num-page-area {
    position: relative; display: flex; justify-content: center; align-items: center;
    width: 140px; height: 30px; margin: 10px auto;
}


.img-edit-wrapper { display: inline-block; position: relative; margin: 0; padding: 0; }
.img-edit-wrapper .btn-img-edit:hover { cursor: pointer; transform: translateY(-1px); }
.img-edit-wrapper .btn-img-edit {
    position: absolute;
    right: 5%; bottom: 5%;
    width: 20%; aspect-ratio: 1;
	font-size: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/img/button/pencil-whte-circle-gray.png');
}

.emj-penguin { background-image: url(/img/emoji/emoji-penguin.png); }
.emj-pig { background-image: url(/img/emoji/emoji-pig.png); }
.emj-bear { background-image: url(/img/emoji/emoji-bear.png); }
.emj-panda { background-image: url(/img/emoji/emoji-panda.png); }
.emj-seal { background-image: url(/img/emoji/emoji-seal.png); }
.emj-chick { background-image: url(/img/emoji/emoji-chick.png); }
.emj-cat { background-image: url(/img/emoji/emoji-cat.png); }
.emj-camel { background-image: url(/img/emoji/emoji-camel.png); }




@media (max-width: 1279px) {
    .page-container .card-paging { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .page-container .card-paging { grid-template-columns: repeat(1, 1fr); }
}