/* 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-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);



	--svg-ios: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.83226 0.640381C8.86651 0.640381 8.90077 0.640381 8.93696 0.640381C9.02099 1.67841 8.62478 2.45402 8.14325 3.01569C7.67078 3.57348 7.02379 4.11447 5.97736 4.03239C5.90755 3.00923 6.30441 2.29114 6.78529 1.73076C7.23126 1.20852 8.04889 0.743796 8.83226 0.640381Z' fill='%23999999'/%3E%3Cpath d='M12 11.4446C12 11.4549 12 11.464 12 11.4737C11.7059 12.3643 11.2864 13.1276 10.7745 13.836C10.3072 14.4792 9.73457 15.3446 8.71205 15.3446C7.8285 15.3446 7.24162 14.7765 6.3361 14.761C5.37822 14.7454 4.85145 15.236 3.97565 15.3595C3.87547 15.3595 3.77529 15.3595 3.67704 15.3595C3.03393 15.2664 2.51492 14.7571 2.13681 14.2982C1.02187 12.9421 0.160293 11.1906 0 8.94904C0 8.72929 0 8.51018 0 8.29042C0.067866 6.6862 0.847355 5.38188 1.88344 4.74975C2.43025 4.41366 3.18195 4.12733 4.01896 4.2553C4.37768 4.31089 4.74416 4.43369 5.06539 4.55521C5.36982 4.67219 5.75051 4.87967 6.11117 4.86868C6.35549 4.86157 6.59851 4.73424 6.84477 4.6444C7.56609 4.38392 8.27319 4.08531 9.20521 4.22557C10.3253 4.39491 11.1203 4.8926 11.6115 5.66045C10.664 6.26349 9.9149 7.17225 10.0429 8.72412C10.1566 10.1338 10.9762 10.9585 12 11.4446Z' fill='%23999999'/%3E%3C/svg%3E%0A");
	--svg-android: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50001 15.3596C7.98047 15.3596 8.39946 14.9304 8.39946 14.4383V12.2866H9.00004C9.36043 12.2866 9.60061 12.0405 9.60061 11.6714V5.52588H2.39941V11.6714C2.39941 12.0405 2.63964 12.2866 2.99999 12.2866H3.60061V14.4383C3.60061 14.9304 4.0195 15.3596 4.50006 15.3596C4.98047 15.3596 5.39941 14.9304 5.39941 14.4383V12.2866H6.60061V14.4383C6.60056 14.9304 7.01955 15.3596 7.50001 15.3596Z' fill='%23999999'/%3E%3Cpath d='M11.1006 11.6714C11.5811 11.6714 12 11.2423 12 10.7501V6.44681C12 5.95727 11.5811 5.52588 11.1006 5.52588C10.6201 5.52588 10.2012 5.95727 10.2012 6.44681V10.7501C10.2012 11.2423 10.6201 11.6714 11.1006 11.6714Z' fill='%23999999'/%3E%3Cpath d='M0.899353 11.6714C1.37986 11.6714 1.7988 11.2423 1.7988 10.7501V6.44681C1.7988 5.95727 1.37991 5.52588 0.899353 5.52588C0.418892 5.52588 0 5.95727 0 6.44681V10.7501C0 11.2423 0.418892 11.6714 0.899353 11.6714Z' fill='%23999999'/%3E%3Cpath d='M8.87987 0.73321C8.75981 0.609438 8.58105 0.609438 8.46098 0.73321L7.65547 1.55556L7.61831 1.59358C7.14067 1.34859 6.60517 1.22624 6.00881 1.22506C6.00589 1.22506 6.00301 1.22496 6.00009 1.22496H5.99999C5.99697 1.22496 5.99419 1.22506 5.99117 1.22506C5.39486 1.22624 4.85935 1.34859 4.38177 1.59358L4.34451 1.55556L3.53904 0.73321C3.41888 0.609438 3.24022 0.609438 3.12015 0.73321C2.99999 0.856296 2.99999 1.03896 3.12015 1.16195L3.89934 1.96023C3.64828 2.13194 3.42061 2.34206 3.22262 2.58239C2.74863 3.15788 2.44631 3.90685 2.40474 4.71835C2.40435 4.7268 2.40354 4.73515 2.40315 4.7436C2.40061 4.79885 2.39941 4.8544 2.39941 4.91015H9.60061C9.60061 4.8544 9.59932 4.79885 9.59687 4.7436C9.59649 4.73515 9.59567 4.7268 9.59519 4.71835C9.55372 3.90685 9.25129 3.15783 8.77731 2.58243C8.57942 2.34211 8.35166 2.13199 8.10059 1.96028L8.87987 1.16199C9.00004 1.03896 9.00004 0.856296 8.87987 0.73321ZM4.49891 3.83603C4.25043 3.83603 4.04899 3.62969 4.04899 3.37517C4.04899 3.12065 4.25043 2.91431 4.49891 2.91431C4.74739 2.91431 4.94883 3.12065 4.94883 3.37517C4.94883 3.62969 4.74739 3.83603 4.49891 3.83603ZM7.50112 3.83603C7.25264 3.83603 7.0512 3.62969 7.0512 3.37517C7.0512 3.12065 7.25264 2.91431 7.50112 2.91431C7.74959 2.91431 7.95103 3.12065 7.95103 3.37517C7.95103 3.62969 7.74959 3.83603 7.50112 3.83603Z' fill='%23999999'/%3E%3C/svg%3E%0A");

    --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) */

}


