## { --top-block-height: 40px; --top-fixed-height: calc(var(--top-block-height) + 1px + var(--basic-ui-inset-v-half)); } ##:has(> .topBlock[data-search="1"]) { --top-block-height: 100px; } ## > nav.instant_appbar { z-index: 2; } ## > .topBlock { position: fixed; display: flex; flex-flow: column nowrap; z-index: 1; top: 0; left: 0; right: 0; max-width: var(--screen-limit-width); margin: auto; padding-top: var(--top-safe-pad); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); } ## > .topBlock > .month_selector_bar { } ## > .topBlock > .month_selector_bar button.selector { padding-right: var(--basic-ui-inset-h-half); } ## > .topBlock > .month_selector_bar button.search { aspect-ratio: 1; padding: 0; } ## > .topBlock > .month_selector_bar button.search::before { content: ''; height: 100%; max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch; aspect-ratio: 1; margin: auto; background-image: var(--svg-icon-search); background-position: center; background-repeat: no-repeat; } ## > .topBlock > .month_selector_bar button.search::after { margin-left: 0; } ## > .topBlock > .search_bar { --height: 44px; position: relative; display: flex; flex-flow: row nowrap; width: -moz-available; width: -webkit-fill-available; width: stretch; height: var(--height); justify-content: stretch; align-items: stretch; } ## > .topBlock:not([data-search="1"]) > .search_bar { display: none; } ## > .topBlock > .search_bar > input.search_input { flex-grow: 1; padding-left: 52px; padding-right: 24px; border: solid 1px var(--color-boundary-o20); border-radius: var(--height); background-color: transparent; } ## > .topBlock > .search_bar > label.search_icon { position: absolute; top: 0; bottom: 0; left: 24px; height: 20px; aspect-ratio: 1; margin: auto 0; background-image: var(--svg-icon-search); background-position: center; background-repeat: no-repeat; } ## > .topBlock > .search_bar > button.search_clear { position: absolute; top: 0; bottom: 0; right: 1px; height: var(--height); aspect-ratio: 1; margin: auto 0; border-radius: 100%; background-image: var(--svg-small-icon-clear); background-position: center; background-repeat: no-repeat; } ## > .topBlock > hr { background-color: var(--color-boundary-o10);} ## > ul.notiMessages { display: flex; flex-flow: column nowrap; margin-top: var(--top-fixed-height); align-items: stretch; } ## > ul.notiMessages > li > button { padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); } ## > ul.notiMessages > li > button[data-flow-action=""]:after { display: none; } ## > ul.notiMessages > li > button > .noti_block { color: var(--color-text-pale); font-size: 0.875rem; line-height: 1.375rem; } ## > ul.notiMessages > li > button > .noti_block > .noti_id_line { } ## > ul.notiMessages > li > button > .noti_block > .noti_id_line > .noti_from { color: var(--color-text); } ## > ul.notiMessages > li > button > .noti_block > .noti_id_line > .noti_title { color: var(--color-text-lightest); font-size: 0.8125rem; } ## > ul.notiMessages > li > button > .noti_block > .noti_time { margin-bottom: 8px; color: var(--color-text-dark); font-size: 0.75rem; line-height: 1.25rem; } ## > ul.notiMessages > li > button > .noti_block > .noti_subject { color: var(--color-text); font-size: 0.9375rem; font-weight: 500; line-height: 1.4375rem; } ## > ul.notiMessages > li > button > .noti_block > .noti_by { } ## > ul.notiMessages > li > button > .noti_block > .noti_content { margin-top: 4px; color: var(--color-text-lighten); white-space: pre-line; } ## > ul.notiMessages > li > button > .noti_block > .noti_image { width: -moz-available; width: -webkit-fill-available; width: stretch; } ## > ul.notiMessages > li > button > .noti_block > .noti_image > img { width: 100%; } ## > ul.notiMessages > li > button > .noti_block > .noti_image:has(> img[src=""]) { display: none; } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_id_line { } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_id_line > .noti_from { color: var(--color-text-darker); } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_id_line > .noti_title { color: var(--color-text-pale); } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_time { } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_subject { color: var(--color-text-darker); } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_by { } ## > ul.notiMessages > li > button > .noti_block:not([data-read="1"]) > .noti_content { color: var(--color-text); } ## > ul.notiMessages > hr { margin-top: var(--basic-ui-inset-v-quarter); margin-bottom: var(--basic-ui-inset-v-half); margin-inline: var(--basic-ui-inset-h); background-color: var(--color-boundary-o10);}
.isIdLatest { position: relative; height: 1px; } .isIdLatest > div { height: 16px; } .post_cloud { position: relative; margin-bottom: 10px; padding: 4px 8px; border-radius: 24px; background: rgb(212 212 212 / 80%); font-size: 0.75rem; line-height: 1.25rem; text-align: center; text-shadow: 1px 1px 0 rgb(255 255 255 / 60%); } .post_cloud::after { content: '▼'; position: absolute; display: inline-block; bottom: -14px; left: 0; right: 0; width: fit-content; margin: auto; color: rgb(212 212 212 / 80%); font-size: 12px; text-align: center; } ## > .noticeBlock { display: flex; flex-flow: column nowrap; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; flex-grow: 1; margin-bottom: 64px; justify-content: center; align-items: stretch; } ## > .noticeBlock > .noticeCard { display: flex; flex-flow: column nowrap; margin: 0 24px; border: solid 1px var(--color-boundary-o15); border-top: solid 3px var(--color-mango-green-dark); border-radius: 8px; padding: var(--basic-ui-inset-v-half) var(--basic-ui-inset-h); row-gap: 6px; font-size: 0.875rem; text-align: center; box-shadow: 1px 2px 12px 0 var(--color-boundary-o20); cursor: pointer; user-select: none; } ## > .noticeBlock > .noticeCard > h3 { font-weight: 600; } ## > .noticeBlock > .noticeCard > span { line-height: 1.5em; }
우리아이 교육생활 도우미
학생·학부모 & 교육기관의 편리한 소통공간 ㈜엠피솔루션스 망고클래스
는 쓸 수 없어요
11자리
본인인증 전 새로 가입 가능한 휴대폰번호인지 먼저 확인하세요.
(사전 확인용이며 본인인증 시 본인인증한 번호로 갱신됩니다.)
* 학원 수납 및 출결 알림 수신 연동은 학원에 등록한 휴대폰번호와 본인인증한 휴대폰번호가 일치해야 합니다.
본인인증 완료시 이름 및 휴대폰번호가 자동 입력됩니다.
새로 가입하시려면 사용할 휴대폰번호로 진행하세요.
## .questionCircle { display: inline-flex; height: 1em; aspect-ratio: 1; justify-content: center; align-items: center; margin-inline: var(--basic-ui-inset-h-quarter); border-radius: 100%; background-color: var(--color-mango-red-dark); text-align: center; vertical-align: middle; } ## .questionCircle::before { content: '?'; color: var(--common-bg-color); font-size: 0.75em; font-weight: 700; } ## > .onExistAccount > ul.idList { margin-bottom: var(--basic-ui-inset-v); } ## > .onExistAccount > ul.idList > li { margin-inline: var(--basic-ui-inset-h); } ## > .onExistAccount > ul.idList > li > label { } ## > .onExistAccount > ul.idList > li > label > div { } ## > .onExistAccount > ul.idList > li > label > div > span { } ## > .onExistAccount > ul.idList > li > label > div > span.externalId { margin-bottom: 4px; font-size: 0.875rem; font-weight: 400; line-height: 1.2em; } ## > .onExistAccount > ul.idList > li > label > div > span.externalId::before { margin-right: 4px; padding: 2px 4px; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-align: center; line-height: 1rem; } ## > .onExistAccount > ul.idList > li > label > div > span.naverId:empty { display: none; } ## > .onExistAccount > ul.idList > li > label > div > span.naverId:not(:empty)::before { content: '네이버 ID '; background-color: var(--color-adaptive-naver-bg); color: var(--color-adaptive-naver-text); } ## > .onExistAccount > ul.idList > li > label > div > span.kakaoId:empty { display: none; } ## > .onExistAccount > ul.idList > li > label > div > span.kakaoId:not(:empty)::before { content: '카카오 ID '; background-color: var(--color-adaptive-kakao-bg); color: var(--color-adaptive-kakao-text); } ## > .onExistAccount > ul.idList > li > label > div > span.isRequiredPV { color: var(--color-mango-red-dark); font-size: 0.875rem; font-weight: 500; line-height: 1.2rem; } ## > .onExistAccount > li.forSignup { list-style: none; } ## > .onExistAccount > li.forSignup .phoneIsNotAvailable { color: var(--color-mango-red-dark); font-size: 0.875rem; font-weight: 500; line-height: 1.2rem; } ## > .onNotExistAccount > div > span.onPhoneNotAvailable { color: var(--color-mango-red-dark); } ## > #uc_set { } ## > #uc_set[data-exist-ids="1"] > span { margin-inline: var(--basic-ui-inset); } ## > #uc_set[data-exist-ids="1"] > div { margin-inline: var(--basic-ui-inset); }

