/* styles */

/* Current application customs */
html {

    --appbar-height: 40px;
    --root-menu-height: 52px;


    --basic-backdrop-blur-strength: 24px;

}

body {
    --common-bg-color: white;

}

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

    /* adaptive color (dark) */

}

header#fixedTop > section#appbar .pushMessagesIndicator > .icon[data-badge][data-badge=""]::after {  }
header#fixedTop > section#appbar .pushMessagesIndicator > .icon[data-badge]:not([data-badge=""])::after {  }
header#fixedTop > section#appbar .popupNoticesIndicator > .icon[data-badge][data-badge=""]::after { top: -1px; right: -2px; }
header#fixedTop > section#appbar .popupNoticesIndicator > .icon[data-badge]:not([data-badge=""])::after { top: -6px; }

@media all and (min-height: 480px) and (min-width: 740px) {
main#staticDoc > section#menu > div.container[data-container-id="root"] > article { max-width: 380px; }
}

footer#fixedBottom { box-sizing: content-box; border-top: solid 1px rgb(0 0 0 / 10%); }
footer#fixedBottom nav#rootbar > button:has(> .maskable_icon)[data-active="1"] > .maskable_icon::after { background-color: var(--color-mango-green-dark); }
footer#fixedBottom nav#rootbar > button:has(> .maskable_icon)[data-active="1"] > label { color: var(--color-mango-green-dark); }


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


/* 기존 앱 푸시 버튼 조정 */
div#push_bellview { z-index: 104 !important; top: 4px; bottom: unset !important; left: unset !important; right: 16px; padding: 14px !important; border: none !important; border-radius: 8px !important; background-color: transparent !important; transition-duration: 0.2s; }
div#push_bellview:active { background-color: #3332 !important; }


/* Data related styles */
ul.children_list {}
ul.children_list > li { }
ul.children_list > li:not(:first-child) > .child_profile { border-top: solid 1px var(--color-boundary-o5); }

.child_profile { margin: 16px 0; }
.child_profile .common_profile { margin-bottom: 8px; }
.child_profile img.photo[src]:not([src=""]) { width: 72px; height: fit-content; aspect-ratio: 1; border: solid 1px var(--color-boundary-o5); border-radius: 100%; background-color: var(--color-boundary-o5); }
.child_profile:not(:has(img.photo[src=""])) .child_info { padding: 0 8px; }
.child_profile .child_info .name { margin-bottom: 4px; }
.child_profile .school { --space: 0.2em; }
.child_profile .school .school_name { }
.child_profile .school .gc_block { padding-inline: 0.3em; background-color: var(--color-mango-fluorescent-green); line-height: 1.3em; }
.child_profile .school .grade { }
.child_profile .school .class_name { }
.child_profile .class_item { }
.child_profile .class_item .class_name { }

.registered_school_list { }
.registered_school_list > .school_record_by_year { }
.registered_school_list > .school_record_by_year > .school_list_yearly { }
.registered_school_list > .school_record_by_year > .school_list_yearly > .consecutive_school_group { }
.registered_school_list > .school_record_by_year > .school_list_yearly > .consecutive_school_group > .school_record_list { }
.registered_school_list > .school_record_by_year > .school_list_yearly > .consecutive_school_group > .school_record_list > li { }
.registered_school_list > .school_record_by_year > .school_list_yearly > .consecutive_school_group > .school_record_list > li > .school_record_item { min-height: 42px; }

