/* fonts */
/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100 900;
    src: url('../fonts/Pretendard/PretendardVariable.woff2') format('woff2-variations');
}


/* animations */
@keyframes cameImpact {
    from {
    }

    50% {
        color: #F48B0E;
        scale: 1;
        rotate: 0deg;
    }

    to {
        color: #F46224;
        scale: 3;
        rotate: -15deg;
    }
    
}


/* styles */

/* Current application customs */
html {
    touch-action: pan-y;

    --color-mango-archromatic-darker: #34373A;      --cmadr: 52 55 58;
    --color-mango-archromatic-dark: #4D5256;        --cmad: 77 82 86;
    --color-mango-archromatic-neutral: #949DA5;     --cman: 148 157 165;
    --color-mango-archromatic-lightness: #C5D2DD;   --cmaln: 197 210 221;
    --color-mango-archromatic-lightest: #F1F1F4;    --cmalt: 241 241 244;

    --color-mango-yellow-light: #FDD105;            --cmyl: 253 209 5;
    --color-mango-yellow-vivid-lightest: #FFEA47;   --cmyvlt: 255 234 71;
    --color-mango-yellow-vivid-lightness: #FFEB30;  --cmyvln: 255 235 48;
    --color-mango-yellow-vivid-lighter: #FFD930;    --cmyvlr: 255 217 48;
    --color-mango-yellow-vivid-light: #FFCC22;      --cmyvl: 255 204 34;
    --color-mango-yellow-vivid: #F7B500;            --cmyv: 247 181 0;
    --color-mango-yellow-dark: #FFB300;             --cmyd: 255 179 0;
    --color-mango-green-light: #50DB2D;             --cmgl: 80 219 45;
    --color-mango-green-vivid-lightest: #79F15B;    --cmgvlt: 121 241 91;
    --color-mango-green-vivid-lighter: #6CDD50;     --cmgvlr: 108 221 80;
    --color-mango-green-vivid-light: #5EC046;       --cmgvl: 94 192 70;
    --color-mango-green-vivid: #50A53B;             --cmgv: 80 165 59;
    --color-mango-green-dark: #39A020;              --cmgd: 57 160 32;
    --color-mango-light: var(--color-mango-yellow-light);                    --cml: var(--cmyl);
    --color-mango-vivid-lightest: var(--color-mango-yellow-vivid-lightest);  --cmvlt: var(--cmyvlt);
    --color-mango-vivid-lighter: var(--color-mango-yellow-vivid-lighter);    --cmvlr: var(--cmyvlr);
    --color-mango-vivid-light: var(--color-mango-yellow-vivid-light);        --cmvl: var(--cmyvl);
    --color-mango-vivid: var(--color-mango-yellow-vivid);                    --cmv: var(--cmyv);
    --color-mango-dark: var(--color-mango-yellow-dark);                      --cmd: var(--cmyd);
    --image-mango-gradate: var(--color-mango-light), var(--color-mango-dark);
    --image-mango-gradate-tp: rgb(var(--cml) / 50%), rgb(var(--cmd) / 50%);
    --image-mango-gradate-tpl: rgb(var(--cml) / 25%), rgb(var(--cmd) / 25%);
    --image-mango-gradate-tph: rgb(var(--cml) / 75%), rgb(var(--cmd) / 75%);
    --image-mango-vivid-gradate: var(--color-mango-vivid-lightest), var(--color-mango-vivid);
    --image-mango-vivid-gradate-tp: rgb(var(--cmvlt) / 50%), rgb(var(--cmv) / 50%);
    --image-mango-vivid-gradate-tpl: rgb(var(--cmvlt) / 25%), rgb(var(--cmv) / 25%);
    --image-mango-vivid-gradate-tph: rgb(var(--cmvlt) / 75%), rgb(var(--cmv) / 75%);
    --image-mango-gradient: linear-gradient(135deg, var(--image-mango-gradate));
    --image-mango-gradient-tp: linear-gradient(135deg, var(--image-mango-gradate-tp));
    --image-mango-gradient-tpl: linear-gradient(135deg, var(--image-mango-gradate-tpl));
    --image-mango-gradient-tph: linear-gradient(135deg, var(--image-mango-gradate-tph));
    --image-mango-vivid-gradient: linear-gradient(135deg, var(--image-mango-vivid-gradate));
    --image-mango-vivid-gradient-tp: linear-gradient(135deg, var(--image-mango-vivid-gradate-tp));
    --image-mango-vivid-gradient-tpl: linear-gradient(135deg, var(--image-mango-vivid-gradate-tpl));
    --image-mango-vivid-gradient-tph: linear-gradient(135deg, var(--image-mango-vivid-gradate-tph));
    --image-mango-edu-logo: url('../vactors/mango_edu.svg');

    --color-pos-yellow: var(--color-mango-yellow-dark);                     --cpy: var(--cmyd);
    --color-pos-gray: var(--color-mango-archromatic-darker);                --cpg: var(--cmadr);
    --color-pos-active-yellow: var(--color-mango-yellow-vivid);             --cpay: var(--cmyv);
    --color-pos-deactive-yellow: #FFF8C6;                                 --cpag: 255 248 198;
    --color-pos-active-gray: var(--color-mango-archromatic-lightest);       --ctag: var(--cmalt);


    --color-point-dark: var(--color-mango-dark);            --cpd: var(--cmd);
    --color-point: var(--color-mango-vivid);                --cp: var(--cmv);
    --color-point-light: var(--color-mango-vivid-light);    --cpl: var(--cmvl);


    --top-pad: calc(env(safe-area-inset-top) + 0px);
    --bottom-pad: calc(env(safe-area-inset-bottom) + 0px);



    --svg-simple-checked: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 viewBox=%270 0 18 18%27%3E%3Cpath fill=%27%233182F6%27 fill-rule=%27evenodd%27 d=%27M3.8,8.2c-.2.2-.2.4,0,.6l3.9,3.9c.2.2.4.2.6,0L17.7,3.3c.2-.2.2-.4,0-.6l-.8-.8c-.2-.2-.4-.2-.6,0l-8,8c-.2.2-.4.2-.6,0l-2.5-2.5c-.2-.2-.4-.2-.6,0l-.8.8Z%27/%3E%3C/svg%3E");
}