계정 조회 중

본인인증 정보와 일치하는 계정을 조회하는 중입니다
우리아이 교육생활 도우미
회원가입 완료!
는 쓸 수 없어요

기존 망고에듀 학생·학부모용 이용자 전용

아이디/비밀번호 찾기 문자가 정상 발송되었다고 표시되지만 문자가 수신되지 않는 경우 스팸처리되고 있을 수 있으니 망고에듀 고객센터로 연락하시기 바랍니다. 고객센터:070-4652-7020
## > div > ul.idList { margin-bottom: var(--basic-ui-inset-v); } ## > div > ul.idList > li { margin-inline: var(--basic-ui-inset-h); }

계정 조회 중

본인인증 정보와 일치하는 계정을 조회하는 중입니다

새 비밀번호 입력

변경할 새 비밀번호를 입력해 주세요
는 쓸 수 없어요
영문
숫자
특수문자
포함
8자리 이상
사용가능한 특수문자 ! @ # $ % * ? \ - _
비밀번호의 길이가 달라요
오타를 확인하세요

비밀번호 설정이 완료되었습니다

새 비밀번호로 로그인 하시면 됩니다
ID: id
## { display: flex; flex-flow: column nowrap; align-items: stretch; } ## > .viewBound { position: relative; }
## > div > hr { background-color: var(--color-boundary-o5); } ## > div div.block_box > .mango_round_box_rex { margin: var(--basic-ui-inset-v-half) 0 0; padding: 0 var(--basic-ui-inset-h); font-size: 0.875rem; } ## .revision_summary { margin: var(--basic-ui-inset-v-half) 0 0; padding-left: 1.25em; font-size: 0.875rem; line-height: 1.5em; } ## .revision_summary > li { margin-bottom: 0.35em; word-break: keep-all; } ## .revision_documents { margin-top: var(--basic-ui-inset-v); padding: 0 !important; overflow: hidden; } ## .revision_documents > button.show_doc { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 var(--basic-ui-inset-h); border: none; font-size: 0.9375rem; text-align: left; cursor: pointer; } ## .revision_documents > button.show_doc + button.show_doc { border-top: solid 1px var(--color-boundary-o5); } ## .revision_documents > button.show_doc > .content { flex: 1 1 auto; word-break: keep-all; } ## .revision_documents > button.show_doc > .chevron { flex: 0 0 auto; opacity: 0.45; font-size: 1.25rem; line-height: 1em; } ## > div.bottom_block { padding-bottom: var(--basic-ui-inset-v-half); } ## > div.bottom_block > .line_block { border-bottom: none; } ## > div.bottom_block > .line_block > button.mango_rex { flex: 1 1 0; min-width: 0; font-size: 1rem; }

이용약관 및 개인정보 처리방침 개정 안내

회원 여러분의 개인정보를 보다 안전하게 보호하고, 회사와 회원 사이의 권리·의무 관계를 명확히 하기 위하여 이용약관, 개인정보 처리방침 및 위치기반서비스 이용약관을 개정하였습니다.

시행일: -

  • 회사 표기를 법인명(주식회사 엠피솔루션스)으로 정정
  • 무료 서비스에 대한 포괄 면책을 제한 — 회사의 고의·중대한 과실에는 책임을 집니다(회원에게 유리한 변경)
  • 개인정보 국외 이전·보유기간·파기 절차·유출 통지 등 법정 기재사항 신설
  • 만 14세 미만 아동의 법정대리인 동의 절차 명시
  • 위치기반서비스 약관 정비 — 제공 내용을 「주변 학원·학교 검색」으로 구체화하고, 위치정보는 서비스 개시를 공지한 날부터 수집함을 명시
## > div > hr { background-color: var(--color-boundary-o5); } ## > div div.block_box > hr { margin-top: var(--basic-ui-inset-v) !important; } ## > div div.block_box > .mango_round_box_rex { margin: var(--basic-ui-inset-v-half) 0 0; padding: 0 var(--basic-ui-inset-h); font-size: 0.875rem; }

망고클래스 시작하기

앱 알림 설정

앱을 통해 받을 알림 그룹을 설정합니다.
망고클래스 가입자의 전화번호를 기반으로 학교 및 학원과의 자동 연결 기능과 이를 통한 알림 서비스가 포함됩니다.

사용자 본인인증

망고클래스로의 서비스 전환을 위해 본인 확인이 필요합니다.
반드시 학원과 자동 연결하실 휴대폰번호로 본인인증을 받아주시고,
본인인증을 완료하신 후 아래 획인 버튼을 눌러주세요.

* 휴대폰번호는 추후 메뉴 - 내 정보 화면에서 변경 가능합니다.

※ 본인인증 처리 기준 완화 안내