.dailyMealPlan { border: solid 1px var(--color-boundary-lightly); border-radius: 12px; color: var(--color-text-lighten); font-size: 0.875rem; line-height: 1.5rem; }
.dailyMealPlan > .label { display: flex; flex-flow: row nowrap; margin-bottom: 12px; justify-content: center; align-items: center; font-size: 0.9375rem; line-height: 1.125rem; }
.dailyMealPlan > .label > span { }
.dailyMealPlan > .label > span.dateSet { color: var(--color-text-darker); font-weight: 500; }
.dailyMealPlan > .label > span.dateSet::after { content: '.'; }
.dailyMealPlan > .label > span.dateSet:not(:first-child):not(:last-child) { margin-left: 0.1em; }
.dailyMealPlan > .label > span.year { }
.dailyMealPlan > .label > span.month { }
.dailyMealPlan > .label > span.date { }
.dailyMealPlan > .label > span.day { }
.dailyMealPlan > .label > span.day::before { content: '\A0'; }
.dailyMealPlan > .label > span.mealtime { color: var(--color-text-lightness); }
.dailyMealPlan > .label > span.mealtime::before { content: '\A0\A0'; }
.dailyMealPlan > .label > div { }
.dailyMealPlan > .label > div.todayIndicator { display: inline-block; margin-left: var(--basic-ui-inset-h-half); vertical-align: text-top; }
.dailyMealPlan > .label > div.todayIndicator > .text_capsule { --height: 1.125rem; --border-color: var(--color-mango-green-dark); --radius: var(--height); --color: var(--color-mango-green-dark); --font-size: 0.625rem; }
.dailyMealPlan ul.mealList { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; row-gap: var(--basic-ui-inset-v-half); align-items: stretch; }
.dailyMealPlan ul.mealList > li { display: flex; flex-flow: column nowrap; min-height: 32px; border: solid 1px var(--color-boundary-o7); border-radius: 16px; justify-content: center; align-items: center; }
.dailyMealPlan ul.mealList > li > * { }
.dailyMealPlan ul.mealList > li > div.meal { display: flex; flex-flow: row nowrap; margin: var(--basic-ui-inset-v-half) 0; align-items: center; line-height: 1rem; text-align: center; }
.dailyMealPlan ul.mealList > li > div.meal > span { }
.dailyMealPlan ul.mealList > li > div.meal > span.foodName { }
.dailyMealPlan ul.mealList > li[data-allergy]:not([data-allergy=""]) > div.meal > span.foodName { margin-right: 0.25rem; color: var(--color-mango-red-dark); }
.dailyMealPlan ul.mealList > li > div.meal > span.allergy { font-size: 0.5rem; }
.dailyMealPlan ul.mealList > li > ul.allergy { display: flex; flex-flow: row wrap; list-style: none; margin: 0; margin-bottom: var(--basic-ui-inset-v-half); padding: 0; column-gap: var(--basic-ui-inset-h); justify-content: center; align-items: center; font-weight: 200; }
.dailyMealPlan:not([data-show-allergy="1"]) > ul.mealList > li > ul.allergy { display: none; }
.dailyMealPlan ul.mealList > li > ul.allergy > li { display: flex; flex-flow: row nowrap; align-items: center; }
.dailyMealPlan ul.mealList > li > ul.allergy > li > span { }
.dailyMealPlan ul.mealList > li > ul.allergy > li > span.category { }
.dailyMealPlan ul.mealList > li > ul.allergy > li[data-children]:not([data-children=""]) > span.category { margin-right: 0.25rem; color: rgb(var(--cmrd) / 75%); }
.dailyMealPlan ul.mealList > li > ul.allergy > li > span.child { font-size: 0.5rem; }
.dailyMealPlan ul.plain_info_list { display: flex; flex-flow: column nowrap; list-style: none; width: max-content; max-width: -webkit-fill-available; margin: 0; padding: 0; align-items: stretch; }
.dailyMealPlan ul.plain_info_list > li { display: flex; flex-flow: row nowrap; column-gap: var(--basic-ui-inset-h); justify-content: space-between; }
.dailyMealPlan ul.plain_info_list > li > span { }
.dailyMealPlan ul.plain_info_list > li > span:first-child { flex-shrink: 0; }
.dailyMealPlan ul.plain_info_list > li > span:last-child { flex-shrink: 1; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }
.dailyMealPlan .calNutrition { display: flex; flex-flow: column nowrap; min-height: 32px; margin-top: var(--basic-ui-inset-v-half); border-radius: 16px; justify-content: center; align-items: center; border: solid 1px var(--color-indicator-bold); }
.dailyMealPlan .calNutrition > span { }
.dailyMealPlan .calNutrition > span.totalCalories { line-height: 2rem; }
.dailyMealPlan .calNutrition > span.totalCalories > span.kcal { font-weight: 600; }
.dailyMealPlan .calNutrition > ul.nutritionInfo { margin-bottom: var(--basic-ui-inset-v-half); font-weight: 300; }
.dailyMealPlan:not([data-show-nutrition="1"]) .calNutrition > ul.nutritionInfo { display: none; }
.dailyMealPlan .countryOfOrigin { display: flex; flex-flow: column nowrap; margin-top: var(--basic-ui-inset-v-half); padding: 8px 16px; border: solid 1px var(--color-mango-green-vivid-dark); border-radius: 16px; justify-content: center; align-items: center; }
.dailyMealPlan:not([data-show-country-of="1"]) .countryOfOrigin { display: none; }