body {
    --common-bg-color: white;
    font-family: 'Pretendard';


    /* static color */
    


    /* adaptive color (light/common) */
}

body[data-dark-mode="1"] {

    /* adaptive color (dark) */

}

main { font-family: 'Pretendard'; }
main button, main input, main textarea { font-family: 'Pretendard'; }

article { --article-theme-color: transparent; }

article button { padding: 1em; border-style: none; border-radius: 1em; }


/* override estreUi */
nav#mainMenu > section#menuArea ul > li > button { padding: 16px 22px; }

main > section#home > div.container[data-container-id="root"] { overflow: unset; }

footer#fixedBottom { display: none; }
footer#fixedBottom nav#rootbar > button[data-active="1"] { background-color: rgb(var(--cpay) / 75%); }

nav#managedOverlay > section#notification > div.container { --bg-color: rgb(var(--cabr) / 80%); }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article { bottom: 64px; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article[data-on-top="1"] { bottom: 96px; }
nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article[data-on-top="0"] { bottom: 112px; }

/* custom element styles */
article button.mango_rex { --disable-rate: 20%; --color: #222; --border-color: rgb(var(--cadm) / 20%); --bg-color: #FFF0; --apply-color: var(--color); --apply-border-color: var(--border-color); --apply-bg-color: var(--bg-color); --radius: 12px; height: 42px; padding: initial; border-style: none; border-radius: var(--radius); color: var(--apply-color); font-size: 1.125rem; }
article button.mango_rex:disabled { --apply-color: rgb(from var(--color) r g b / 50%); --apply-border-color: rgb(from var(--border-color) r g b / var(--disable-rate)); --apply-bg-color: rgb(from var(--bg-color) r g b / var(--disable-rate)); } 
article button.mango_rex:not(.bold) { --color: var(--color-grayscale-dark); border: solid 1px var(--apply-border-color); }
article button.mango_rex.bold { --color: var(--color-white); height: 44px; background-color: var(--apply-bg-color); }
article button.mango_rex.bold:disabled { --color: #888; }
article button.mango_rex.bold:not(.pointed) { --bg-color: var(--color-grayscale-darker); }
article button.mango_rex.bold.pointed { --bg-color: var(--color-point); }
article button.mango_rex > .logo_icon svg path { fill: var(--fill); transition-duration: 0.2s; }
article button.mango_rex:disabled > .logo_icon svg path { fill: rgb(from var(--fill) r g b / 50%); }

article .mango_enter_rex { --height: 46px; --pad-h: 24px; --border-color: rgb(var(--cadm) / 20%); --radius: 12px; position: relative; border: solid 1px var(--border-color); border-radius: var(--radius); cursor: text; }
article .mango_enter_rex > * { }
article .mango_enter_rex:focus-within { border-color: #000; }
article .mango_enter_rex > input { width: 100%; height: var(--height); padding-inline: var(--pad-h); border-style: none; border-radius: var(--radius); background-color: transparent; color: var(--color-text-darker); font-size: 1rem; }
article .mango_enter_rex > input::placeholder { color: #AAA; }
article .mango_enter_rex.emp_ph > input::placeholder { color: #555; }
article .mango_enter_rex > input:focus { box-shadow: none; }
article .mango_enter_rex > .condition_host { position: absolute; display: flex; flex-direction: column; flex-wrap: nowrap; top: 0; bottom: 0; right: 0; height: fit-content; margin: auto; margin-right: var(--pad-h); justify-content: center; align-items: flex-end; transition-timing-function: ease; transition-duration: 0.3s; }
article .mango_enter_rex:has(> button.right_side[data-show="1"]) > .condition_host { margin-right: var(--height); }
article .mango_enter_rex > .condition_host div { height: min-content; }
article .mango_enter_rex > .condition_host > .conditions { display: flex; flex-direction: row; flex-wrap: nowrap; width: max-content; height: fit-content; color: #999; font-size: 0.875rem; text-align: right; overflow: hidden; transform-origin: center right; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions.alert { color: #F46224; overflow: hidden; }
article .mango_enter_rex > .condition_host > .conditions[data-satisfy="1"] { height: 0; opacity: 0; }
article .mango_enter_rex > .condition_host > .conditions span { height: min-content; min-width: fit-content; text-wrap: nowrap; }
article .mango_enter_rex > .condition_host > .conditions .condition_set { display: flex; flex-direction: row; flex-wrap: nowrap; overflow: hidden; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions .condition_set:not(:last-child) > span::after { content: '\A0'; }
article .mango_enter_rex > .condition_host > .conditions .condition_set[data-satisfy="1"] { width: 0; opacity: 0; }
article .mango_enter_rex > .condition_host > .conditions .condition { overflow: hidden; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions .condition:not(:last-child) > span::after { content: '\A0'; }
article .mango_enter_rex > .condition_host > .conditions .condition[data-satisfy="1"] { width: 0; opacity: 0; }
article .mango_enter_rex > .condition_host[data-length] > .conditions:not(.alert) { text-shadow: 0 0 3px var(--common-bg-color); }
article .mango_enter_rex > .condition_host[data-length="5"] > .conditions:not(.alert) { color: #aaa094; }
article .mango_enter_rex > .condition_host[data-length="6"] > .conditions:not(.alert) { color: #b9a184; }
article .mango_enter_rex > .condition_host[data-length="7"] > .conditions:not(.alert) { color: #c49c70; }
article .mango_enter_rex > .condition_host[data-length="8"] > .conditions:not(.alert) { color: #cc9450; }
article .mango_enter_rex > .condition_host[data-length="9"] > .conditions:not(.alert) { color: #e0902f; }
article .mango_enter_rex > .condition_host[data-length="10"] > .conditions:not(.alert) { color: #F48B0E; }
article .mango_enter_rex > .condition_host[data-length="11"] > .conditions:not(.alert) { color: #f48224; font-weight: 400; scale: 1.25; rotate: -2deg; }
article .mango_enter_rex > .condition_host[data-length="12"] > .conditions:not(.alert) { color: #f47024; font-weight: 500; scale: 1.75; rotate: -6deg; }
article .mango_enter_rex > .condition_host[data-length="13"] > .conditions:not(.alert) { color: #F46224; font-weight: 600; scale: 2.3; rotate: -11deg; }
article .mango_enter_rex > .condition_host[data-length="14"] > .conditions:not(.alert) { color: #f44324; font-weight: 700; scale: 3; rotate: -15deg; }
article .mango_enter_rex > .right_side { --src: none; position: absolute; display: none; opacity: 0; height: var(--height); aspect-ratio: 1; top: 0; bottom: 0; right: 0; margin: auto; border-style: none; border-radius: var(--radius); background-color: transparent; background-image: var(--src); background-position: center; background-repeat: no-repeat; }
article .mango_enter_rex > .right_side[data-show] { display: block; }
article .mango_enter_rex > .right_side[data-show="1"] { opacity: 1; }
article .mango_enter_rex > .right_side.clear { --src: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' style='width: 16px; height: 16px; '%3E%3Ccircle cx='8' cy='8' r='8' fill='%23CCCCCC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.81804 4.11091L4.11094 4.81802L7.29292 8L4.11094 11.182L4.81804 11.8891L8.00002 8.70711L11.182 11.8891L11.8891 11.182L8.70713 8L11.8891 4.81802L11.182 4.11091L8.00002 7.29289L4.81804 4.11091Z' fill='white'/%3E%3C/svg%3E%0A"); }



article .line_block { border-bottom: none; border-radius: 0; }

article .bg_pointed { --bg-basic: rgb(var(--cpl) / 15%); --bg-hover: rgb(var(--cpl) / 30%); --bg-active: rgb(var(--cpl) / 60%); }


article nav.head_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--appbar-height); flex-shrink: 0; padding-left: var(--left-pad); padding-right: var(--right-pad); justify-content: center; user-select: none; }
article nav.head_block > * { max-height: 100%; margin-top: auto; margin-bottom: auto; }
article nav.head_block > * > * { max-height: 100%; }
article nav.head_block > button { height: 100%; }
article nav.head_block > button.square { aspect-ratio: 1; }
article nav.head_block > .float_area { position: absolute; top: 0; bottom: 0; margin: 0; }
article nav.head_block > .float_area > button { height: 100%; margin: 0; font-size: 1rem; }
article nav.head_block > nav { }
article nav.head_block > nav > button { }
article nav.head_block > nav > button#mainMenuBtn { overflow: hidden; }
article nav.head_block > nav > button#mainMenuBtn dotlottie-player { --extend: 24px; --size: calc(var(--appbar-height) + (var(--extend) * 2)); width: var(--size); height: var(--size); margin: calc(var(--extend) * -1); translate: 0 3.8%; }
article nav.head_block > nav.appbarLeft { flex-direction: row; flex-wrap: nowrap; left: 0; }
article nav.head_block > nav.appbarLeft > button { }
article nav.head_block > nav.appbarLeft > button.back_nav {  }
article nav.head_block > nav.appbarLeft > button.back_nav > span { font-size: 26px; }
article nav.head_block > nav.appbarRight { flex-direction: row-reverse; flex-wrap: nowrap; right: 0; }
article nav.head_block > nav.appbarRight > button { }
article nav.head_block > button.home { }
article nav.head_block > button.home img { height: 86%; }

article nav.foot_block { margin: 16px; height: 64px; flex-shrink: 0; }


article .head_box { display: flex; flex-flow: column nowrap; min-height: 160px; justify-content: center; }

article .pointed_comment { color: var(--color-mango-green-vivid-light); font-size: 16px; font-weight: 600; text-align: center; line-height: 2em; }
article .head_guide { font-size: 28px; font-weight: 600; text-align: center; }

article .input_display { --font-size: 32px; --line-height: 1.2em; position: relative; display: flex; flex-flow: row nowrap; margin: 8px 24px; font-size: var(--font-size);}
article .input_display > * { }
article .input_display > span { display: inline-block; flex-grow: 0; flex-shrink: 0; border-bottom: solid 2px var(--color-mango-yellow-vivid); line-height: var(--line-height); }
article .input_display > input { width: 100%; flex-grow: 1; flex-shrink: 1; border-style: none; border-bottom: solid 2px var(--color-mango-yellow-vivid); font-size: var(--font-size); line-height: var(--line-height); appearance: none; }
article .input_display > button { }
article .input_display > button > div { margin: auto 0.25em; color: #FFF; font-size: 1.5rem; }
article .input_display > button > div.circled { border-radius: 100%; background-color: #BEBEBE; height: 1em; line-height: 0.9em; translate: 0 -0.07em; }
article .input_display > button > div > span { }

article .num_keypad > button { font-size: 28px; font-weight: 600; }

article ul.blocked_list { }
article ul.blocked_list:empty:before { content: attr(data-placeholder); color: #444; text-align: center; }
article ul.blocked_list > li { position: relative; margin: 6px 24px; border-bottom-style: none; }
article ul.blocked_list > li > :is(div, button) { position: relative; display: flex; flex-flow: column nowrap; width: -webkit-fill-available; padding: 16px 24px; border-radius: 24px; background-color: var(--color-pos-active-gray); text-align: left; }
article ul.blocked_list > li > div { }
article ul.blocked_list > li > div > span {  } 
article ul.blocked_list > li > button { }
article ul.blocked_list > li > button > span {  } 
article ul.blocked_list > li .item_subject { font-size: 24px; font-weight: 500; line-height: 1.4em; }
article ul.blocked_list > li .item_details { display: flex; flex-flow: row wrap; color: #666; line-height: 1.4em; }
article ul.blocked_list > li .item_details > span { }
article ul.blocked_list > li .item_details > span:not(:last-child)::after { content: '\A0|\A0'; }



article > section > .basic > .label { width: max(240px, 75%); padding: 8px 24px 10px; border-radius: 40% 30% 50% 32px; /* border-top-left-radius: 48px; */ background-image: linear-gradient(-10deg, var(--image-mango-gradate-tph)); box-shadow: inset -25px -9px 15px 1px var(--color-mango-vivid-lightest), inset 4px 4px 12px 1px var(--color-mango-vivid), -4px -4px 4px -1px var(--color-mango-vivid); }
article > section.collapsible > button.toggle { margin-top: -1px; margin-right: 5px; border: none; }
article > section.collapsible > .basic button.toggle { margin-top: -1px; margin-right: 5px; border: none; }




/* Data related styles */
article .block_box { margin: 16px; }
article .block_box.line_block { padding: 0; }
article .block_box > * { margin: 0; }
article .block_box > *:first-child { margin-top: 0; }
article .block_box.line_block > *:not(:first-child) { margin-left: 8px; }
article .block_box:not(.line_block) > *:not(:first-child) { margin-top: 16px; }
article .block_box > *:last-child { margin-bottom: 0; }


article ul.payment_history_list {}
article ul.payment_history_list > li {}
article ul.payment_history_list > li > div {}
article ul.payment_history_list > li > div > span {}
article ul.payment_history_list > li > div > span.item_subject { display: flex; flex-flow: row wrap; margin: 2px 0 8px; justify-content: space-between; align-items: center; line-height: 1.5em; }
article ul.payment_history_list > li > div > span.item_details {}
article ul.payment_history_list > li > div span.row_index { color: #72A7F9; font-size: 20px; }
article ul.payment_history_list > li > div button.cancel_payment { --height: 42px; height: var(--height); margin: calc((var(--height) - 1em)* -0.5) 0; color: #FFF; background-color: var(--color-pos-active-yellow); }


article button.attend_commit { background-color: var(--color-pos-active-yellow); }
article button.attend_commit:disabled { background-color: var(--color-pos-deactive-yellow); }
article button.attend_commit > span {}
article button.attend_commit:not(:disabled) > span.placeholder { display: none; }
article button.attend_commit:disabled > span:not(.placeholder) { display: none; }



/* extra preset */

.mango_edu_id_login {}
.mango_edu_id_login #login_submit { cursor: pointer; }

.mango_user_handle { }
.mango_user_handle label { min-width: fit-content; overflow: hidden; }
.mango_user_handle .sign_out { cursor: pointer; }

button.external_service { --pad-l: var(--pad-h); --pad-r: var(--pad-h); position: relative; align-items: center; text-align: center; }
button.external_service:not(.max_width) { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; justify-content: center; }
button.external_service > .logo_icon { height: 24px; aspect-ratio: 1; margin: auto 0; }
button.external_service.max_width > .logo_icon { position: absolute; top: 0; bottom: 0; left: var(--pad-l); }
button.external_service:not(.max_width) > .logo_icon { position: relative; margin-right: 8px; } 
button.external_service > .logo_icon > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; }
button.external_service > span { font-size: 1rem; }