본인인증 시 본인인증 정보 불일치로 앱 이용이 불가하신 경우, 기존 등록된 휴대폰번호와 같은 번호로 본인인증 하시면 정상 처리되도록 변경되었으므로 다시 진행해 보시기 바랍니다. 그 외의 경우 망고클래스 고객센터로 문의하여 주시기 바랍니다.
## { display: flex; flex-flow: column nowrap; } ## > nav.instant_appbar { position: absolute; } ## > nav.instant_appbar > .float_area { } ## > nav.instant_appbar > .float_area > .container_closer { margin-left: 6px; } @media all and (min-height: 700px) and (min-width: 740px) { ## { --top-edge: var(--basic-ui-inset-v-quarter); padding: var(--top-edge) 0; border-radius: var(--basic-ui-inset); box-shadow: 8px 16px 32px rgb(var(--cbdm) / 40%); } ## > nav.instant_appbar { padding-top: var(--top-edge); height: calc(var(--appbar-height) + var(--top-safe-pad) + var(--top-edge)); } } ## > .menu_block { display: flex; flex-flow: column nowrap; margin-top: 12px; margin-bottom: 12px; } ## > .menu_block > * { flex-shrink: 0; } ## > .menu_block > .fit_area { margin-left: 38px; } ## > .menu_block > .linear_item { --height: 52px; display: flex; flex-flow: row nowrap; column-gap: var(--basic-ui-inset-h); } ## > .menu_block > .linear_item > * { display: flex; flex-flow: row nowrap; min-height: var(--height); align-items: center; } ## > .menu_block > .linear_item > .item_head { width: 20px; flex-grow: 0; flex-shrink: 0; justify-content: center; } ## > .menu_block > .linear_item > .item_head.top_align { align-items: flex-start; } ## > .menu_block > .linear_item > .item_head > .icon { width: 100%; width: -webkit-fill-available; width: stretch; background-image: var(--icon); background-size: contain; background-repeat: no-repeat; background-position: center; } ## > .menu_block > .linear_item > .item_head > .icon.checkPeople { --icon: url("data:image/svg+xml,%3Csvg width='27' height='19' viewBox='0 0 27 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.4508 8.781L16.5275 4.86473L17.8249 3.57971L20.4508 6.18035L25.7025 0.979066L27 2.29469L20.4508 8.781ZM9.88558 9.17874C8.52632 9.17874 7.41419 8.7504 6.5492 7.89372C5.68421 7.03704 5.25172 5.93559 5.25172 4.58937C5.25172 3.24316 5.68421 2.14171 6.5492 1.28502C7.41419 0.428341 8.52632 0 9.88558 0C11.2449 0 12.357 0.428341 13.222 1.28502C14.087 2.14171 14.5195 3.24316 14.5195 4.58937C14.5195 5.93559 14.087 7.03704 13.222 7.89372C12.357 8.7504 11.2449 9.17874 9.88558 9.17874ZM0 19V16.124C0 15.4101 0.180206 14.7625 0.540618 14.1812C0.90103 13.5998 1.42105 13.1664 2.10069 12.8808C3.64531 12.2077 5.01838 11.7335 6.21989 11.4581C7.4214 11.1828 8.64165 11.0451 9.88064 11.0451C11.1196 11.0451 12.3364 11.1828 13.5309 11.4581C14.7254 11.7335 16.095 12.2077 17.6396 12.8808C18.3192 13.1868 18.8444 13.6253 19.2151 14.1965C19.5858 14.7676 19.7712 15.4101 19.7712 16.124V19H0ZM1.85355 17.1643H17.9176V16.124C17.9176 15.7976 17.8249 15.4866 17.6396 15.1908C17.4542 14.8951 17.2071 14.6758 16.8982 14.533C15.4359 13.8599 14.2002 13.4163 13.1911 13.2021C12.1819 12.9879 11.0801 12.8808 9.88558 12.8808C8.69108 12.8808 7.5841 12.9879 6.56465 13.2021C5.54519 13.4163 4.30435 13.8599 2.84211 14.533C2.53318 14.6758 2.29119 14.8951 2.11613 15.1908C1.94108 15.4866 1.85355 15.7976 1.85355 16.124V17.1643ZM9.88558 7.343C10.6888 7.343 11.353 7.08293 11.8781 6.5628C12.4033 6.04267 12.6659 5.38486 12.6659 4.58937C12.6659 3.79388 12.4033 3.13607 11.8781 2.61594C11.353 2.09581 10.6888 1.83575 9.88558 1.83575C9.08238 1.83575 8.41819 2.09581 7.89302 2.61594C7.36785 3.13607 7.10526 3.79388 7.10526 4.58937C7.10526 5.38486 7.36785 6.04267 7.89302 6.5628C8.41819 7.08293 9.08238 7.343 9.88558 7.343Z' fill='%235F6368'/%3E%3C/svg%3E"); height: 19px; margin-right: -7px; } ## > .menu_block > .linear_item > .item_head > .icon.clock { --icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6558 14.7653L14.7653 13.6558L10.7895 9.68V4.73684H9.21053V10.3197L13.6558 14.7653ZM10.0018 20C8.61868 20 7.3186 19.7375 6.10158 19.2126C4.88456 18.6877 3.82596 17.9754 2.92579 17.0755C2.02561 16.1757 1.31289 15.1175 0.787631 13.9011C0.262544 12.6846 0 11.3848 0 10.0018C0 8.61868 0.262456 7.3186 0.787368 6.10158C1.31228 4.88456 2.02465 3.82596 2.92447 2.92579C3.8243 2.02561 4.88246 1.31289 6.09895 0.787631C7.31544 0.262544 8.61518 0 9.99816 0C11.3813 0 12.6814 0.262456 13.8984 0.787368C15.1154 1.31228 16.174 2.02465 17.0742 2.92447C17.9744 3.8243 18.6871 4.88246 19.2124 6.09895C19.7375 7.31544 20 8.61518 20 9.99816C20 11.3813 19.7375 12.6814 19.2126 13.8984C18.6877 15.1154 17.9754 16.174 17.0755 17.0742C16.1757 17.9744 15.1175 18.6871 13.9011 19.2124C12.6846 19.7375 11.3848 20 10.0018 20ZM10 18.4211C12.3333 18.4211 14.3202 17.6009 15.9605 15.9605C17.6009 14.3202 18.4211 12.3333 18.4211 10C18.4211 7.66667 17.6009 5.67982 15.9605 4.03947C14.3202 2.39912 12.3333 1.57895 10 1.57895C7.66667 1.57895 5.67982 2.39912 4.03947 4.03947C2.39912 5.67982 1.57895 7.66667 1.57895 10C1.57895 12.3333 2.39912 14.3202 4.03947 15.9605C5.67982 17.6009 7.66667 18.4211 10 18.4211Z' fill='%23555555'/%3E%3C/svg%3E"); aspect-ratio: 1; } ## > .menu_block > .linear_item > .item_head > .icon.rotation { --icon: url("data:image/svg+xml,%3Csvg width='20' height='25' viewBox='0 0 20 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.06519 16.5841C1.7139 15.9305 1.44855 15.2557 1.26913 14.5597C1.08971 13.8635 1 13.1536 1 12.4302C1 9.91848 1.87397 7.78094 3.6219 6.01752C5.36984 4.2539 7.49587 3.3721 10 3.3721H10.9067L8.75829 1.22371L9.982 0L14.2254 4.24306L9.982 8.48613L8.75829 7.26242L10.9067 5.11403H10C7.98265 5.11403 6.26858 5.82416 4.85781 7.24442C3.44723 8.66487 2.74194 10.3935 2.74194 12.4302C2.74194 12.9111 2.79439 13.3916 2.89929 13.8716C3.00439 14.3518 3.16184 14.8205 3.37165 15.2776L2.06519 16.5841ZM10.018 24.7442L5.77464 20.5011L10.018 16.2581L11.2417 17.4818L9.09332 19.6302H10C12.0174 19.6302 13.7314 18.92 15.1422 17.4998C16.5528 16.0793 17.2581 14.3507 17.2581 12.314C17.2581 11.8331 17.2056 11.3526 17.1007 10.8726C16.9956 10.3924 16.8382 9.92371 16.6284 9.46655L17.9348 8.1601C18.2861 8.81371 18.5515 9.48852 18.7309 10.1845C18.9103 10.8807 19 11.5905 19 12.314C19 14.8257 18.126 16.9633 16.3781 18.7267C14.6302 20.4903 12.5041 21.3721 10 21.3721H9.09332L11.2417 23.5205L10.018 24.7442Z' fill='%23555555'/%3E%3C/svg%3E"); height: 25px; } ## > .menu_block > .linear_item > .item_head > .icon.location { --icon: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0021 11.1668C10.5953 11.1668 11.1024 10.9556 11.5235 10.5331C11.9449 10.1106 12.1555 9.60274 12.1555 9.00954C12.1555 8.41634 11.9443 7.90908 11.5218 7.48778C11.0993 7.06667 10.5913 6.85612 9.99791 6.85612C9.40471 6.85612 8.89756 7.06737 8.47645 7.48987C8.05515 7.91236 7.8445 8.42031 7.8445 9.01371C7.8445 9.60692 8.05574 10.1141 8.47824 10.5352C8.90074 10.9563 9.40868 11.1668 10.0021 11.1668ZM10 20.2864C12.3327 18.1981 14.1177 16.1952 15.3552 14.2774C16.5927 12.3597 17.2114 10.68 17.2114 9.23847C17.2114 7.06479 16.5209 5.27782 15.1397 3.87758C13.7585 2.47735 12.0453 1.77723 10 1.77723C7.95469 1.77723 6.24145 2.47735 4.86029 3.87758C3.47913 5.27782 2.78855 7.06479 2.78855 9.23847C2.78855 10.68 3.40729 12.3597 4.64477 14.2774C5.88225 16.1952 7.66733 18.1981 10 20.2864ZM10 22.6663C6.99921 20.0662 4.74901 17.6464 3.2494 15.4069C1.7498 13.1672 1 11.1111 1 9.23847C1 6.48688 1.89 4.25924 3.67001 2.55554C5.45022 0.851848 7.56021 0 10 0C12.4398 0 14.5498 0.851848 16.33 2.55554C18.11 4.25924 19 6.48688 19 9.23847C19 11.1111 18.2502 13.1672 16.7506 15.4069C15.251 17.6464 13.0008 20.0662 10 22.6663Z' fill='%23555555'/%3E%3C/svg%3E"); height: 23px; } ## > .menu_block > .linear_item > .item_head > .icon.alarm { --icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C8.04711 0 6.1742 0.775783 4.7933 2.15669C3.41239 3.53759 2.63661 5.4105 2.63661 7.36339V11.293L1.05839 15.2414C1.00879 15.3656 0.990368 15.5 1.00474 15.6329C1.01912 15.7658 1.06585 15.8932 1.14085 16.0039C1.21585 16.1146 1.31683 16.2052 1.43496 16.2678C1.55308 16.3304 1.68476 16.3631 1.81846 16.3631H6.72738C6.72738 18.1769 8.18615 19.6357 10 19.6357C11.8138 19.6357 13.2726 18.1769 13.2726 16.3631H18.1815C18.3152 16.3631 18.4469 16.3304 18.565 16.2678C18.6832 16.2052 18.7842 16.1146 18.8592 16.0039C18.9342 15.8932 18.9809 15.7658 18.9953 15.6329C19.0096 15.5 18.9912 15.3656 18.9416 15.2414L17.3634 11.293V7.36339C17.3634 5.4105 16.5876 3.53759 15.2067 2.15669C13.8258 0.775783 11.9529 0 10 0ZM11.6363 16.3631C11.6363 17.2729 10.9098 17.9994 10 17.9994C9.09021 17.9994 8.36369 17.2729 8.36369 16.3631H11.6363ZM4.27292 7.36339C4.27292 5.84447 4.87631 4.38777 5.95034 3.31373C7.02438 2.2397 8.48108 1.63631 10 1.63631C11.5189 1.63631 12.9756 2.2397 14.0497 3.31373C15.1237 4.38777 15.7271 5.84447 15.7271 7.36339V11.4501C15.727 11.554 15.7467 11.657 15.7852 11.7536L16.9731 14.7268H3.02687L4.21483 11.7536C4.2532 11.6573 4.27291 11.5546 4.27292 11.4509V7.36339Z' fill='%23555555'/%3E%3C/svg%3E"); height: 20px; } ## > .menu_block > .linear_item > .item_head.top_align > .icon.alarm { margin-top: 14px; } ## > .menu_block > .linear_item > .item_head > .icon.texts { --icon: url("data:image/svg+xml,%3Csvg width='20' height='11' viewBox='0 0 20 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11V9.5H5.375V11H0ZM0 6.25V4.75H11.1827V6.25H0ZM0 1.5V0H17V1.5H0Z' fill='%23555555'/%3E%3C/svg%3E"); height: 11px; } ## > .menu_block > .linear_item > .item_head.top_align > .icon.texts { margin-top: 20px; } ## > .menu_block > .linear_item > .item_body { flex-grow: 1; justify-content: stretch; font-size: 1rem; line-height: 1.5rem; } ## > .menu_block > .linear_item > .item_body > * { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .menu_block > .linear_item > .item_body > label { display: flex; flex-flow: row nowrap; height: var(--height); column-gap: var(--basic-ui-inset-h); justify-content: space-between; align-items: center; color: var(--color-text-lighteness); } ## > .menu_block > .linear_item > .item_body > label::before { flex-grow: 0; flex-shrink: 0; color: var(--color-text-lighten); } ## > .menu_block > .linear_item > .item_body > label::after { text-align: right; } ## > .menu_block > .linear_item > .item_body > input { border-style: none; font-size: 1rem; line-height: 1.5rem; } ## > .menu_block > .linear_item > .item_body > input:focus { outline: none; } ## > .menu_block > .linear_item > .item_body > input::placeholder { color: var(--color-text-pale); } ## > .menu_block > .linear_item > .item_body > textarea { padding-top: 14px; border-style: none; font-size: 1rem; line-height: 1.5rem; } ## > .menu_block > .linear_item > .item_body > textarea:focus { outline: none; } ## > .menu_block > .linear_item > .item_body > textarea::placeholder { color: var(--color-text-pale); } ## > .menu_block > .linear_item > .item_body > .line_block { color: var(--color-text-lighten); } ## > .menu_block > .linear_item > .item_body > .line_block > button { font-size: 1rem; line-height: 1.5rem; color: var(--color-text-lightness); } ## > .menu_block > .linear_item.idLine > .item_head > button.scheduleColor { border-radius: 7px; background-color: var(--color); } ## > .menu_block > .linear_item.idLine > .item_body { align-items: stretch; } ## > .menu_block > .linear_item.partyLine > .item_body > label.scheduleParty > span.partySummary { text-align: right; } ## > .menu_block > .linear_item.partyLine > .item_body > label.scheduleParty > span.partySummary > span { margin-left: var(--basic-ui-inset-h-quarter); font-size: 12px; vertical-align: bottom; } ## > .menu_block > .linear_item.scheduleRotationLine > .item_body > label { height: max-content; min-height: var(--height); } ## > .menu_block > .linear_item.descriptionLine { flex-grow: 1; } ## > .menu_block > .linear_item.descriptionLine > .item_body { align-items: stretch; } ## > .menu_block .calendar_line { display: flex; flex-flow: column nowrap; width: fit-content; margin-left: 24px; } ## > .menu_block .calendar_line > .month_selector_bar { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .menu_block .calendar_line > .month_selector_bar > .bar_side > button { padding: 0 12px; } ## > .menu_block .calendar_line > .month_selector_bar > .bar_side > button.selector { } ## > .menu_block .calendar_line > .dedicated_calendar { width: fit-content; margin: 2px 0 var(--basic-ui-inset-v); } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block { width: 280px; } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar { } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure { } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure .days_holder > .days > .day > .label { font-size: 1rem; } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure > .days_subjects { height: 24px; border-bottom-color: transparent; } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days { } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day { aspect-ratio: 1; padding: 0; justify-content: center; } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure > .days_subjects > .days_holder > .days > .day > .label { font-size: 0.75rem; } ## > .menu_block .calendar_line > .dedicated_calendar > .calendar_block > .micro_calendar > .calendar_structure > .weeks > .week > .days_holder > .days > .day > .label { width: 32px; margin: 0; } ##:not([data-show-party-selector="1"]) > .menu_block > .partySelectorLine { display: none; } ## > .menu_block > .partySelectorLine { } ## > .menu_block > .partySelectorLine > ul.partySelector { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; align-items: stretch; } ## > .menu_block > .partySelectorLine > ul.partySelector > li { font-size: 1rem; font-weight: 500; line-height: 2.5em; } ## > .menu_block > .partySelectorLine > ul.partySelector > li > label { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .menu_block > .partySelectorLine > ul.partySelector > li > label::before { margin-right: var(--basic-ui-inset-h); background-color: var(--color); } ## > .menu_block > .partySelectorLine > ul.partySelector > li > label > input { } ## > .menu_block > .partySelectorLine > ul.partySelector > li > label > span { } ##:not([data-show-begins-calendar="1"]) > .menu_block > .beginsCalendarLine { display: none; } ##:not([data-show-ends-calendar="1"]) > .menu_block > .endsCalendarLine { display: none; } ## > .menu_block > .time_selector_line { display: flex; flex-flow: column nowrap; } ## > .menu_block > .time_selector_line > .time_selector { --font-size: 2rem; --font-weight: 300; --holder-pad: 1em; } ##:not([data-show-begins-time-selector="1"]) > .menu_block > .beginsTimeSelectorLine { display: none; } ##:not([data-show-ends-time-selector="1"]) > .menu_block > .endsTimeSelectorLine { display: none; } ## > .menu_block > hr { margin-inline: 0; } ## > .menu_block > hr:first-child { background-color: var(--color-boundary-lightly); } ## > .menu_block > .rotationSelectorLine { padding-bottom: 24px; user-select: none; } ##:not([data-show-rotation-selector="1"]) > .menu_block > .rotationSelectorLine { display: none; } ## > .menu_block > .rotationSelectorLine > ul { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; align-items: stretch; } ## > .menu_block > .rotationSelectorLine > ul > li { display: flex; flex-flow: column nowrap; align-items: stretch; } ## > .menu_block > .rotationSelectorLine > ul > li > * { } ## > .menu_block > .rotationSelectorLine > ul > li > .custom_checkbox { display: flex; flex-flow: row nowrap; align-items: center; } ## > .menu_block > .rotationSelectorLine > ul > li > .custom_checkbox > input { } ## > .menu_block > .rotationSelectorLine > ul > li > .custom_checkbox > label { flex-grow: 1; cursor: pointer; } ## > .menu_block > .rotationSelectorLine > ul > li > .custom_checkbox > label::before { margin-right: var(--basic-ui-inset-h); } ## > .menu_block > .rotationSelectorLine > ul > li > .custom_checkbox > label > span { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox { font-size: 1rem; font-weight: 500; line-height: 2.5em; } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > input { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > label { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > label ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > label > span { } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > label > input { width: 2em; border: none; border-bottom: solid 1px var(--color-boundary-darker); font-size: 1em; text-align: center; transition-timing-function: ease; transition-duration: 0.2s; } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector > li > .custom_checkbox > label > input:disabled { border-bottom-color: var(--color-boundary-o20); } /* ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector:has(input#rotationForYear:checked):has(> li.rotationForYear > .custom_checkbox > label > input[data-value="1"]) > li:not(.rotationForYear) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector:has(input#rotationForMonth:checked):has(> li.rotationForMonth > .custom_checkbox > label > input[data-value="1"]) > li:not(.rotationForMonth):not(:has(> .custom_checkbox > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationMethodSelector:has(input#rotationForWeek:checked):has(> li.rotationForWeek > .custom_checkbox > label > input[data-value="1"]) > li:not(.rotationForWeek):not(:has(> .custom_checkbox > input:checked)) { display: none; } */ ## > .menu_block > .rotationSelectorLine[data-point="month"] > ul.rotationMethodSelector > li.month:not(:has(> .custom_checkbox > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-point="week"] > ul.rotationMethodSelector > li.week:not(:has(> .custom_checkbox > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-point="day"] > ul.rotationMethodSelector > li.day:not(:has(> .custom_checkbox > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-weekday-required="1"] > ul.rotationMethodSelector > li.rotationForDay { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier { container-name: rotation-point-specifier; container-type: inline-size; row-gap: var(--basic-ui-inset-v); } ## > .menu_block > .rotationSelectorLine:not(:has(> ul.rotationMethodSelector > li:not(.rotationForDay) > .custom_checkbox > input:checked)) > ul.rotationPointSpecifier { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li * { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .custom_checkbox { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .custom_checkbox > input { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .custom_checkbox > label { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .custom_checkbox > label ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .custom_checkbox > label > span { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li:not(:has(> .custom_checkbox > input:checked)) > .detail_selections { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > div { margin: var(--basic-ui-inset-v) 0 0; padding-inline: var(--basic-ui-inset-h-half); font-size: 0.875rem; font-weight: 300; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul { --item-width: 3.75em; --gap: var(--basic-ui-inset-quarter); display: flex; flex-flow: row wrap; list-style: none; margin: var(--basic-ui-inset-v-half) 0 0; padding: 0; gap: var(--gap); font-size: 0.875rem; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul.fixed_width { width: 280px; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li { } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label { display: flex; flex-flow: row wrap; width: var(--item-width); max-width: var(--item-width); aspect-ratio: 1; box-sizing: border-box; padding: var(--basic-ui-inset-quarter); border: solid 1px var(--color-boundary-o5); border-radius: 100%; outline: dashed 0 var(--color-mango-yellow-vivid-light); justify-content: center; align-items: center; text-align: center; cursor: pointer; transition-timing-function: ease; transition-duration: 0.2s; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label:has(> input:checked) { border-color: var(--color-mango-green-vivid); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label:focus-within { outline-width: 1px; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label:hover { background-color: rgb(var(--cmyvl) / 10%); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label:active { border-color: var(--color-mango-green-vivid-light); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label > input { position: absolute; width: 0; height: 0; opacity: 0; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li > .detail_selections > ul > li > label > span { } ## > .menu_block > .rotationSelectorLine[data-point="year"] > ul.rotationPointSpecifier > li:not([data-point="year"]):not(:has(> .detail_selections > ul > li > label > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-point="month"] > ul.rotationPointSpecifier > li:not([data-point="month"]):not(:has(> .detail_selections > ul > li > label > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-point="week"] > ul.rotationPointSpecifier > li:not([data-point="week"]):not(:has(> .detail_selections > ul > li > label > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine[data-point="day"] > ul.rotationPointSpecifier > li:not([data-point="day"]):not(:has(> .detail_selections > ul > li > label > input:checked)) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearWeeks > .detail_selections:has(> ul.rotationYearWeeksSeq > li > label> input:checked) > :not(.weekSeq) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearWeeks > .detail_selections:has(> ul.rotationYearWeekFineWeeks > li > label> input:checked) > :not(.fineWeek) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearWeeks > .detail_selections:has(> ul.rotationYearWeekDaysSeq > li > label> input:checked) > :not(.weekDaySeq) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthWeeks > .detail_selections:has(> ul.rotationMonthWeeksSeq > li > label> input:checked) > :not(.weekSeq) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthWeeks > .detail_selections:has(> ul.rotationMonthWeekFineWeeks > li > label> input:checked) > :not(.fineWeek) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthWeeks > .detail_selections:has(> ul.rotationMonthWeekDaysSeq > li > label> input:checked) > :not(.weekDaySeq) { display: none; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearMonths > .detail_selections > ul { --width: min(calc((100% - (var(--gap) * 5)) / 6), var(--item-width)); width: calc((var(--width) * 6) + (var(--gap) * 5)); } @container rotation-point-specifier (max-width: 334px) { ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearMonths > .detail_selections > ul { --width: min(calc((100% - (var(--gap) * 3)) / 4), var(--item-width)); width: calc((var(--width) * 4) + (var(--gap) * 3)); } } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearMonths > .detail_selections > ul > li { width: var(--width); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationYearMonths > .detail_selections > ul > li > label { width: 100%; } @container rotation-point-specifier (min-width: 320px) { ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthDays > .detail_selections > ul { --width: min(calc((100% - (var(--gap) * 6)) / 7), var(--item-width)); width: calc((var(--width) * 7) + (var(--gap) * 6)); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthDays > .detail_selections > ul > li { width: var(--width); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationMonthDays > .detail_selections > ul > li > label { width: 100%; } } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationWeekDays > .detail_selections > ul { --width: min(calc((100% - (var(--gap) * 6)) / 7), var(--item-width)); width: calc((var(--width) * 7) + (var(--gap) * 6)); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationWeekDays > .detail_selections > ul > li { width: var(--width); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationWeekDays > .detail_selections > ul > li > label { width: 100%; } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationWeekDays > .detail_selections > ul > li > label:has(> input[value="0"]) { color: var(--color-sunday-vivid); } ## > .menu_block > .rotationSelectorLine > ul.rotationPointSpecifier > li.rotationWeekDays > .detail_selections > ul > li > label:has(> input[value="6"]) { color: var(--color-saturday-vivid); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine { display: flex; flex-flow: column nowrap; align-items: stretch; } ## > .menu_block > .rotationSelectorLine:not(:has(> ul.rotationMethodSelector > li > .custom_checkbox > input:checked)) > .rotationLastBeginsLine { display: none; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .custom_checkbox { display: flex; flex-flow: row nowrap; align-items: center; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .custom_checkbox > input { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .custom_checkbox > label { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .custom_checkbox > label::before { margin-right: var(--basic-ui-inset-h); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .custom_checkbox > label > span { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine:not(:has(> .custom_checkbox > input:checked)) > .rotationLastBegins { display: none; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay { margin-top: 16px; margin-left: 12px; font-size: 1rem; line-height: 1.5rem; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > * { color: var(--color-text-lighten); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > .solarLastBegins { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > .solarLastBegins > .solarLastBeginsDate { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins[data-show-last-begins-calendar="1"] > .lastBeginsDisplay > .solarLastBegins > .solarLastBeginsDate { color: var(--color-mango-green-dark); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > .solarLastBegins > .suffix { text-align: right; } ##[data-show-lunar-date="1"] > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins[data-show-last-begins-calendar="1"] > .lastBeginsDisplay > .solarLastBegins > .solarLastBeginsDate { color: var(--color-mango-green-vivid-light); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > .lunarLastBegins { margin-top: unset; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsDisplay > .lunarLastBegins > .lunarLastBeginsDate { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins[data-show-last-begins-calendar="1"] > .lastBeginsDisplay > .lunarLastBegins > .lunarLastBeginsDate { color: var(--color-mango-green-dark); } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsCalendar { margin-top: 14px; margin-left: unset; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins:not([data-show-last-begins-calendar="1"]) > .lastBeginsCalendar { display: none; } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsCalendar > .lastBeginsMonthSelector { } ## > .menu_block > .rotationSelectorLine > .rotationLastBeginsLine > .rotationLastBegins > .lastBeginsCalendar > .lastBeginsDedicatedCalendar { } ## > .menu_block > .rotationSelectorLine > hr { margin: var(--basic-ui-inset-v) 0; } ## > .menu_block > .rotationSelectorLine:not(:has(> ul.rotationMethodSelector > li:not(.rotationForDay) > .custom_checkbox > input:checked)) > hr.forRotationPointSpecifier { display: none; } ## > .menu_block > .rotationSelectorLine:not(:has(> ul.rotationMethodSelector > li > .custom_checkbox > input:checked)) > hr.forRotationLastBegins { display: none; } ## .toggle_switch_checkbox { } ## .scheduleColor { --color-default: var(--color-boundary-bright); --color: var(--color-default); width: 20px; aspect-ratio: 1; border: none; border-radius: 7px; background-color: var(--color); } ## .scheduleTitle { } ## .lunar_display { margin-top: -28px; } ## .period { color: var(--color-grayscale-darkly); } ## .date_display { transition-timing-function: ease; transition-duration: 0.3s; } ##[data-show-lunar-date="1"] .solar_date { color: var(--color-grayscale-neutral); } ##[data-show-lunar-date="1"] .solar_date::before { content: '양력\A0'; } ##[data-show-lunar-date="1"] .lunar_date::before { content: '음력\A0'; } ##:not([data-show-lunar-date="1"]) .lunar_display { display: none; } ##[data-show-begins-calendar="1"] .solarBeginsDate { color: var(--color-mango-green-dark); } ##[data-show-begins-calendar="1"][data-show-lunar-date="1"] .solarBeginsDate { color: var(--color-mango-green-vivid-light); } ##[data-show-begins-calendar="1"] .lunarBeginsDate { color: var(--color-mango-green-dark); } ##[data-show-ends-calendar="1"] .solarEndsDate { color: var(--color-mango-green-dark); } ##[data-show-ends-calendar="1"][data-show-lunar-date="1"] .solarEndsDate { color: var(--color-mango-green-vivid-light); } ##[data-show-ends-calendar="1"] .lunarEndsDate { color: var(--color-mango-green-dark); } ## .scheduleDescription { min-height: max-content; }
2025. 12. 34. 월요일 오후 2:00
2025. 12. 34.
2025. 12. 34. 월요일 오후 3:00
2025. 12. 34.
  • 일자 지정
    각 월 말일 기준