a:link { color: var(--color-grayscale-darker); text-decoration: none; }
a:visited { color: var(--color-grayscale-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 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 .app_item_block { --height: 56px; --margin: 12px; margin: 16px; }
article .app_item_block .content_place { padding-top: 2px; }
article .app_item_block .content_place > *:not(:first-child) { margin-top: 8px; }
article .app_item_block .infos { display: flex; flex-flow: row wrap; align-items: baseline; }
article .app_item_block .infos > :not(:first-child) { margin-left: 1rem; }
article .app_item_block .infos > .app_title { font-size: 1.375rem; font-weight: 800; }
article .app_item_block .infos > .version { font-size: 1.125rem; font-weight: 600; }
article .app_item_block .links {}
article .app_item_block .links { display: flex; flex-flow: row wrap; align-items: center; font-size: 1rem; }
article .app_item_block .links > * { font-size: 1rem; }
article .app_item_block .links > *:not(:first-child) { margin-left: 1.5em; }
article .app_item_block .links > span { font-weight: 500; }
article .app_item_block .links > a { transition-timing-function: ease; transition-duration: 0.2s; }
article .app_item_block .links > a:hover { color: #000; }
article .app_item_block .links > a > *:not(:first-child) { margin-left: 1em; }
article .app_item_block .links > .title { font-weight: 500; vertical-align: top; }
article .app_item_block .detail_indic { position: relative; width: 24px; }
article .app_item_block .detail_indic::before { content: "⟩"; position: absolute; display: none; top: 0; bottom: 0; left: 0; right: 0; width: fit-content; height: fit-content; margin: auto; color: #555; font-size: 24px; font-weight: 300; scale: 100% 80%; }

article [data-pre-icon] { display: inline-flex; flex-flow: row wrap; align-items: center; }
article [data-pre-icon]::before { content: ''; display: inline-block; height: 1em; aspect-ratio: 3/4; margin-right: 0.1em; }
article [data-pre-icon="Android"]::before { background-image: var(--svg-android); background-size: contain; }
article [data-pre-icon="iOS"]::before { background-image: var(--svg-ios); background-size: contain; translate: 0 -0.06em; }


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; }


article .app_download_btn { flex-grow: 1; text-align: left; }

article .version_logs { padding: 16px; font-weight: 400; line-height: 1.5em; }
article .version_logs > span { }
article .version_logs > span.title { font-size: 1.125rem; font-weight: 600; line-height: 2em; }
article .version_logs > span.item { margin-top: 0.5em; }
article .version_logs > span.desc { font-weight: 300; }


/* 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; }