ul.class_bill_list { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; }
ul.class_bill_list > li { margin: 12px 0; padding: 16px 0; border: solid 1px var(--color-boundary-lightish); border-left-style: none; border-right-style: none; color: var(--color-text-darker); font-size: 1rem; line-height: 1.1875rem; }
ul.class_bill_list > li .amount_set { }
ul.class_bill_list > li .amount_set > * { display: inline-block; }
ul.class_bill_list > li .amount_set > .amount { }
ul.class_bill_list > li .amount_set > .unit { margin-left: 0.1em; }
ul.class_bill_list > li > * { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
ul.class_bill_list > li > .title_line { }
ul.class_bill_list > li > .title_line > .class_name { font-weight: 600; }
ul.class_bill_list > li > .title_line > .student_name { font-weight: 400; }
ul.class_bill_list > li > .main_line { }
ul.class_bill_list > li > .main_line > * { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
ul.class_bill_list > li > .main_line > .bill_info { font-weight: 500; }
ul.class_bill_list > li > .main_line > .bill_info > *:not(:first-child) { margin-left: 0.5em; }
ul.class_bill_list > li > .main_line > .bill_info > .tag { --height: 1.25rem; --bg-color: var(--color-mango-green-dark); --color: var(--color-text-inverse); --font-size: 0.75rem; padding-inline: 0.5rem; font-weight: 400; }
ul.class_bill_list > li > .main_line > .bill_amount { }
ul.class_bill_list > li > .main_line > .bill_amount > .amount { font-weight: 600; }
ul.class_bill_list > li > .main_line > .bill_amount > .suffix { font-weight: 400; }
ul.class_bill_list > li > .sub_line { height: 4.75rem; min-height: fit-content; margin-top: 16px; }
ul.class_bill_list > li > .sub_line > * { display: inline-flex; flex-flow: column nowrap; height: -webkit-fill-available; justify-content: flex-end; }
ul.class_bill_list > li > .sub_line > .details_block { justify-content: space-between; color: var(--color-text-pale); font-size: 0.875rem; font-weight: 400; line-height: 1.375rem; }
ul.class_bill_list > li > .sub_line > .details_block > * { }
ul.class_bill_list > li > .sub_line > .details_block .justified { display: flex; flex-flow: row nowrap; width: -webkit-fill-available; justify-content: space-between; }
ul.class_bill_list > li > .sub_line > .details_block .justified > .title { }
ul.class_bill_list > li > .sub_line > .details_block .justified > .amount_set { }
ul.class_bill_list > li > .sub_line > .details_block > .amount_details { }
ul.class_bill_list > li > .sub_line > .details_block > .amount_details > .paid { }
ul.class_bill_list > li > .sub_line > .details_block > .amount_details > .unpaid { }
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued { margin-top: 12px; font-size: 0.8125rem; line-height: 1rem; }
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued > span { display: inline-block; }
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued > span.day { margin-left: 0.1em; }
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued > span.divider {  }
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued > span.divider::before,
ul.class_bill_list > li > .sub_line > .details_block > .bill_issued > span.divider::after { content: '\A0'; }
ul.class_bill_list > li > .sub_line > .buttons_block { }
ul.class_bill_list > li > .sub_line > .buttons_block > :not(:first-child) { margin-top: 4px; }
ul.class_bill_list > li > .sub_line > .buttons_block > button { width: -webkit-fill-available; height: 2.25em; min-width: 5.25em; border-style: none; border-radius: 10px; color: var(--color-text-inverse); font-size: 1rem; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; }
ul.class_bill_list > li > .sub_line > .buttons_block > button:focus { }
ul.class_bill_list > li > .sub_line > .buttons_block > button:hover { }
ul.class_bill_list > li > .sub_line > .buttons_block > button:active { }
ul.class_bill_list > li > .sub_line > .buttons_block > button.receipt { background-color: var(--color-mango-green-vivid); }
ul.class_bill_list > li > .sub_line > .buttons_block > button.payment { background-color: var(--color-mango-blue-vivid); /*var(--color-mango-yellow-vivid)*/ }
ul.class_bill_list > li > .sub_line > .buttons_block > button:disabled { background-color: var(--color-boundary-lighter); }
ul.class_bill_list > li > hr { margin: 16px 0; }
ul.class_bill_list > li.empty_placeholder { text-align: center; }




/* older */
/* span.name { font-size: 1.25rem; } */
span.school_name {}
span.school_subject {}
span.shcool_grade {}
span.school_class {}

div.profile_photo { width: 80px; min-width: 64px; max-width: 33.333%; max-height: 128px; aspect-ratio: 1; border-radius: 100%; background-image: url('../images/profile_placeholder.png'); background-size: cover; background-position: center; align-content: center; }

input.nickname {}
input.simple_note {}
button.assign_relationship:empty::before { content: attr(placeholder); color: var(--color-grayscale-dark); }
button.time_table {}
button.meal_planner {}
button.academic_calendar {}

ul.time_table_daily {  }
ul.time_table_daily > li { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 4px 0; justify-content: center; }
ul.time_table_weekly {  }
ul.time_table_weekly > li { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 4px 0; justify-content: center; }
ul.time_table_monthly {  }
ul.time_table_monthly > li { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 4px 0; justify-content: center; }

.linear_time_table { }
.linear_time_table > ul { }
.linear_time_table > ul > li { }
.linear_time_table > ul > li.with_details { cursor: pointer; transition-duration: 0.3s; }
.linear_time_table > ul > li.with_details:hover { background-color: #3332; }
.linear_time_table > ul > li.with_details:active { background-color: #CCC3; }
.linear_time_table > ul > li.with_details span { }
.linear_time_table > ul > li.with_details span.indic_details { }
.linear_time_table > ul > li.with_details span.indic_details::after { content: '🔍'; position: relative; height: 0; min-width: fit-content; margin-bottom: 22px; font-size: 1rem; font-family: var(--font-for-emoji) !important; font-variant-emoji: emoji; line-height: 1.25rem; overflow: visible; transition-duration: 0.3s; }
.linear_time_table > ul > li.with_details:hover span.indic_details::after { scale: 1.2; }
.linear_time_table > ul > li.with_details:active span.indic_details::after { scale: 2.0; filter: blur(2px); }
.linear_time_table > ul > li span.day::before { margin-inline: -6px -1px; font-size: 1.125rem; line-height: 1rem; translate: 0; }



section#school { }

section#student { }

section#class { }


article.simple_view { --margin: 0px !important; box-sizing: border-box; border-radius: 0 !important; }
article.simple_view:not(.no_pad) { padding: 0 8px; }
article.simple_view:not(.no_pad) > * { padding: 16px 8px; }
article.simple_view:not(.no_pad) > hr { margin: 0 8px; padding: 0; }
article.simple_view:not(.no_pad) .linear_block { }
article.simple_view:not(.no_pad) .linear_block > ul { }
article.simple_view:not(.no_pad) .linear_block > ul > li {  }
article.simple_view:not(.no_pad) .round_box { margin: 4px; padding: 16px; border: solid 1px rgb(var(--cbl) / 20%); border-radius: 4px; }

article.home span.students { color: var(--color-point); }

article:is(.school, .class) { }
article:is(.school, .class) .head_line { }
article:is(.school, .class) .head_line label { font-size: 1.4rem; }
article:is(.school, .class) .head_line span { font-size: 1.4rem; }
article:is(.school, .class) .half_pad { padding: 8px; }
article:is(.school, .class) .real_time_news { }
article:is(.school, .class) .real_time_news label { padding-inline: 16px; font-size: 0.875rem; }
article:is(.school, .class) .real_time_news ul.news { }
article:is(.school, .class) .real_time_news ul.news li { border-bottom: none; }
article:is(.school, .class) .real_time_news ul.news li span { font-size: 0.875rem; }
article:is(.school, .class) .real_time_news button.more { width: 100%; padding: 16px 8px 0; }
article:is(.school, .class) .real_time_news button.more span { font-size: 0.875rem; }




article.school {}
article.school.scalable {}
article.school > section.summary { }
article.school > section.summary > .basic { justify-content: space-around; }
article.school:not([data-look-scale="0"]) > section.summary > .basic { justify-content: center; }
article.school > section.summary > .basic > span { }
article.school > section.summary > .basic > span.name { font-size: 1.375rem; font-weight: bold; }
article.school > section.summary > .basic > span.name::before { translate: 0 0; }
article.school > section.sclass { }
article.school > section.sclass > .basic { justify-content: space-evenly; }
article.school > section.sclass > .basic > .label { }
article.school > section.sclass > .basic > .label > div { }
article.school > section.sclass > .basic > .label > div > span { }
article.school > section.sclass > .basic > .label > div > span.student_name { font-size: 1rem; }
article.school > section.sclass > .basic > .label > div > span.student_name::after { }

article.person { }
article.person.scalable > div.toggle.cheek { width: 16px; }
article.person.scalable > div.toggle.cheek.right { width: 28px; }
article.person > section.summary { }
article.person > section.summary > .basic { justify-content: center; }
article.person > section.summary > .basic .line_block { border-bottom: none; }
article.person > section.summary > .basic > .profile_photo {  }
article.person > section.summary > .basic > .info { flex-grow: 1; max-width: min(1280px, 72%); padding-left: 4px; }
article.person > section.summary > .basic > .info > div > * { flex-shrink: 0; }
article.person > section.summary > .basic > .info span.name { margin: 0 2px; font-weight: bold; }
article.person > section.summary > .basic > .info .input_wrap.nickname { margin-right: 2px; flex-shrink: 1; }
article.person > section.summary > .basic > .info .input_wrap.nickname > input.nickname { padding-inline: 0; text-align: center; }
article.person > section.summary > .basic > .info > .notation { width: -webkit-fill-available; }
article.person > section.summary > .basic > .info > .notation > .input_wrap.simple_note { max-width: -webkit-fill-available; }
article.person > section.summary > .basic > .info > .notation > .input_wrap.simple_note > input.simple_note { color: var(--color-emphasis-dark); text-align: right; }
article.person > section.tracks { }
article.person > section.tracks > .movement_history { }
article.person > section.tracks > .movement_history > ul.move_list { }
article.person > section.tracks > .movement_history > ul.move_list > li { justify-content: center; }
article.person > section.tracks > .movement_history > ul.move_list > li > span { text-align: center; }
article.person > section.tracks > .movement_history > ul.move_list > li > span.just { width: max(85px, 30%); margin-left: min(37px, 15%); font-family: 'NanumSquareRound'; }
article.person > section.tracks > .movement_history > ul.move_list > li > span.moves { width: max(180px, 50%); }
article.person[data-registered="0"] { height: fit-content !important; }
article.person:not([data-registered="1"]) > section.summary > .placeholder.register_person { display: block; }
article.person[data-registered="0"] > section.summary { margin-top: 12px; padding-top: 0; }
article.person[data-registered="0"] > section.summary > *:not(.placeholder.register_person) { display: none; }
article.person[data-registered="0"] > section.summary > .toggle { display: none !important; }
article.person[data-registered="0"] > .toggle { display: none !important; }

section.school { }
section.school > .basic > .info { }
section.school > .basic > .info > span { margin-top: 4px; margin-bottom: 3px; }
section.school[data-registered="0"] > .basic > .placeholder.register_school { display: block; }
section.school[data-registered="0"] > .basic > *:not(.placeholder.register_school) { display: none; }
section.school[data-registered="1"] > .basic > .placeholder.enter_class { display: block; }
section.school .school_now { margin-top: 8px; margin-bottom: 8px; }
section.school .school_now > .titled_tab_block { }
section.school .school_now > .titled_tab_block > ul.tab_set { }
section.school .school_now > .titled_tab_block > ul.tab_set > li { }
section.school .school_now > .titled_tab_block > ul.tab_set > li > span { font-size: 0.945rem; }
section.school .time_table_days { }
section.school .time_table_days ul.time_table_daily {  }
section.school .time_table_days ul.time_table_daily > li { }
section.school .time_table_days ul.time_table_daily > li > span { }
section.school .time_table_days ul.time_table_daily > li > span.sequence { width: max(64px, 30%); margin-left: min(32px, 15%); }
section.school .time_table_days ul.time_table_daily > li > span.subject { width: max(96px, 50%); }
section.school .meal_planner_days { }
section.school .meal_planner_days ul.time_table_weekly { }
section.school .meal_planner_days ul.time_table_weekly > li { border-radius: 7%; justify-content: space-evenly; }
section.school .meal_planner_days ul.time_table_weekly > li span { }
section.school .meal_planner_days ul.time_table_weekly > li > span { margin: 0 4px; align-content: center; }
section.school .meal_planner_days ul.time_table_weekly > li > span.meal_time { width: max(50px, 20%); margin-left: max(0px, calc(30% - 96px)); }
section.school .meal_planner_days ul.time_table_weekly > li > span.meal_time > span.day { }
section.school .meal_planner_days ul.time_table_weekly > li > span.content { width: max(150px, 60%); font-weight: lighter; }
section.school .meal_planner_days[data-slide="1"]  ul.time_table_weekly > li > span.content { min-width: max-content; }
section.school .meal_planner_days ul.time_table_weekly > li > span.content_with_allergy { display: none; width: max(300px, 100%); font-weight: lighter; }
section.school .meal_planner_days ul.time_table_weekly > li > span.origins { display: none; width: max(72px, 25%); }
section.school .meal_planner_days ul.time_table_weekly > li > span.nutritive { display: none; width: max(72px, 25%); }
section.school .academic_calendar_days { }
section.school .academic_calendar_days ul.time_table_monthly { }
section.school .academic_calendar_days ul.time_table_monthly > li { justify-content: space-evenly; }
section.school .academic_calendar_days ul.time_table_monthly > li > span { }
section.school .academic_calendar_days ul.time_table_monthly > li > span.date { width: max(45px, 18%); margin-left: min(50px, 15%); }
section.school .academic_calendar_days ul.time_table_monthly > li > span.day { width: max(45px, 18%); }
section.school .academic_calendar_days ul.time_table_monthly > li > span.subject { width: max(110px, 44%); font-weight: lighter; }

section.class {  }
section.class > .basic {  }
section.class > .basic > .class_initial {  }
section.class > .basic > .class_initial > span { margin: 2px 10px; }
section.class > .basic > .class_initial span.unit { font-size: 0.875rem; }
section.class > .detailed { }
section.class > .detailed .line_block span::before { padding: 0 6px; }
section.class > .detailed > .student_registered { }
section.class > .detailed > .student_registered > .student_info { }
section.class > .detailed > .student_registered > .student_info > * {  }
section.class > .detailed > .student_registered > .student_info > span {  }
section.class > .detailed > .student_registered > .student_info > span.student_name { font-size: 1.25rem; }
section.class > .detailed > .student_registered > .student_info > div.button_wrap { margin-bottom: 12px; }
section.class > .detailed > .classes_registered { }
section.class > .detailed > .classes_registered > ul.classes_detail { align-items: center; }
section.class > .detailed > .classes_registered > ul.classes_detail > li.registered_detail { }
section.class > .detailed > .classes_registered > ul.classes_detail > li.registered_detail > .line_block { }
section.class > .detailed > .classes_registered > ul.classes_detail > li.registered_detail > .line_block > span { margin: 2px 4px; }
section.class > .detailed > .classes_registered > ul.classes_detail { align-items: center; }
section.class > .detailed > .payment_details > ul.detail_pay_items > li.pay_item { margin: 8px 0 3px; }
section.class > .detailed > .payment_details > ul.detail_pay_items > li.pay_item > span { margin: 0 4px; }
section.class > .detailed > .push_settings > ul.push_alerts { margin-top: 16px; }
section.class > .detailed > .push_settings > ul.push_alerts > li.line_block { padding: 5px 0 11px; border-radius: 12%; }
section.class > .detailed > .push_settings > ul.push_alerts > li.line_block > span.alert_subject { margin: 0 24px; }
section.class > .detailed > .push_settings > ul.push_alerts > li.line_block button.toggle_switch { min-width: 86px; }
section.class > .detailed > .push_settings > ul.push_alerts > li.line_block button.toggle_switch::before { padding: 0; font-size: 1.125rem; translate: -2px 0; transition-duration: 0.2s; }
section.class > .detailed > .push_settings > ul.push_alerts > li.line_block button.toggle_switch:not([data-on="1"])::before { filter: grayscale(1) brightness(1.1); }
section.class > .commmercial { }
section.class > .commmercial > .basic { }
section.class > .commmercial > .basic .class_logo { margin: 12px 4px 16px; }
section.class > .commmercial > .basic .class_logo > .img_wrap { --max-height: 160; position: relative; left: 0; right: 0; width: fit-content; height: fit-content; max-width: 100%; max-height: 100px; max-height: calc(var(--max-height) * 1px); margin: 0 auto; border-radius: 16px; background-image: var(--src); background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden; }
section.class > .commmercial > .basic .class_logo > .img_wrap > img { --width: 1080; --height: 192; --limited: min(var(--max-height), var(--height)); --limited-rate: calc(var(--limited) / var(--height)); width: calc(var(--width)* var(--limited-rate)* 1px); max-width: 100%; opacity: 0; }
section.class > .commmercial > .commercial_details { }
section.class > .commmercial > .commercial_details .line_block span::before { padding: 0 6px; }
section.class > .commmercial > .commercial_details .line_block > span { margin: 4px 10px; }
section.class > .user_rating > .review_summary { }
section.class > .user_rating > .review_summary > .review_rating { margin: 6px 4px 16px; }
section.class > .user_rating > .review_summary > .review_rating > .rating_point { margin: 0 64px; font-family: 'SpoqaHanSansNeo'; font-size: 54px; font-weight: bold; line-height: 72px; }
section.class > .user_rating > .review_summary > .review_rating > .rating_stars { min-width: 220px; max-width: 100%; aspect-ratio: 4; margin: 0; overflow: hidden; }
section.class > .user_rating > .review_summary > .review_rating > .rating_stars > .lottie_wrap { width: fit-content; height: fit-content; margin: -154px -70px; }
section.class > .user_rating > .review_summary > .review_rating > .rating_stars > .lottie_wrap > lottie-player { width: 360px; aspect-ratio: 1; }
section.class > .user_rating > .review_preview { }
section.class > .user_rating > .review_preview > ul.review_list { }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item { }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_info { }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_info > span { }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_info > span { font-size: 0.8133rem; }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_info > span.reviewed_rate { letter-spacing: -5px; }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_preview { }
section.class > .user_rating > .review_preview > ul.review_list > li.review_item > .review_preview > span { display: -webkit-box; font-size: 0.875rem; word-break: break-all; text-wrap: pretty; text-overflow: ellipsis; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
section.class > .user_rating > .review_preview > .see_more { text-align: right; }
section.class > .user_rating > .review_preview > .see_more > button.more_btn { margin: 3px 0 13px; padding: 2px 6px; border: none; background: transparent; }
section.class > .class_payment { }
section.class > .class_payment > .tab_content_blocks { }
section.class > .class_payment > .tab_content_blocks > div { }
section.class > .class_payment > .tab_content_blocks > div > ul { align-items: center; }
section.class > .class_payment > .tab_content_blocks > div > ul > li { align-items: baseline; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span { margin: 6px 10px 8px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span.pay_issued { min-width: 40px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span.pay_subject { min-width: 50px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span.pay_amount { min-width: 90px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span.pay_method { min-width: 100px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span.pay_state { min-width: 80px; }
section.class > .class_payment > .tab_content_blocks > div > ul > li > span::before { padding: 0 6px; }
section.class > .class_payment > .tab_content_blocks > .payment_history { }
section.class > .class_payment > .tab_content_blocks > .payment_history > ul.paid_list { }
section.class > .class_payment > .tab_content_blocks > .payment_history > ul.paid_list > li.paid_item { }
section.class > .class_payment > .tab_content_blocks > .payment_history > ul.paid_list > li.paid_item > span { }
section.class > .class_payment > .tab_content_blocks > .waiting_for_payment { }
section.class > .class_payment > .tab_content_blocks > .waiting_for_payment > ul.pay_list { margin-top: 8px; }
section.class > .class_payment > .tab_content_blocks > .waiting_for_payment > ul.pay_list > li.pay_item { }
section.class > .class_payment > .tab_content_blocks > .waiting_for_payment > ul.pay_list > li.pay_item > span { }

section.classes { }
section.classes > .basic .line_block span::before { padding: 0 6px; }
section.classes[data-registered="0"] > :not(.basic) { display: none; }
section.classes[data-registered="0"] > .basic > .placeholder.find_near_class { display: block; }
section.classes[data-registered="0"] > .basic > *:not(.placeholder.find_near_class) { display: none; }
section.classes[data-registered="1"] > .basic > .placeholder.connect_own_class { display: block; }
section.classes .linear_block > ul.list_classes > li.class_card {  }
section.classes .linear_block > ul.list_classes > li.class_card > section.class {  }
section.classes > .basic > .latest_event > span.event::after { margin-left: 2px; }


div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li { }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] { }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span { }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span:not(:first-child) { margin-inline-start: 0.25em; }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="sequence"] { letter-spacing: -0.1em; }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="sequence"]::after { content: '교시'; --h-scale-adjust: -14%; display: inline-block; font-size: 0.9375em; letter-spacing: -0.15em; scale: calc(100% + var(--h-scale-adjust)) 1; }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="subject"] { }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="classroom"] { display: inline-flex; --h-scale-adjust: -20%; margin-inline-end: var(--h-scale-adjust); font-size: 0.875em; transform-origin: left; scale: calc(100% + var(--h-scale-adjust)) 1; }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="classroom"]::before { content: '\003C'; }
div.variable_calendar > div.calendar_structure > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li[data-type="timeTable"] > span[data-id="classroom"]::after { content: '\003E'; }
div.variable_calendar[data-current-schedule-data-origin^="mealPlanner!allergyOnly"] > div.calendar_structure[data-structure-type="massive"] > .years > .year > .months > .month > .weeks > .week > .days > .day > ul.scheduled[data-group="data"] > li > span { white-space: normal; }

div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] { display: flex; flex-direction: row; flex-wrap: nowrap; margin-right: 8px; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] label { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] label > select { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] label > select:disabled { pointer-events: none; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label::after { bottom: 0.2em; right: calc(8px + -1em); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > span { font-size: 0.875rem; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > span.school { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > span.grade_on { font-size: 0.625rem; line-height: 0.8em; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > span.grade_on:empty { display: none; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > select { --outline-width: 2px; border: none; background: transparent; padding: 0.1em 0; font-size: 0.875rem; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > select:focus { outline: solid var(--outline-width) rgb(var(--cmd) / 70%); outline-offset: calc(var(--outline-width) * -1); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > select.grade { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > label > select.grade > option { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li { overflow: visible; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li > label { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li > label > span { display: inline-flex; flex-direction: row; flex-wrap: nowrap; height: 100%; justify-content: center; align-items: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] > label { display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] > label > span { font-size: 0.875rem; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"][data-subject="조식"] > label > span::before { content: '아침'; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"][data-subject="중식"] > label > span::before { content: '점심'; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"][data-subject="석식"] > label > span::before { content: '저녁'; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] > label > span::after { content: '\A0식단표'; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] > label > select { --outline-width: 2px; border: none; background: transparent; padding: 0.1em 0; font-size: 0.875rem; text-align: center; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="mealPlanner"] > label > select:focus { outline: solid var(--outline-width) rgb(var(--cmd) / 70%); outline-offset: calc(var(--outline-width) * -1); }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="timeTable"] { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="timeTable"] > label { }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="timeTable"] > label > span { --h-scale-adjust: -14%; margin-inline-end: var(--h-scale-adjust); scale: calc(100% + var(--h-scale-adjust)) 1; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"] > ul.data_selection > li[data-selection="timeTable"] > label > span::after { content: '\A0시간표'; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="1"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="1"]) { width: 0; margin: 0; overflow: hidden; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="2"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="2"]) { width: 0; margin: 0; overflow: hidden; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="3"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="3"]) { width: 0; margin: 0; overflow: hidden; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="4"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="4"]) { width: 0; margin: 0; overflow: hidden; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="5"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="5"]) { width: 0; margin: 0; overflow: hidden; }
div.variable_calendar > div.calendar_bar > div.schedule_filter_area > div.schedule_filter > ul.variable > li[data-id="school"][data-school-grade="6"] > ul.data_selection > li[data-selection="timeTable"]:not([data-grade="6"]) { width: 0; margin: 0; overflow: hidden; }



main#staticDoc > section#menu { user-select: none; }


/* extra preset */

.noti_list { --item-padding: var(--basic-ui-inset-h); }
.noti_list > button { padding: var(--basic-ui-inset-v) var(--item-padding); }
.noti_list > button > .noti_block { color: var(--color-text-pale); font-size: 0.875rem; line-height: 1.375rem; }
.noti_list > button > .noti_block > .noti_from { }
.noti_list > button > .noti_block > .noti_time { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; }
.noti_list > button > .noti_block > .noti_title { color: var(--color-text-lightness); }
.noti_list > button > .noti_block > .noti_by { }
.noti_list > button > .noti_block:not([data-read="1"]) > .noti_from { color: var(--color-text-darker); }
.noti_list > button > .noti_block:not([data-read="1"]) > .noti_time { }
.noti_list > button > .noti_block:not([data-read="1"]) > .noti_title { color: var(--color-text-lighten); }
.noti_list > button > .noti_block:not([data-read="1"]) > .noti_by { }
.noti_list > hr { margin: 0 var(--basic-ui-inset-h); background-color: var(--color-boundary-o5); }

.profile_image_block { position: relative; width: fit-content; height: fit-content; }
.profile_image_block :not(.mango_profile_image) { position: absolute; border-style: none; }
.profile_image_block .change_profile { --right: -8px; --bottom: 8px; --width: 28px; --bg-color: #777; bottom: var(--bottom); right: var(--right); width: var(--width); aspect-ratio: 1; border-radius: 100%; background-color: var(--bg-color); background-image: var(--svg-icon-photo); background-size: cover; background-position: center; background-repeat: no-repeat; }

.mango_profile_image { --width: 80px; --bg-color: var(--color-adaptive-bright); --src: var(--svg-profile-image-placeholder); width: var(--width); aspect-ratio: 1; border-radius: 100%; background-color: var(--bg-color); background-image: var(--src); background-size: cover; background-position: center; background-repeat: no-repeat; }

.mango_point_block { }
.mango_point_block > .mango_point_frame { position: relative; width: 300px; height: 138px; margin: auto; }
.mango_point_block > .mango_point_frame > * { position: absolute; }
.mango_point_block > .mango_point_frame > .mango_point { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.mango_point { --width: 116px; --height: 102px; width: var(--width); height: var(--height); --rotate-y: 0deg; position: relative; transform-style: flat; perspective: 500px; perspective-origin: center; }
.mango_point::before, .mango_point::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; backface-visibility: hidden; }
.mango_point::before { background-image: var(--svg-mango-point-base); background-size: contain; background-position: center; background-repeat: no-repeat; scale: -1 1; transform: rotateY(calc((180deg + var(--rotate-y)) * -1)); }
.mango_point::after { background-image: var(--svg-mango-point-type), var(--svg-mango-point-base); background-size: contain, contain; background-position: center, center; background-repeat: no-repeat, no-repeat; transform: rotateY(calc(0deg + var(--rotate-y))); }
.mango_point.rotate { --still: 10s; --tf: ease-out; --delay: 7s; --count: infinite; }
.mango_point.rotate::before, .mango_point.rotate::after { will-change: auto; }
.mango_point.rotate::before { animation: hRotateBacksideLtrM3I7 var(--still) var(--tf) var(--delay) var(--count) both; filter: brightness(0.95); }
.mango_point.rotate::after { animation: hRotateRtlM3I7 var(--still) var(--tf) var(--delay) var(--count) both; }
.mango_point.rotate.ltr::before { animation-name: hRotateBacksideRtlM3I7; }
.mango_point.rotate.ltr::after { animation-name: hRotateLtrM3I7; }

.mango_twinkler { --still: 3s; --delay: 0.2s; --multiplier: 2.0; --width: 48px; --height: 52px; --src: var(--svg-twinkler-mango-yellow); width: var(--width); height: var(--height); background-image: var(--src); background-size: contain; background-position: center; background-repeat: no-repeat; animation: twinkleDown calc(var(--still) + (var(--delay) * var(--multiplier))) ease-out var(--delay) infinite forwards; will-change: auto; }
.mango_twinkler.float { position: absolute; }
.mango_twinkler.yellow { --src: var(--svg-twinkler-mango-yellow); }
.mango_twinkler.olive { --src: var(--svg-twinkler-mango-olive); }
.mango_twinkler.green { --src: var(--svg-twinkler-mango-green); }
.mango_twinkler.red { --src: var(--svg-twinkler-mango-red); }

.mango_heart { --still: 2s; --delay: 0s; --multiplier: 1; --width: 48px; --height: 44px; --src: var(--svg-heart-life-red); width: var(--width); height: var(--height); background-image: var(--src); background-size: contain; background-position: center; background-repeat: no-repeat; animation: hRotateLtr calc(var(--still) + (var(--delay) * var(--multiplier))) ease var(--delay) infinite forwards; will-change: auto; }
.mango_heart.float { position: absolute; }

.mango_accordion_stramer { --still: 1s; --delay: 0s; --multiplier: 1; --width: 48px; --height: 44px; --src: var(--svg-accordion-stremer-olive); width: var(--width); height: var(--height); background-image: var(--src); background-size: contain; background-position: center; background-repeat: no-repeat; animation: dzRotateLtr calc(var(--still) + (var(--delay) * var(--multiplier))) linear var(--delay) infinite forwards; will-change: auto; }
.mango_accordion_stramer.float { position: absolute; }

.mango_child { --still: 2s; --delay: 0s; --multiplier: 1; --width: 72px; --height: 72px; --src: var(--svg-mango-child-yellow); width: var(--width); height: var(--height); background-image: var(--src); background-size: contain; background-position: center; background-repeat: no-repeat; }
.mango_child.float { position: absolute; }
.mango_child.simple_bouncy { animation: tfShakeUpDown calc((var(--still) + (var(--delay) * var(--multiplier))) / 4) ease var(--delay) infinite forwards; will-change: auto; }
.mango_child.apt_bouncy { animation: tfShakeUpDown calc((var(--still) + (var(--delay) * var(--multiplier))) / 4) ease var(--delay) infinite forwards, tiltDiagonalLRLL calc(var(--still) + (var(--delay) * var(--multiplier))) linear var(--delay) infinite forwards; will-change: auto; }
.mango_child.pedro_bouncy { animation: shakeUpDown calc((var(--still) + (var(--delay) * var(--multiplier))) / 4) ease var(--delay) infinite forwards, tiltDiagonalLRLL calc(var(--still) + (var(--delay) * var(--multiplier))) linear var(--delay) infinite forwards, rRotateReverseClock calc((var(--still) + (var(--delay) * var(--multiplier))) * 2.5) linear var(--delay) infinite forwards; will-change: auto; }
.mango_child.pedro_cycle { animation: shakeUpDown calc((var(--still) + (var(--delay) * var(--multiplier))) / 4) ease var(--delay) infinite forwards, rRotateReverseClock calc((var(--still) + (var(--delay) * var(--multiplier))) * 2.5) linear var(--delay) infinite forwards; will-change: auto; }
.mango_child.pedro_rolly { animation: tiltDiagonalLRLL calc(var(--still) + (var(--delay) * var(--multiplier))) linear var(--delay) infinite forwards, rRotateReverseClock calc((var(--still) + (var(--delay) * var(--multiplier))) * 2.5) linear var(--delay) infinite forwards; will-change: auto; }

.welcome_twinkler { position: relative; width: 260px; aspect-ratio: 1; margin: auto; overflow: visible; transform-style: flat; perspective: 500px; perspective-origin: center; }


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

button#kakao_login { --color: var(--color-adaptive-kakao-text); --bg-color: var(--color-adaptive-kakao-bg); }
button#kakao_login > .logo_icon { }
button#kakao_login > .logo_icon svg { }
button#kakao_login > .logo_icon svg path { --fill: var(--color-adaptive-kakao-logo); }
button#kakao_login > span { }

button#naver_login { --color: var(--color-adaptive-naver-text); --bg-color: var(--color-adaptive-naver-bg); }
button#naver_login > .logo_icon { }
button#naver_login > .logo_icon svg { }
button#naver_login > .logo_icon svg path { --fill: var(--color-adaptive-naver-logo); }
button#naver_login > span { }