2025. 12. 34. 월요일 시작 일정까지
2025. 12. 34.
## > nav.instant_appbar { } ## > nav.instant_appbar > nav.appbarRight { } ## > nav.instant_appbar > nav.appbarRight > button { font-size: 0.875rem; } ## { --bottom-sub-block-max-height: 84px; --bottom-fixed-height: var(--bottom-sub-block-max-height); } ## > .dailyMealPlan { display: flex; flex-flow: column nowrap; height: min-content; } ## > .dailyMealPlan > div.dataBlock { display: flex; flex-flow: column nowrap; height: 0%; flex-grow: 1; flex-shrink: 1; row-gap: var(--basic-ui-inset-h-half); column-gap: var(--basic-ui-inset-h); align-items: stretch; } ## > .dailyMealPlan > div.dataBlock > * { min-height: max-content; } @media all and (min-width: 740px) { ## > .dailyMealPlan > div.dataBlock { display: block; column-count: 2; height: fit-content; } ## > .dailyMealPlan > div.dataBlock > * { break-inside: avoid; } } ## > .bottomSubBlockPad { height: var(--bottom-fixed-height); flex-frow: 1; flex-shrink: 1; } ## > .bottomSubBlock { position: fixed; z-index: 20; bottom: var(--bottom-safe-pad); left: 0; right: 0; height: fit-content; max-height: var(--bottom-sub-block-max-height); margin: auto; background-color: rgb(var(--cwht) / 66.666%); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); /* backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); */ } ## > .bottomSubBlock > * { padding-inline: var(--left-pad) var(--right-pad); } ## > .bottomSubBlock > .sub_origins { } ## > .bottomSubBlock > .sub_origins > .meal_time_selections { padding-right: var(--basic-ui-inset-h-half); } ## .sub_origins { --bar-height: 40px; flex-wrap: wrap; height: auto; min-height: var(--bar-height); row-gap: var(--basic-ui-inset-v-quarter); } ## .sub_origins > .bar_side { flex-grow: 1; flex-shrink: 0; } ## .sub_origins > .bar_side.left_side { justify-content: flex-start; } ## .sub_origins > .bar_side.right_side { justify-content: flex-end; } ## .sub_origins > .bar_side.center_side { justify-content: center; } ## .sub_origins > .bar_side button { flex-shrink: 0; } ## .sub_origins > .bar_side button.selector { } ## .sub_origins > .bar_side button.selector > span { } ## .sub_origins > .bar_side button.selector > span.school_origin { } ## .sub_origins > .bar_side button.selector > span.children_origin { font-weight: 300; } ## .sub_origins > .bar_side button.selector > span.children_origin > span { font-size: 12px; vertical-align: bottom; } ## .sub_origins > .float_selections { } ## .sub_origins > .float_selections ul { } ## .sub_origins > .float_selections ul > li { } ## .sub_origins > .float_selections ul > li > button { } ## .sub_origins > .float_selections ul > li > button > span { } ## .sub_origins > .float_selections ul > li > button > span.school_origin { } ## .sub_origins > .float_selections ul > li > button > span.children_origin { font-weight: 200; } ## .sub_origins > .float_selections ul > li > button > span.children_origin > span { font-size: 12px; vertical-align: bottom; } ## .sub_origins > .float_selections ul > li[data-selected="1"] > button > span.children_origin { font-weight: 300; } ## .meal_time_selections > button.meal_time_selection { padding: 0 var(--basic-ui-inset-h-half); } ## .meal_time_selections > button.meal_time_selection[data-selected="1"] { font-weight: 500; }
20???????점심
오늘
  • |foodName|
    • |category|
총 ??? Kcal
  • |nutrient||valueAndUnit|
  • |origin||country|
20??.??.?? 업데이트
    ## nav.instant_appbar { } ## nav.instant_appbar button.interest { margin-right: 7px; background-image: var(--svg-icon-heart-empty); background-position: center; background-repeat: no-repeat; } ## nav.instant_appbar button.interest[data-following="1"] { background-image: var(--svg-icon-heart-filled); } ## .text_capsule { --color: #555; color: var(--color); --border-color: var(--color); } ## .text_capsule:empty { display: none; } ## .info_item:not(:has(.data:not(:empty))) { display: none; } ## > .schoolInfo { } ## > .schoolInfo > .cardBlock { } ## > .schoolInfo > .cardBlock .schoolName { word-break: keep-all; overflow-wrap: anywhere; } ## > .schoolInfo > .cardBlock .schoolPpd { --font-size: 0.625rem; --height: 1rem; } ## > .schoolInfo > .cardBlock .schoolFax .text_capsule { --color: var(--color-text-inverse); --font-size: 0.625rem; } ## .tab_content_blocks > .information .schoolTags .text_capsule { --border-color: var(--color-text-paleness); }
    |ppd|

    |name|

    |tel| |fax| FAX
    • 정보
    • 소식

    기본정보

    |address| |addressDetail| |homepage| 개교기념일 |openingAnivMD|
    |bgcoeduTitle| |hsCateGpdSps| |hasIscDesc| |eebadDesc| |dnc|
    아직 망고클래스 학교 채널이 개설되지 않았어요
    ## :not(.badges) > .text_capsule { --color: #555; color: var(--color); --border-color: var(--color); } ## :not(.badges) > .text_capsule:empty { display: none; } ## .info_item:not(:has(.data:not(:empty))) { display: none; } ## .class_identity .text_capsule { --color: var(--color-text-inverse); --font-size: 0.875rem; } ## .class_identity .text_capsule.mango_edu_badge { --bg-color: var(--color-mango-yellow-dark); } ## .class_identity .text_capsule.mango_edu_badge[data-is-mango=""] { display: none; } ## .class_identity .text_capsule.class_org_cate[data-org-cate="학원"] { --bg-color: var(--color-mango-blue-dark); } ## .class_identity .text_capsule.class_org_cate[data-org-cate="교습소"] { --bg-color: var(--color-mango-green-dark); } ## .class_fax .text_capsule { --color: var(--color-text-inverse); --font-size: 0.625rem; } ## .tab_content_blocks > .information .info_item { } ## .tab_content_blocks > .information .info_item .subject { margin-right: 22px; flex-grow: 0; flex-shrink: 0; color: var(--color-text-darker); } ## .tab_content_blocks > .information .info_item .data { } ## .tab_content_blocks > .information .info_item .data.peoples:not(:empty)::after { content: '\A0명'; } ## .tab_content_blocks > .information .info_item.mainternance_period .ends:empty { display: none; } ## .tab_content_blocks > .information .info_item.mainternance_period .ends:not(:empty)::before { content: ' ~ '; } ## .tab_content_blocks > .information .class_courses .text_capsule { --border-color: var(--color-text-paleness); } ## .tab_content_blocks > .information .class_tags .text_capsule { --border-color: var(--color-text-paleness); }

    |name|

    망고에듀 |orgCategory|
    |tel| |fax| FAX
    • 정보
    • 소식

    기본정보

    |address| |addressDetail| 운영상태 |status| 휴원기간 |mainternanceBegins| |mainternanceEnds| 개원일자 |established| 정원합계 |capa| 일시정원 |capaAcceptableOnTime| 교육분야 |fscCombined|
    교육과정 |item|
    수강비용 |subject| |tutition|
    |domitoryDesc|
    ## { } ## > .list_area > .dayIndicator { margin: 24px 0 8px; font-size: 1.125rem; line-height: 1.25rem; } ## > .list_area > .dayIndicator > .dateSet { color: var(--color-text-darker); font-weight: 600; } ## > .list_area > .dayIndicator > .dateSet::after { content: '.'; } ## > .list_area > .dayIndicator > .day { color: var(--color-text-lightness); } ## > .list_area > ul.dailyAttendLogs { } ## > .list_area > ul.dailyAttendLogs > hr { margin: var(--basic-ui-inset-v) 0; }
    20?? ?? ?? ?
    • |childName| |className| |checkInTime| · |checkOutTime| 회차수업 오늘 예정   |lessonsReservedToday| » |attendState|
      • |courseName| |countedTimes| / |appointedTimes|
    ## { --comment-write-height: 60px; --bottom-fixed-height: calc(var(--comment-write-height) + var(--bottom-safe-pad)); padding-bottom: var(--bottom-fixed-height); } ##:not([data-allow-comment="true"]) { --bottom-fixed-height: var(--bottom-safe-pad); } ## > .instant_appbar { } ## > .instant_appbar > .appbarRight { } ##:not([data-is-written="true"]) > .instant_appbar > .appbarRight { display: none; } ## > .class_board_content { } ## > .class_board_content > .upwardContents { } ## > .class_board_content > .upwardContents > * { margin-top: var(--basic-ui-inset-v-half); } ## > .class_board_content > .upwardContents > .linker { } ## > .class_board_content > .upwardContents > .linker > hr { background-color: var(--color-boundary-o20); } ## > .class_board_content > .upwardContents > .linker > hr.pre { width: 6px; } ## > .class_board_content > .upwardContents > button.upwardContent { border: solid 1px var(--color-boundary-lightest); border-radius: 6px; padding: var(--basic-ui-inset-half); background-color: transparent; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .upwardContents > button.upwardContent:focus { outline: solid 2px var(--color-point); outline-offset: -1px; } ## > .class_board_content > .upwardContents > button.upwardContent:hover { border-color: var(--color-boundary); } ## > .class_board_content > .upwardContents > button.upwardContent:active { background-color: var(--color-boundary-o5); } ## > .class_board_content > .headerBlock { margin-top: var(--basic-ui-inset-v); } ## > .class_board_content > .headerBlock > .title { margin-top: var(--basic-ui-inset-v-half); } ## > .class_board_content > .headerBlock > .infoBar { } ## > .class_board_content > .headerBlock > .infoBar > .info_item { padding: 3px 0; } ## > .class_board_content > .headerBlock > .infoBar > .info_item > .icon { display: inline-block; width: 14px; height: 12px; background-image: var(--icon); background-size: contain; background-position: center; background-repeat: no-repeat; } ## > .class_board_content > .headerBlock > .infoBar > .info_item.countViews > .icon { --icon: var(--svg-board-tiny-icon-view); height: 10px; } ## > .class_board_content > .headerBlock > .infoBar > .info_item.countConversations > .icon { --icon: var(--svg-board-tiny-icon-conversation); } ## > .class_board_content > .replyBlock { } ## > .class_board_content > .replyBlock > .replyHeader { } ## > .class_board_content > .replyBlock > .replyHeader > .replyLabel { } ## > .class_board_content > .replyBlock > .replyHeader > .replyLabel > button.replyLabelBtn { border-style: none; outline-style: none; padding: 0; background: transparent; cursor: pointer; } ## > .class_board_content > .replyBlock > .replyHeader > .replyLabel > button.collapse { width: 27px; align-self: stretch; } ## > .class_board_content > .replyBlock > .replyHeader > .replyLabel > button.collapse::after { width: 9px; height: 8px; margin-left: 0; } ## > .class_board_content > .replyBlock > .replyHeader > .replyActions { } ## > .class_board_content > .replyBlock > .replyHeader > .replyActions > button.writeReply { } ##:not([data-allow-reply="true"]) > .class_board_content > .replyBlock > .replyHeader > .replyActions > button.writeReply { display: none; } ## > .class_board_content > .replyBlock > ul.replies { width: 100%; width: -webkit-fill-available; width: stretch; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h) 0; } ## > .class_board_content > .replyBlock > ul.replies > * { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .class_board_content > .replyBlock > ul.replies > hr { margin: var(--basic-ui-inset-v) 0; background-color: var(--color-boundary-o5); } ## > .class_board_content > .replyBlock > ul.replies > hr:first-child { display: none; } ## > .class_board_content > .replyBlock > ul.replies > li.reply_item { } ## > .class_board_content > .replyBlock > ul.replies > li.reply_item > button.replyContent { border: solid 1px var(--color-boundary-lightest); border-style: none; border-width: 0; border-radius: 6px; padding: 0; background-color: transparent; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .replyBlock > ul.replies > li.reply_item > button.replyContent:focus { outline: solid 2px var(--color-point); outline-offset: -1px; } ## > .class_board_content > .replyBlock > ul.replies > li.reply_item > button.replyContent:hover { border-color: var(--color-boundary); } ## > .class_board_content > .replyBlock > ul.replies > li.reply_item > button.replyContent:active { background-color: var(--color-boundary-o5); } ## > .class_board_content > .replyBlock:has(> .replyLabel > button.collapse[data-after-indicator-upper="1"]) > ul.replies { display: none; } ##:not([data-allow-reply="true"])[data-replys="0"] > .class_board_content > .reply_set { display: none; } ## > .class_board_content > .commentBlock { } ## > .class_board_content > .commentBlock > ul.comments { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .class_board_content > .commentBlock > ul.comments > * { width: 100%; width: -webkit-fill-available; width: stretch; } ## > .class_board_content > .commentBlock > ul.comments > hr { background-color: var(--color-boundary-o5); } ## > .class_board_content > .commentBlock > ul.comments > hr:first-child { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item { --depth: 0; --pad-gap: var(--basic-ui-inset-h); --bg: transparent; background-color: var(--bg); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="0"] { --depth: 0; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="1"] { --depth: 1; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="2"] { --depth: 2; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="3"] { --depth: 3; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="4"] { --depth: 4; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="5"] { --depth: 5; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="6"] { --depth: 6; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="7"] { --depth: 7; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="8"] { --depth: 8; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="9"] { --depth: 9; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="10"] { --depth: 10; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="11"] { --depth: 11; --bg: #F7F7F7; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="12"] { --depth: 12; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div { position: relative; margin: var(--basic-ui-inset-v) 0; margin-left: calc(var(--pad-gap) * var(--depth)); padding: 0 var(--basic-ui-inset-h); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div::before { content: ''; position: absolute; top: 2px; left: 0; width: 10px; aspect-ratio: 1; background-image: var(--svg-board-tiny-icon-reply-chain); background-size: contain; background-position: center; background-repeat: no-repeat; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-reply-depth="0"] > div::before { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .header { } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .header > .ownerBadge { --height: 1.8em; --color: var(--color-mango-green-dark); --border-color: var(--color-mango-green-dark); --font-size: 0.625rem; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item:not([data-is-content-owner="true"]) > div > .header > .ownerBadge { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div[data-edit="1"] > .header > .registered { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div:not([data-edit="1"]) > .header > .isSecret { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .content { margin-top: var(--basic-ui-inset-v-quarter); transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item[data-is-blinded="true"] > div > .content { color: var(--color-mango-yellow-vivid-darker); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div[data-edit="1"] > .content { height: max-content; align-self: stretch; padding: var(--basic-ui-inset-half); border: solid 1px var(--color-boundary-o20); border-radius: 8px; background-color: var(--color-boundary-bright); overflow: auto; overflow-wrap: anywhere; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions { margin-top: var(--basic-ui-inset-v-half); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div[data-edit="1"] > .actions { align-self: stretch; justify-content: flex-end; padding-inline: var(--basic-ui-inset-h-half); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button { display: flex; flex-flow: row nowrap; padding: 0; border-style: none; border-top: solid 1px transparent; border-bottom: solid 1px transparent; border-radius: 4px; column-gap: 2px; align-items: center; background-color: transparent; color: var(--color-text-lightness); font-size: 0.75rem; line-height: 1.125rem; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button:focus { outline: solid 1px rgb(var(--cp) / 60%); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button:hover { border-bottom-color: var(--color-point-sub); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button:active { border-top-color: var(--color-point-sub); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button::before { content: ''; display: inline-block; width: 18px; height: 18px; margin: 0; background-image: var(--icon); background-size: contain; background-position: center; background-repeat: no-repeat; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.replyComment { } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.replyComment::before { --icon: var(--svg-board-icon-reply); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.cancelEdit { } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.cancelEdit::before { --icon: var(--svg-board-icon-cancel); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.saveComment { } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .actions > button.saveComment::before { --icon: var(--svg-board-icon-commit); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div:not([data-edit="1"]) > .actions > button.edit_comment { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div[data-edit="1"] > .actions > button:not(.edit_comment) { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock { display: flex; flex-flow: row nowrap; width: 100%; width: -webkit-fill-available; width: stretch; margin-top: var(--basic-ui-inset-v-half); margin-right: calc(var(--basic-ui-inset-h) * -1); column-gap: var(--basic-ui-inset-h-quarter); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock::before { content: ''; width: 10px; height: 10px; margin-top: 10px; background-image: var(--svg-board-tiny-icon-reply-chain); background-size: contain; background-position: center; background-repeat: no-repeat; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock { position: relative; display: flex; flex-flow: row nowrap; width: 0; height: fit-content; flex-grow: 1; justify-content: stretch; align-items: stretch; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > .replyCommentContent { width: 0; height: max-content; flex-grow: 1; padding: var(--basic-ui-inset-half); padding-right: 40px; border: solid 1px var(--color-boundary-o20); border-radius: 8px; align-self: stretch; background-color: var(--color-boundary-bright); overflow: auto; overflow-wrap: anywhere; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > .replyCommentContent:empty:before { content: attr(placeholder); color: var(--color-text-lightest); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > label.replyCommentSecret { position: absolute; display: flex; flex-flow: row nowrap; top: 0; bottom: 0; right: 10px; height: 26px; aspect-ratio: 1; margin: auto 0; justify-content: center; align-items: center; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > label.replyCommentSecret > input { position: absolute; width: 0; height: 0; opacity; 0; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > label.replyCommentSecret::after { content: ''; width: 17px; height: 19px; background-color: var(--color-boundary-lightly); mask-image: var(--svg-board-icon-secret); mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentContentBlock > label.replyCommentSecret:has(> input:checked)::after { background-color: var(--color-boundary); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentSubmit { width: 60px; flex-grow: 0; flex-shrink: 0; align-self: stretch; border-style: none; border-radius: 8px; background-color: var(--color-boundary); color: var(--color-text-inverse); transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > .replyCommentWriteBlock > .replyCommentSubmit:disabled { background-color: var(--color-boundary-lightly); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > button.writerMenu { position: absolute; top: 0; right: 24px; width: 22px; height: 22px; margin-inline: -11.5px; border-style: none; background-color: transparent; background-image: var(--svg-board-icon-more); background-size: 3px 18px; background-position: center; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div > button.writerMenu:active { background-color: var(--color-boundary-o10); } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item:not([data-is-comment-writer="true"]) > div > button.writerMenu { display: none; } ## > .class_board_content > .commentBlock > ul.comments > li.comment_item > div[data-edit="1"] > button.writerMenu { display: none; } ## > .commentWriteBlock { display: flex; flex-flow: row nowrap; width: 100%; width: -webkit-fill-available; width: stretch; height: var(--comment-write-height); margin: 0; padding-bottom: var(--bottom-safe-pad); justify-content: stretch; align-items: stretch; backdrop-filter: blur(1px); user-select: none; } ##:not([data-allow-comment="true"]) > .commentWriteBlock { display: none; } ## > .commentWriteBlock > .commentWrite { display: flex; flex-flow: row nowrap; flex-grow: 1; column-gap: var(--basic-ui-inset-h-quarter); justify-content: stretch; align-items: stretch; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock { position: relative; display: flex; flex-flow: row nowrap; flex-grow: 1; row-gap: var(--basic-ui-inset-h-quarter); justify-content: stretch; align-items: stretch; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > .commentContent { flex-grow: 1; padding: 12px 42px 12px 24px; border: solid 1px var(--color-boundary-o20); border-radius: 40px; background-color: var(--color-boundary-bright); scrollbar-width: none; overflow: auto; overflow-wrap: anywhere; transition-timing-function: ease; transition-duration: 0.3s; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > .commentContent:empty:before { content: attr(placeholder); color: var(--color-text-lightest); } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > label.commentSecret { position: absolute; display: flex; flex-flow: row nowrap; top: 0; bottom: 0; right: 18px; height: 26px; aspect-ratio: 1; margin: auto 0; justify-content: center; align-items: center; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > label.commentSecret > input { position: absolute; width: 0; height: 0; opacity; 0; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > label.commentSecret::after { content: ''; width: 17px; height: 19px; background-color: var(--color-boundary-lightly); mask-image: var(--svg-board-icon-secret); mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.3s; } ## > .commentWriteBlock > .commentWrite > .commentContentBlock > label.commentSecret:has(> input:checked)::after { background-color: var(--color-boundary); } ## > .commentWriteBlock > .commentWrite > button.commentSubmit { width: 60px; flex-grow: 0; flex-shrink: 0; border: none; border-radius: 40px; background-color: var(--color-boundary); transition-timing-function: ease; transition-duration: 0.3s; } ## > .commentWriteBlock > .commentWrite > button.commentSubmit:disabled { background-color: var(--color-boundary-lightly); }
    | 답글
    2025.03.03.월 12:34

    제목

    작성자 0 0
    게시물 내용을 불러오는 중이예요 - 미리보기 모드로 보는 중 -

    첨부파일 0

    댓글 0

    • |writer|

      작성자 |registeredDt|
      |content|
    ## { display: flex; flex-flow: column nowrap; overflow: hidden; } ## > nav.instant_appbar { position: absolute; } ## > nav.instant_appbar > .float_area { } ## > nav.instant_appbar > .float_area > .container_closer { margin-left: 6px; } @media all and (min-height: 700px) and (min-width: 740px) { ## { --top-edge: var(--basic-ui-inset-v-quarter); /* padding: var(--top-edge) 0; border-radius: var(--basic-ui-inset); box-shadow: 8px 16px 32px rgb(var(--cbdm) / 40%); */ } ## > nav.instant_appbar { padding-top: var(--top-edge); height: calc(var(--appbar-height) + var(--top-safe-pad) + var(--top-edge)); } } ## > .boardContentEdit { } ## > .boardContentEdit > * { } ## > .boardContentEdit > hr { } ## > .boardContentEdit > .titleLine { } ## > .boardContentEdit > .titleLine > input.title { width: 100%; width: -webkit-fill-available; width: stretch; min-width: 100%; box-sizing: border-box; padding: var(--basic-ui-inset-v) var(--basic-ui-inset-h); border-style: none; background-color: transparent; font-size: 1rem; line-height: 1.5em; } ## > .boardContentEdit > .titleLine > input.title:focus { outline-style: none; } ## > .boardContentEdit > .contentBlock { display: flex; flex-flow: column nowrap; height: fit-content; flex-grow: 1; align-items: stretch; } ## > .boardContentEdit > .contentBlock > .contentEditor { height: 0%; height: -webkit-fill-available; flex-grow: 1; } ## > .boardContentEdit > .contentBlock > .contentEditor > .toastui-editor-defaultUI { max-height: -webkit-fill-available; } @media only screen and (max-width: 480px) { ## > .boardContentEdit > .contentBlock > .contentEditor > .toastui-editor-defaultUI .toastui-editor-popup { margin-left: unset; } } ## > .boardContentEdit > .attachments { display: none; }