@charset "utf-8";

:root{
   /* var color : fluenC */
   --brand-color-1:#d93596; --brand-color-2:#754b9d; --brand-color-3:#967adc; --brand-color-4:#ac92ec; --brand-color-5:#f6eefa;
}

/*######################
Style Reset
########################*/
select,
input{font-size:15px;}

/* tag style */
.label-tag{display:inline-flex; padding:3px 4px 4px 4px; line-height:1; border-radius:4px; background-color:var(--darkgray-light); color:#fff; font-family:var(--font-default); font-size:10px; text-transform:none;}
.label-tag.beta{background-color:var(--pinkrose-light);}


/*####################
jQuery UI Datepicker
######################*/
.ui-datepicker{border:0;}


/*####################
Quill Editor
######################*/
.ql-container.ql-snow{background-color:#fff;}
.ql-container.ql-snow .ql-editor{padding:0; line-height:1.67;}
.ql-container.ql-snow .ql-editor .ql-video{width:100%; height:auto; aspect-ratio:16 / 9;}
.ql-container.ql-snow .ql-editor [class*='ql-indent']:not(.ql-direction-rtl){padding-right:2.4em;}
.ql-container.ql-snow .ql-editor img{vertical-align:middle;}


/*####################
Button Style : customize
######################*/
button[type=button].zoom-meeting::after{content:none;}
button[type=button].zoom-meeting>span{font-family:var(--font-poppins);}
button[type=button].zoom-meeting>span::before{content:''; margin:-4px 0 -4px -2px; width:24px; height:24px; background-image:url(../img/partners/zoom/meetings-icon.png); background-size:cover;}


/*####################
Layout
######################*/
body{display:flex; flex-direction:column; background-color:#fff; overflow:hidden;}
#wrap{flex-grow:1; position:relative; width:100%; height:100%;}
#header{display:flex; position:fixed; top:0; max-width:1280px; width:100%; height:100%;}
#container{display:flex; position:absolute; top:0; left:200px; right:0; bottom:0; overflow:hidden;}
#container.column{flex-direction:column;}

/* mobile menu icon */
.mobile-menu-icon{flex-shrink:0; display:none; grid-template-columns:20px; grid-template-rows:repeat(3, 2px); justify-content:center; align-content:center; gap:6px; width:48px; height:48px; cursor:pointer;}
.mobile-menu-icon::before,
.mobile-menu-icon::after{content:''; background-color:#333;}
.mobile-menu-icon>span{background-color:#333;}
/* mobile sidebar icon */
.mobile-sidebar-icon{flex-shrink:0; display:none; justify-content:center; align-items:center; width:40px; height:40px; cursor:pointer;}
.mobile-sidebar-icon>.material-symbols-rounded{color:#333; font-size:32px;}

/* tab navigation */
.tab-menu{display:flex; border-bottom:1px solid rgb(0 0 0 / 10%);}
.tab-menu>li{position:relative; margin:0 16px;}
.tab-menu>li:first-child{margin-left:0;}
.tab-menu>li>span{display:block; padding:12px 4px; color:#777;font-size:14px; font-weight:500; cursor:pointer;}
.tab-menu>li.selected>span{color:var(--blue-light); font-weight:500;}
.tab-menu>li.selected::before{content:''; position:absolute; bottom:-1px; left:0; right:0; border-bottom:2px solid var(--blue-light);}
.tab-menu>li.selected::after{content:''; position:absolute; top:0; bottom:0; left:0; right:0;}

/* user setting */
.user-info{flex-shrink:0; display:none; align-items:center; gap:8px; position:relative; z-index:10; padding:0 8px; height:40px; border-radius:8px; cursor:pointer;}
.user-info>.profile-thumb>span{margin:0; width:36px; height:36px; border-radius:50%; overflow:hidden;}
.user-info>.profile-thumb>span>img{width:100%; height:100%;}
.user-info>span{font-family:var(--font-poppins); font-size:13px;}
.user-info::after{content:''; width:8px; height:8px; border-left:2px solid rgb(0 0 0 / 20%); border-bottom:2px solid rgb(0 0 0 / 20%); transform:rotate(-45deg);}
.user-info.selected::after{border-color:var(--bluejeans-normal);}
.detail-page-header .user-info{display:flex;}

/* thumb style */
[class*="thumb"]>span::before{background:var(--lightgray-normal); opacity:0.5;}
[class*="thumb"].male>span::before{background:var(--bluejeans-light);}
[class*="thumb"].female>span::before{background:var(--pinkrose-light);}


/* select style */
select:is(#completed-class-list, #pay-year, #target-day, #affiliated-branch, #coupon-status){padding:0 0 2px 8px; width:auto; border:8px solid var(--darkgray-light); border-radius:18px; background-color:var(--darkgray-light); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23ffffff'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E"); color:#fff;}


/*####################
Navigation
######################*/
.nav-bar{flex-shrink:0; width:200px; height:100%; background-color:#fff;}
.nav-control{display:flex; flex-direction:column; position:relative; height:100%;}
.nav-mh{display:flex; justify-content:center; gap:4px; position:relative; z-index:2; padding:32px 8px;}
.nav-mh>.logo{width:100%; height:40px; background-image:url(../../../assets/img/logo-fluenc.png); background-repeat:no-repeat; background-size:contain; background-position:center;}
.nav-mh>h3{display:none; padding:0 8px; color:#333; font-family:var(--font-poppins); font-size:15px; font-weight:500; white-space:nowrap;}
.nav-items{flex-grow:1; display:flex; flex-direction:column; gap:8px; position:relative; z-index:2; padding:16px 0;}
.nav-items>li{display:flex; justify-content:center; position:relative; z-index:2; margin:0 16px;}
.nav-items>li>a{flex-grow:1; display:flex; flex-direction:row; justify-content:flex-start; align-items:center; column-gap:8px; position:relative; padding:0 0 2px 8px; width:100%; height:40px; line-height:1; border-radius:8px; color:#555; font-family:var(--font-poppins); font-size:13px; text-transform:capitalize;}
.nav-items>li>a:hover{background-color:#fff7ff; color:#555;}
.nav-items>li.selected>a{background-color:var(--dark-lavender); color:#fff;}
.nav-items>li.selected>a>i.material-symbols-rounded{font-variation-settings:var(--symbols-basic);}
.nav-contents{display:none; padding-right:32px; height:100%; flex-grow:1;}


/*####################
contents page
######################*/
.contents-page{display:flex; position:absolute; top:0; bottom:0; left:0; right:0; background-color:#f5f7f9;}

/* detail contents */
.detail-page{flex-grow:1; display:flex; flex-direction:column; position:relative; width:100%; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.detail-page-wrapper{display:flex; flex-direction:column;  position:relative; width:100%;}
.detail-page-header{flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; position:sticky; z-index:2; top:0; gap:16px; padding-top:32px; min-height:80px; background-color:#f5f7f9;}
/* detail contents : header component */
.header-title{display:flex; justify-content:space-between; align-items:center; gap:4px; position:relative; padding:0 40px; max-width:1200px; min-height:40px; width:100%;}
.header-title>h3{flex-grow:1; color:#333; font-family:var(--font-poppins); font-size:24px; font-weight:500; white-space:nowrap;}
/* detail contents : header navi */
.subnav-bar{display:flex; align-items:center; position:relative; padding:0 40px; max-width:1200px; width:100%; overflow-x:auto;}
.subnav-items{flex-grow:1; display:flex; gap:32px;}
.subnav-items>li>a{display:flex; align-items:center; gap:8px; padding:0 4px; min-height:40px; border-bottom:2px solid transparent; color:#333; font-size:16px; font-weight:500; white-space:nowrap;}
.subnav-items>li.selected>a{border-bottom-color:var(--dark-lavender); color:var(--dark-lavender);}
.header-title+.view-bar{margin:0; width:auto;}
/* detail contents : week navi */
.weeknav-bar{display:flex; align-items:flex-end; gap:32px; position:relative; padding:0 40px; max-width:1200px; width:100%; overflow-x:auto;}
.weeknav-controls{display:flex; flex-direction:column; gap:8px;}
.weeknav-controls>h5{padding:0 4px; color:#555; font-size:15px; font-weight:300; text-align:center;}
.weeknav-controls>.function{display:flex; gap:4px;}
.weeknav-controls>.function button[type=button]>i.material-symbols-rounded{margin:4px;}
.weeknav-items{display:flex; align-items:center; gap:16px;}
.weeknav-items>li{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; min-width:48px; line-height:1; border-radius:8px; cursor:pointer;}
.weeknav-items>li::before{content:attr(data-weekday); color:#777; font-family:var(--font-poppins); font-size:10px; text-transform:uppercase;}
.weeknav-items>li[data-weekday="sun"]::before{color:var(--bittersweet-light);}
.weeknav-items>li[data-weekday="sat"]::before{color:var(--bluejeans-light);}
.weeknav-items>li>b{color:#333; font-size:24px; font-weight:500; white-space:nowrap;}
.weeknav-items>li[data-weekday="today"]::before,
.weeknav-items>li[data-weekday="today"]>b{color:var(--vivid-pink);}
.weeknav-items>li.selected{background-color:var(--lavender-normal);}
.weeknav-items>li.selected::before,
.weeknav-items>li.selected>b{color:#fff;}
.header-title+.weeknav-bar{padding-top:8px; padding-bottom:8px;}
/* detail contents : header toolbar filter */
.header-toolbar-filter{flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; row-gap:16px;}
.header-toolbar-filter>ul{display:flex; flex-wrap:wrap; gap:4px;}
:is(#portfolio, #dreamtree) .header-toolbar-filter>ul{padding:0 8px;}
.header-toolbar-filter>ul>li{cursor:pointer;}
.header-toolbar-filter>ul>li>span{display:flex; align-items:center; gap:4px; padding:0 12px 2px 12px; height:32px; box-sizing:border-box; border-radius:16px; border:1px solid #e5e5e5; background:#fff; color:#999; font-size:13px;}
.header-toolbar-filter>ul>li.checked>span{border-color:var(--sunflower-normal); background-color:var(--sunflower-normal); color:#fff;}
.header-toolbar-filter>ul>li>span::before{content:none; margin:0 2px 0 -2px; width:9px; height:6px; border-bottom:2px solid #ccc; border-left:2px solid #ccc; transform: rotate(-45deg); transform-origin:top center;}
.header-toolbar-filter>ul>li.checked>span::before{border-bottom:2px solid #fff; border-left:2px solid #fff;}
.header-toolbar-option{display:flex; padding:0 8px}
.header-toolbar-option>select.sort-option{border-radius:4px;}

/* detail contents : component */
.detail-page-component{flex-grow:1; display:flex; flex-direction:column; align-items:center; gap:40px; padding:24px 0; position:relative; z-index:1; background-color:#f5f7f9; overflow:auto;}
.detail-page-component .content-wrapper{flex-grow:1; overflow-x:hidden; overflow-y:auto;}
.detail-page-component .content-wrapper:empty{display:flex; flex-direction:column; align-items:center;}
.detail-page-component .content-wrapper:empty::before{content:'해당일에 제출된 과제가 없습니다.'; margin:80px; font-family:var(--font-nanumsquare); font-size:21px;}
.detail-page-component .content-section{padding:0 40px;}
.detail-page-component .content-section~.content-section{margin-top:32px; margin-bottom:32px; padding-top:24px; border-top:1px dashed rgb(0 0 0 / 10%);}
/* section */
.section{display:flex; flex-direction:column; gap:16px; padding:0 40px; max-width:1200px; width:100%;}
.section-header{display:flex; align-items:flex-end; gap:16px; padding:0 4px; font-family:var(--font-poppins);}
.section-header.column{flex-direction:column; align-items:baseline; gap:8px;}
.section-header.align-center{justify-content:center;}
.section-header>h4{color:#333; font-family:var(--font-nanumsquare); font-size:18px; font-weight:500;}
.section-header>h5{color:#777; font-size:15px; font-weight:500;}
.section-header>:is(h4, h5)>span{font-weight:400;}
.section-header>span{color:#777; font-size:13px;}
.section-header>span.date-info{padding-left:16px; border-left:1px solid #ccc;}
.section-header>.function{flex-grow:1; display:flex; justify-content:flex-end;}
.section-items{display:flex; flex-direction:column; gap:16px; position:relative;}
.section-items:empty{align-items:center; gap:4px; padding:40px 0; border-radius:16px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); white-space:pre-line;}
.section-items[data-title]:empty::before{content:attr(data-title); color:var(--dark-lavender); font-family:var(--font-nanumsquare); font-size:18px; white-space:pre-line; text-align:center;}
.section-items[data-empty]:empty::after{content:attr(data-empty); color:#777; font-family:var(--font-nanumsquare); font-size:18px;}
.section-items[data-title]:empty::after{font-size:15px;}
.section-items.zero-gap{gap:0;}
.section-items>h6{display:flex; align-items:center; gap:4px; color:#333; font-family:var(--font-nanumsquareR); font-size:15px; font-weight:500;}
.section-items>h6.emphasis{color:var(--vivid-pink);}
.modal-layer.setting .section{padding:0 24px;}

/* banner module */
.banner-module{display:flex; align-items:center; gap:32px; padding:0 32px; max-height:96px; border-radius:16px; overflow:hidden;}
.banner-module.link{cursor:pointer;}
.banner-module.blue{background-color:var(--blue-light);}
.banner-module.lavender{background-color:var(--lavender-normal);}
.banner-module-picture{flex-shrink:0; display:flex; align-self:flex-start; width:96px;}
.banner-module-picture>img{width:100%;}
.banner-module-text{flex-grow:1; display:flex; flex-direction:column; gap:4px; padding:16px 0;}
.banner-module-text>h6{color:#fff; font-family:var(--font-nanumsquareN); font-size:18px; font-weight:500;}
.banner-module-text>p{color:rgb(255 255 255 / 80%); font-size:13px; word-break:keep-all;}
.banner-module-btn{flex-shrink:0; display:flex;}

/* notice module */
.notice-module{display:flex; flex-direction:column; gap:4px;}
.notice-module-title{display:flex; gap:4px;}
.notice-module-title>h6{display:flex; gap:2px; align-items:center; color:#333; font-family:var(--font-nanumsquareR); font-size:13px;}
.notice-module-title>h6>i.material-symbols-rounded{flex-shrink:0; width:18px; height:18px; font-size:18px;}
.notice-module-body{display:flex; gap:4px; margin-left:20px;}
.notice-module-body>p{display:flex; align-items:center; gap:4px; color:#333; font-family:var(--font-nanumsquareR); font-weight:500;}
.notice-module-body>p.emphasis{color:var(--vivid-pink);}


/* step by step */
ul.progress-step{display:flex; justify-content:center; position:relative; padding:16px 0;}
ul.progress-step>li{position:relative; padding:0 10px; min-width:80px; color:#777; text-align:center;}
ul.progress-step>li::before{content:''; position:relative; z-index:2; display:inline-block; width:12px; height:12px; border-radius:100%; background-color:#d5d5d5;}
ul.progress-step>li>span{display:block; margin-top:5px; text-align:center; white-space:nowrap;}
ul.progress-step>li>span::before{content:''; position:absolute; z-index:1; top:6px; left:0; right:50%; border-top:1px dotted #d5d5d5;}
ul.progress-step>li>span::after{content:''; position:absolute; z-index:1; top:6px; left:50%; right:0; border-top:1px dotted #d5d5d5;}
ul.progress-step>li:first-child>span::before{content:none;}
ul.progress-step>li:last-child>span::after{content:none;}
ul.progress-step>li.selected{color:var(--vivid-pink); font-weight:600;}
ul.progress-step>li.selected::before{background-color:var(--vivid-pink);}
ul.progress-step>li.selected::after{content:''; display:block; position:absolute; z-index:3; top:0; left:50%; margin-left:-6px; width:12px; height:12px; box-sizing:border-box; border-radius:100%; border:1px solid var(--vivid-pink); -webkit-animation:activestep 1.5s infinite ease-in-out both; animation:activestep 1.5s infinite ease-in-out both;}
/* animated active step */
@-webkit-keyframes activestep {
  0% { -webkit-transform: scale(1.0);  transform: scale(1.0); opacity:1;}
  100% { -webkit-transform: scale(1.8); transform: scale(1.8); opacity:0;}
}
@keyframes activestep {
  0% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity:1;}
  100% { -webkit-transform: scale(1.8); transform: scale(1.8); opacity:0;}
}
ul.step>li.completed::before{background-color:#153e69;}



/*####################
Modal Layer
######################*/
.modal-layer.full{background-color:#f5f5f5;}
.modal-layer.full .modalwrap-header h1{color:rgb(0 0 0 / 72%);}
.modal-layer.full .modalwrap-header .function>i.material-symbols-rounded{color:rgb(0 0 0 / 50%);}
.modal-layer.full .modalwrap-container{overflow:auto;}
/* modal form & page */
.modal-layer.full:is(.form, .page){display:block;}
.modal-layer.full:is(.form, .page) .modalwrap-header{justify-content:center; padding:12px 8px; outline:1px solid #e5e5e5; background-color:#fff;}
.modal-layer.full:is(.form, .page) .header-wrapper{display:flex; justify-content:center; align-items:center; gap:8px; position:relative; max-width:1024px; width:100%;}
.modal-layer.full:is(.form, .page) .header-wrapper .logo>img{width:100%;}
.modal-layer.full:is(.form, .page) .header-wrapper .title-text{line-height:1; color:#333; font-family:var(--font-poppins); font-size:18px; font-weight:500; white-space:nowrap; letter-spacing:-0.5px; cursor:default;}
/* modal form */
.modal-layer.full.form .header-wrapper .logo{display:flex; width:84px;}
.modal-layer.full.form .header-wrapper .function{position:absolute; left:0;}
.modal-layer.full.form .modalwrap-content{margin:0 auto; padding:24px 0; max-width:640px; width:100%;}
.modal-layer.full.form .modalwrap-content .section{gap:16px; padding:0 16px;}
/* modal page */
.modal-layer.full.page .header-wrapper .logo{flex-shrink:0; display:flex; margin-left:4px; width:112px;}
.modal-layer.full.page .header-wrapper .function{flex-grow:0; flex-shrink:0; margin-right:8px;}
.modal-layer.full.page .header-wrapper .title-text{flex-grow:1;}
.modal-layer.full.page .header-wrapper .profile-list{flex-shrink:0; align-items:center; gap:8px; padding:0 8px;}
.modal-layer.full.page .header-wrapper .profile-list-item{flex-grow:1; flex-direction:row; gap:12px; padding:0; cursor:default;}
.modal-layer.full.page .header-wrapper .profile-thumb>span{width:36px !important;}
.modal-layer.full.page .header-wrapper .profile-name{align-items:flex-start !important;}
.modal-layer.full.page .header-wrapper .profile-name>h4{font-size:13px;}
.modal-layer.full.page .header-wrapper .profile-name>span{font-size:11px;}

:is(#change-day, #profile-edit, #delivery-address, #card-management).modal-layer.full.form .modalwrap-content{max-width:512px;}
/* modal page */
.modal-layer.full.page .header-wrapper{max-width:1120px;}
.modal-layer.full.page .modalwrap-container{align-items:center;}
body.opened .modal-layer.full.page .modalwrap-container{overflow:hidden;}
body.opened .dojDBG{top:64px; bottom:auto;}
.modal-layer.full.page .modalwrap-content.row{flex-direction:row; align-items:flex-start; justify-content:center; gap:16px; max-width:none;}



/*####################
Class Card
######################*/
.class-card{display:flex; flex-direction:column; padding:1px; padding-left:0; border-radius:16px; border-style:solid; border-left-width:8px; border-color:var(--dark-lavender); background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 5%);}
.class-card[data-brand="fluenc"]{border-color:var(--dark-lavender);}
.class-card[data-brand="jls"]{border-color:var(--bluejeans-normal);}
.class-card.active{padding:0; border-top-width:1px; border-bottom-width:1px; border-right-width:1px;}
.active-mode .class-card:not(.active, :hover){opacity:0.5;}
#completed-class .class-card{border-left-color:var(--darkgray-light);}
.class-info{display:flex; flex-wrap:wrap; align-items:center; gap:24px 16px; padding:16px 24px;}
#teacher-class .class-info{grid-template-columns:72px 1fr auto;}
.class-info>div{display:flex; font-family:var(--font-poppins);}
.class-info>.profile-thumb>span{width:64px; border-radius:50%;}
.class-time{flex-direction:column; align-items:center; gap:4px; font-size:13px;}
.class-time>span{color:#333; font-size:15px;}
.class-time>em{color:#777; font-size:11px; font-style:normal;}
.class-time+:is(.profile-thumb, .class-member){padding-left:23px; border-left:1px solid rgb(0 0 0 / 10%);}
.class-member{flex-direction:column; align-items:flex-start; gap:4px; font-size:18px;}
.class-member>b{padding:0 4px; color:#333; font-weight:500;}
.class-member>span{display:flex; align-items:center; gap:8px; margin-right:4px; color:#555; font-size:12px;}
.class-info .class-detail-info{flex-grow:1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 24px;}
.class-detail-info>.class-member{grid-row:1 / 3;}
.class-date{display:flex; align-items:center; gap:2px; color:#777; font-family:var(--font-poppins); font-size:13px; font-style:normal;}
.class-date>h5{flex-shrink:0; display:flex; margin-right:4px; font-family:var(--font-nanumsquareR); font-size:14px; font-weight:600;}
.class-date>i{flex-shrink:0; margin-bottom:2px; font-variation-settings:var(--symbols-basic);}
.class-date>span{padding-right:4px; line-height:1; white-space:nowrap;}
.class-date>em{flex-shrink:0; padding:1px 6px 0 6px; border-radius:8px; background-color:#888; color:#fff; font-size:10px; font-style:normal;}
.group-member{display:flex; align-items:center; gap:4px; font-family:var(--font-poppins); font-size:16px;}
.group-member>b{padding:0 4px; color:#333; font-weight:500;}
.group-member>.profile-thumb{width:36px;}
.group-member>.profile-thumb~.profile-thumb{margin-left:-12px;}
.group-member>.profile-thumb>span{border:2px solid #fff; background-color:#fff;}
/* class Lesson info */
.lesson-info { display: flex;flex-direction: column;align-items: center;justify-content: center;font-family: sans-serif;color: #666;width:60px;}
.lesson-info>span{font-size: 16px; font-weight: 200; margin-bottom: 4px;}
.lesson-info>b{font-size: 24px;font-weight: 400;}
/* class Type button */
.class-lesson-type{justify-self:flex-end; align-items:flex-start; gap:16px;}
.lesson-btn-group{display:flex; flex-direction:column; position:relative; padding-bottom:4px;}
.lesson-btn-group .lesson-deadline{position:absolute; top:100%; color:#777; font-size:11px; letter-spacing:-0.2px; white-space:nowrap;}
.lesson-btn{display:flex; align-items:center; gap:6px; position:relative; padding:8px 12px 8px 8px; min-height:48px; width:96px; line-height:1; border-radius:16px; border:1px solid #e5e5e5; word-break:keep-all;}
.lesson-btn[onclick]{cursor:pointer;}
.lesson-btn>i.material-symbols-rounded{flex-shrink:0; display:flex; justify-content:center; align-items:center; width:28px; height:28px; border-radius:50%; background-color:var(--darkgray-light); color:#fff; font-variation-settings:var(--symbols-basic); font-size:20px;}
.lesson-btn.live>i{background-color:var(--vivid-pink);}
.lesson-btn.management{width:130px;}
.lesson-status{display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:var(--font-nanumsquareR); font-size:24px; font-weight:300;}
.lesson-status::after{content:'READY'; display:block; color:var(--sunflower-normal); font-family:var(--font-nanumsquareR); font-size:10px; font-weight:bold;}
.lesson-status[data-status="progress"]::after{content:'PROGRESS'; color:var(--bittersweet-normal);}
.lesson-status[data-status="done"]::after{content:'DONE'; color:var(--mint-normal);}
/* teacher's comments */
.teacher-comments{display:flex; flex-direction:column; gap:8px; padding:16px 24px; border-top:1px dashed rgb(0 0 0 / 10%);}
.comments-header{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.comments-header>h5{line-height:1; color:#333; font-family:var(--font-poppins); font-size:15px; font-weight:500;}
.comments-header>h5>b{color:var(--lavender-normal); font-weight:600;}
.comments-text{padding-bottom:8px;}
.comments-text>p{color:#555; font-family:var(--font-poppins);}
/* mission */
.mission-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); justify-items:stretch; gap:16px; color:#333;}
.mission-card{display:flex; flex-direction:column; position:relative; cursor:pointer;}
.mission-card-thumb{border-radius:8px 8px 0 0; border:2px solid var(--darkgray-light); border-bottom:0;}
.mission-card-thumb::before{content:none; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:8px 8px 0 0; border:1px solid rgb(0 0 0 / 10%);}
.mission-card-name{flex-grow:1; display:flex; justify-content:center; align-items:center; position:relative; margin-top:-1px; padding:8px 4px; line-height:1; border-radius:0 0 8px 8px; background-color:var(--darkgray-light); color:#fff; font-family:var(--font-poppins); font-size:13px;}
.mission-card>i{position:absolute; z-index:2; top:0; right:0; color:rgb(0 0 0 / 30%); font-size:32px; font-variation-settings:var(--symbols-basic);}
.mission-card[data-status="1"]>i{ color:var(--grass-normal); font-variation-settings:var(--symbols-basic); text-shadow:0 0 2px white;}

/* class management */
.class-management{display:flex; flex-direction:column; padding:16px 24px; padding-top:12px !important; border-top:1px dashed rgb(0 0 0 / 10%);}
.class-card.active .class-management{padding-bottom:0;}
.management-header{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;}
.management-header>h5{flex-grow:1; color:#333; font-family:var(--font-poppins); font-size:15px; font-weight:400;}
.management-header>h5>b{color:var(--lavender-normal); font-weight:600;}
.management-nav{display:flex; gap:4px;}
.management-nav button{border:1px solid transparent;}
[data-brand="fluenc"] .management-nav button.selected{border-color:var(--lavender-normal); color:var(--lavender-normal);}
[data-brand="jls"] .management-nav button.selected{border-color:var(--bluejeans-light); color:var(--bluejeans-light);}
.management-body{display:flex; flex-direction:column; gap:16px;}
/* class management : teaching guide */
.teaching-guide{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.teaching-guide-header{display:flex; align-items:center;}
.teaching-guide-header>h6{align-self:flex-start; padding:8px 16px; border-radius:16px; color:#fff; font-family:var(--font-nanumsquareR); font-size:13px; font-weight:500;}
[data-brand="fluenc"] .teaching-guide-header>h6{background-color:var(--lavender-light);}
[data-brand="jls"] .teaching-guide-header>h6{background-color:var(--bluejeans-light);}
.teaching-doc{flex-grow:1; display:flex; flex-wrap:wrap; gap:4px; position:relative;}
.teaching-doc>a{display:flex; align-items:center; padding:3px 12px 4px 8px; border-radius:16px; letter-spacing:-0.4px; opacity:0.8;}
.teaching-doc>a:hover{opacity:1;}
[data-brand="fluenc"] .teaching-doc>a{border:1px dashed var(--lavender-light); color:var(--lavender-light);}
[data-brand="jls"] .teaching-doc>a{border:1px dashed var(--bluejeans-light);}
.teaching-doc>a>i.material-symbols-rounded{flex-shrink:0; width:18px; height:18px; font-size:18px;}
.teaching-guide-list{display:flex; flex-direction:column; border-radius:0 0 4px 4px;}
.teaching-guide-list:empty::after{content:attr(data-empty); flex-grow:1; display:flex; justify-content:center; padding:32px 0; color:#777; font-size:15px; white-space:pre-wrap;}
.teaching-guide-list>li{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px; padding:8px 0;}
.teaching-guide-list>li~li{border-top:1px dotted rgb(0 0 0 / 10%);}
.teaching-guide-list>li>p{flex-grow:1; padding-left:8px;}
.teaching-guide-list>li>p>b{font-weight:600;}
.teaching-tag{display:flex; gap:2px;}
.teaching-tag :is(em, span):not(:empty){padding:2px 6px; border-radius:10px; color:#fff; font-family:var(--font-small); font-size:11px; font-style:normal; letter-spacing:-0.2px;}
.teaching-tag em:not(:empty){background-color:var(--bluejeans-normal);}
.teaching-tag span:not(:empty){background-color:rgb(0 0 0 / 24%);}
.teaching-tag span:not(:empty):after{content:'min'; font-size:10px; font-weight:300;}
/* class management : task status */
.task-status{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.task-status-header{display:flex; align-items:center;}
.task-status-list{display:flex; flex-direction:column;}
.task-status-list>:is(dt, dd){display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:4px 0;}
.task-status-list.over-five>:is(dt, dd){grid-template-columns:0.5fr 1fr;}
.task-status-list>dt{margin-bottom:2px; padding:8px 0; border-radius:8px; border:1px solid #eee; background-color:#f7f7f7;}
.task-status-list>dd~dd{border-top:1px dotted rgb(0 0 0 / 10%);}
.task-status-list>:is(dt, dd)>p{padding-left:8px; color:#555; font-family:var(--font-nanumsquareR);}
.students-target{display:flex; justify-content:space-around; align-items:center;}
.students-target>span{display:flex; justify-content:center; align-items:center; color:#777;}
.task-status-list>dt .students-target>span{width:24px; font-family:var(--font-nanumsquareR); font-size:11px; letter-spacing:-0.4px;}
.students-target>[data-task-status="1"]>i.material-symbols-rounded{color:var(--grass-normal); font-variation-settings:var(--symbols-basic);}
/* class management : review */
.teacher-review{display:flex; flex-direction:column; gap:8px; position:relative; margin-top:16px;}
.teacher-review-header{display:flex; align-items:center; gap:8px; position:absolute; inset:0 0 auto 0; padding:12px;}
.teacher-info{display:flex; align-items:center; gap:8px;}
.teacher-info .profile-thumb>span{width:32px;}
.teacher-info b{font-family:var(--font-poppins); font-weight:400;}
.review-function{flex-grow:1; display:flex; justify-content:flex-end; align-items:center; gap:8px; position:relative;}
.review-function>span{color:#777;}
.review-function>button{background-color:transparent !important;}
[data-brand="fluenc"] .review-function>button.selected{background-color:rgb(150 122 220 / 32%) !important;}
[data-brand="jls"] .review-function>button.selected{background-color:rgb(74 137 220 / 32%) !important;}
.teacher-review-input{display:flex; flex-direction:column; padding:16px; border-radius:8px; border:1px solid #ddd; color:#555; font-family:var(--font-poppins); outline:0; resize:none; overflow-y:hidden;}
.edit-mode .teacher-review-input{padding-bottom:56px;}
.teacher-review[data-review-status="completed"] .teacher-review-input{padding-top:56px;}
[data-brand="fluenc"] .edit-mode .teacher-review-input{border-color:var(--lavender-light);}
[data-brand="jls"] .edit-mode .teacher-review-input{border-color:var(--bluejeans-light);}
.update-review{display:flex; justify-content:flex-end; align-items:center; gap:8px; position:absolute; inset:auto 0 0 0; padding:8px; pointer-events:none;}
.update-review button{pointer-events:all;}

/* collapse button */
.collapse-card{display:flex; justify-content:center;}
.collapse-card .close-btn{display:flex; align-items:center; height:20px; border-radius:8px 8px 0 0; color:#fff;}
.collapse-card .close-btn>i.material-symbols-rounded{padding:0 16px; cursor:pointer;}
[data-brand="fluenc"] .collapse-card .close-btn{background-color:var(--dark-lavender);}
[data-brand="jls"] .collapse-card .close-btn{background-color:var(--bluejeans-normal);}

/* more button */
.more-btn{display:flex; flex-direction:column; align-items:center; gap:16px; margin:24px 0;}
.more-btn>p{color:#888; font-size:15px;}


/*###############
More Menu
#################*/
#more-menu-container{position:absolute; z-index:10000; inset:0 0 auto auto;}
.more-menu-wrapper{display:flex; justify-content:center; align-items:flex-start;}
.more-menu-component{display:flex; flex-direction:column; padding:8px; border-radius:4px; background-color:#fff; box-shadow:0 4px 16px 8px rgb(0 0 0 / 10%);}
.more-menu-item{display:flex; align-items:center; gap:4px; padding:7px 16px 7px 6px; line-height:1; border-radius:4px; color:#333; font-family:var(--font-default); font-size:12px; cursor:pointer;}
.more-menu-item:hover{background-color:rgb(0 0 0 / 8%);}
.more-menu-item>i{font-variation-settings:var(--symbols-line);}


/*####################
eLearning Content
######################*/
.subject-info{display:flex; align-items:center;}
.subject-info>h6{padding:8px 16px; border-radius:16px; color:#fff; font-family:var(--font-nanumsquareR); font-size:13px; font-weight:500; background-color:var(--brand-color-3);}
.elearning-content{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); justify-items:stretch; align-items:stretch; gap:24px;}
.elearning-items{display:flex; flex-direction:column; position:relative; border-radius:16px; background-color:#fff; box-shadow:inset 0 0 0 1px rgb(0 0 0 / 10%), inset 0 -0.4em 0 rgb(0 0 0 / 12%), 0 0.25em 0.25em rgb(0 0 0 / 5%); cursor:pointer;}
.elearning-items:is([data-learning-type="upload"], [data-learning-type="dreamtree"], [data-learning-type="test-contents"]){cursor:default;}
.elearning-items::before{content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; border-radius:16px; background:linear-gradient(160deg, rgb(0 0 0 / 0%) 20%,  rgb(150 122 220 / 16%)); overflow:hidden;}
.elearning-items>h5{flex-grow:1; display:flex; gap:2px; position:relative; z-index:3; margin-top:-8px; padding:0 24px 0 16px; color:var(--dark-lavender); font-family:var(--font-nanumsquareR); font-size:16px; word-break:keep-all;}
.elearning-items>h5>i.material-symbols-rounded{flex-shrink:0; margin-top:-8px; width:32px; height:32px; font-size:32px; opacity:0.9;}
.elearning-category{display:flex; justify-content:space-between; gap:4px; position:relative; z-index:3; color:var(--dark-lavender); font-family:var(--font-poppins); font-weight:400; font-size:14px;}
.elearning-category>span{flex-grow:1;}
.elearning-category>i.material-symbols-rounded.check{margin:2px 2px 0 0; width:30px; height:30px; color:#000; font-size:30px; font-variation-settings:var(--symbols-basic); opacity:0.15;}
.elearning-content{counter-reset:elearning-counter;}
.elearning-items .elearning-category::before{content:counter(elearning-counter); counter-increment:elearning-counter; display:flex; justify-content:center; align-items:center; width:20px; height:20px; border-radius:12px; background-color:var(--dark-lavender); color:#fff; font-family:var(--font-nanumsquareR); font-size:12px;}
.elearning-items[data-status="completed"] i.material-symbols-rounded.check{color:var(--mint-normal); opacity:1;}
.elearning-info{position:relative; z-index:3; padding:8px 16px 16px 16px;}
.elearning-info .function{display:flex; justify-content:flex-end; align-items:center; gap:8px;}
/* theme style */


/*####################
info page
######################*/
.info-page{visibility:hidden; position:fixed; z-index:20; top:0; max-width:1080px; width:calc(100% - 200px); height:100%; background-color:#f4f6f8; -webkit-transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.info-page.expand-ani{visibility:visible;}
.info-page-wrapper{display:flex; position:relative; margin:0 auto; width:100%; height:100%; opacity:0; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; transition:opacity 1s;}
.expand-ani .info-page-wrapper{border-left:1px solid #e5e5e5; opacity:1;}
.info-page-container{flex-grow:1; display:flex; flex-direction:column; overflow:auto;}
.info-page-header{display:flex; align-items:center; gap:16px; padding-top:24px; width:100%;}
.info-page-header .header-title>h3{font-size:20px; font-weight:400;}
.info-page-header .function{display:flex;}
.info-page-header .function>i{width:32px; height:32px; color:#555; font-size:32px; cursor:pointer;}
.info-page .close{position:absolute; top:0; right:0; margin:10px; transform:scale(0.75); transform-origin:top right;}
.info-page-content{flex-grow:1; display:flex; flex-direction:column; gap:40px; width:100%; padding:8px 0;}

.info-page-content .guide-info{margin:32px 0;}
.info-page-content .guide-info p{margin:4px 16px; color:rgb(255 255 255 / 80%);}
.info-page-content .tab-menu{margin:0 64px;}
.info-page-content .content-wrapper{display:flex; flex-direction:column; padding:24px 40px;}
.info-page-content .content-wrapper .access-list{margin:0 0 0 32px;}


/*####################
Course List
######################*/
.course-list{display:flex; flex-direction:column; gap:40px 24px;}
.course-list.view-list{display:flex; flex-direction:column;}
.course-list.view-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));}
.course-list-item{display:flex; flex-direction:row; gap:8px; position:relative; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.course-item-thumb{flex-shrink:0; align-self:flex-start; display:flex; justify-content:center; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
.course-list-item:not(:hover) .course-item-thumb::after{content:''; position:absolute; inset:0 0 0 0; border-radius:8px; border:1px solid rgb(0 0 0 / 5%);}
.course-item-thumb>span{justify-content:center; width:240px; border-radius:8px; aspect-ratio:16 / 9;}
.view-list .course-item-thumb>span{width:320px;}
.course-item-thumb.ratio>span{width:200px; height:136px;}
.course-item-thumb.ratio>span>img{width:auto;}
.course-label{display:flex; position:absolute; z-index:3; top:0; left:0;}
.course-label>:is(span, em){padding:3px 6px 4px 6px;  color:rgb(255 255 255 / 80%); font-weight:500; font-style:normal;}
.course-label>:is(span, em):empty{display:none;}
[data-brand="fluenc"] .course-label>span{background-color:var(--dark-lavender);}
[data-brand="jls"] .course-label>span{background-color:var(--bluejeans-normal);}
.course-label>em{color:rgb(255 255 255 / 80%);}
[data-course="kindergarten"] .course-label>em{background-color:var(--sunflower-normal);}
[data-course="phonics"] .course-label>em{background-color:var(--bittersweet-light);}
.course-label>*:first-child{padding-left:8px;}
.course-label>*:last-child{border-radius:0 0 8px 0;}
.course-item-info{flex-grow:1; display:flex; flex-direction:column; gap:8px; position:relative; padding:8px 4px;}
.course-item-info .title-text{flex-direction:column; align-items:flex-start; gap:0 4px;}
.modal-layer.full.form .course-item-info>.title-text{margin:0;}
.course-item-info>.title-text>h6{color:#000; font-family:var(--font-nanumsquareR); font-size:17px; font-weight:500; letter-spacing:-0.5px;}
.course-item-info>.title-text>p{color:#555; font-family:var(--font-nanumsquareR); font-size:14px; font-weight:500;}
.course-item-info>div{display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.course-item-info>.partner>:is(span, em){color:#777; font-size:14px; font-style:normal;}
.course-item-info>.partner>em{padding:1px 5px 3px 5px; border-radius:4px; background-color:var(--sunflower-normal); color:rgb(255 255 255 / 80%); font-size:11px; font-weight:500;}
.course-item-info>.price{gap:8px;}
.course-item-info>.price>em{width:100%; color:#999; font-size:14px; font-weight:300; text-decoration:line-through;}
.course-item-info>.price>span{color:var(--blue-normal); font-size:15px; font-weight:600;}
.course-item-info>.price>b{color:#333; font-size:16px; font-weight:600;}
.course-item-info>.tags{flex-grow:1; align-items:flex-start;}
.course-item-info>.tags>:is(span, em){padding:3px 6px 4px 6px; border-radius:4px; background-color:rgb(0 0 0 / 10%); color:#555; font-size:11px; font-weight:500; font-style:normal;}
.course-item-info>.tags>em{background-color:rgb(117 75 157 / 10%); color:var(--dark-lavender); font-weight:600;}
.course-item-info>.tags>span.kindergarten{background-color:var(--sunflower-normal); color:rgb(255 255 255 / 80%); font-size:11px; font-weight:500;}
.course-item-info>.tags>span.fluenc{background-color:var(--dark-lavender); color:rgb(255 255 255 / 80%); font-size:11px; font-weight:500;}
.course-item-info>.apply{gap:8px;}
.course-item-info>.apply>span{color:var(--dark-lavender);}
.course-detail-info{display:flex; flex-direction:column; gap:4px; margin-top:8px;}
.course-detail-info>li{display:flex; gap:4px; font-family:var(--font-nanumsquareR); font-size:13px;}
.course-detail-info>li em{flex-shrink:0; width:72px; color:#555; font-style:normal;}
.course-detail-info>li span{flex-grow:1;}
.course-detail-info>li span>b{color:var(--blue-normal);}

/* sale status */
.course-list-item[data-sale-status] .course-item-thumb>span::after{display:flex; justify-content:center; align-items:center; position:absolute; z-index:2; background-color:rgb(0 0 0 / 56%); color:#fff; font-family:var(--font-nanumsquareR); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.course-list-item:is([data-sale-status="prepare"], [data-sale-status="ended"],[data-sale-status="soldout"] ) .course-item-thumb>span::after{left:0; right:0; top:0; bottom:0; border-radius:8px; font-size:24px}
.course-list-item[data-sale-status="prepare"] .course-item-thumb>span::after{content:'판매예정';}
.course-list-item[data-sale-status="ended"] .course-item-thumb>span::after{content:'판매종료';}
.course-list-item[data-sale-status="limitedstock"] .course-item-thumb>span::after{content:'품절임박'; bottom:0; padding:6px 12px; border-radius:8px 8px 0 0; background-color:var(--grapefruit-light); font-size:16px; opacity:0.9;}
.course-list-item[data-sale-status="soldout"] .course-item-thumb>span::after{content:'Sold Out'; background-color:rgb(36 58 102 / 72%); font-weight:600;}


/* view grid */
.view-grid .course-list-item{flex-direction:column;}
.view-grid .course-item-thumb,
.view-grid .course-item-thumb>span{width:100%;}

/* circular progress */
.circular-progress{position:absolute; --size:28px; --half-size:calc(var(--size) / 2); --stroke-width:4px; --radius:calc((var(--size) - var(--stroke-width)) / 2); --circumference:calc(var(--radius) * pi * 2);  --dash:calc((var(--progress) * var(--circumference)) / 100);}
.circular-progress circle{cx:var(--half-size); cy:var(--half-size); r:var(--radius); stroke-width:var(--stroke-width); fill:none; stroke-linecap:round;}
.circular-progress circle.bg{stroke:#e5e5e5;}
.circular-progress circle.fg{transform:rotate(-90deg); transform-origin:var(--half-size) var(--half-size); stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash)); transition:stroke-dasharray 0.2s linear 0s;}
@property --progress {syntax:"<number>"; inherits:false; initial-value:0;}

/* before class button */
.lesson-btn.before[data-before-status="0"] .circular-progress{display:none;}
.lesson-btn.before[data-before-status="100"] .circular-progress circle.fg{stroke:var(--mint-normal);}
.lesson-btn.before:not([data-before-status="0"],[data-before-status="100"]) .circular-progress circle.fg{stroke:var(--sunflower-normal);}
.lesson-btn.before[data-before-status="100"]{animation:before-color-title 0.5s linear 0s 1 forwards;}
@keyframes before-color-title{from {color:#000;} to {color:var(--mint-normal)}}
.lesson-btn.before[data-before-status="100"]::after{content:'check_small'; display:flex; justify-content:center; align-items:center; position:absolute; width:28px; height:28px; color:#fff; animation:before-color-text 0.5s linear 0s 1 forwards;}
@keyframes before-color-text{from {color:transparent;} to {color:var(--mint-normal)}}
.lesson-btn.before:not([data-before-status="0"],[data-before-status="100"]) i.material-symbols-rounded{animation:before-color-progress 0.5s linear 0s 1 forwards;}
@keyframes before-color-progress{from {background-color:var(--darkgray-light); color:#fff;} to {background-color:transparent; color:transparent;}}

/* after class button */
.lesson-btn.after[data-after-status="0"] .circular-progress{display:none;}
.lesson-btn.after[data-after-status="100"] .circular-progress circle.fg{stroke:var(--mint-normal);}
.lesson-btn.after:not([data-after-status="0"],[data-after-status="100"]) .circular-progress circle.fg{stroke:var(--sunflower-normal);}
.lesson-btn.after[data-after-status="100"]{animation:after-color-title 0.5s linear 0s 1 forwards;}
@keyframes after-color-title{from {color:#000;} to {color:var(--mint-normal)}}
.lesson-btn.after[data-after-status="100"]::after{content:'check_small'; display:flex; justify-content:center; align-items:center; position:absolute; width:28px; height:28px; color:#fff; animation:after-color-text 0.5s linear 0s 1 forwards;}
@keyframes after-color-text{from {color:transparent;} to {color:var(--mint-normal)}}
.lesson-btn.after:not([data-after-status="0"],[data-after-status="100"]) i.material-symbols-rounded{animation:after-color-progress 0.5s linear 0s 1 forwards;}
@keyframes after-color-progress{from {background-color:var(--darkgray-light); color:#fff;} to {background-color:transparent; color:transparent;}}

/* live class button */
.lesson-btn.live[data-live-status="off"]::before{content:'현장 Live Class'; display:flex; justify-content:center; align-items:center; position:absolute; z-index:2; left:0; right:0; top:50%; bottom:0; border-radius:16px; color:var(--darkgray-normal); font-size:11px;}
.lesson-btn.live[data-live-status="off"]::after{content:'camera_indoor'; display:flex; justify-content:center; align-items:flex-start; position:absolute; z-index:1; left:-1px; right:-1px; top:-1px; bottom:-1px; border-radius:16px; background-color:rgb(255 255 255 / 100%); color:var(--darkgray-normal); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 0 5px #fff;}
.lesson-btn.live[data-live-status="lock"]::after,
.lesson-btn.live[data-live-status="0"]::after{content:'lock_clock'; display:flex; justify-content:center; align-items:center; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:16px; background-color:rgb(0 0 0 / 8%); color:var(--darkgray-normal); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 0 5px #fff;}
.lesson-btn.live[data-live-status="100"] .circular-progress circle.fg{stroke:var(--vivid-pink);}
.lesson-btn.live[data-live-status="100"]{animation:live-color-title 0.5s linear 0s 1 forwards;}
@keyframes live-color-title{from {color:#000;} to {color:var(--vivid-pink)}}
.lesson-btn.live[data-live-status="100"]::after{content:'check_small'; display:flex; justify-content:center; align-items:center; position:absolute; width:28px; height:28px; color:#fff; animation:live-color-text 0.5s linear 0s 1 forwards;}
@keyframes live-color-text{from {color:transparent;} to {color:var(--vivid-pink)}}

/* lesson button : common style */
.lesson-btn::after{font-family:'Material Symbols Rounded'; font-variation-settings:var(--symbols-basic); font-weight:normal; font-style:normal; font-size:28px; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;}
.lesson-btn:is([data-before-status="100"],[data-after-status="100"],[data-live-status="100"]) i.material-symbols-rounded{animation:color-completed 0.5s linear 0s 1 forwards;}
@keyframes color-completed{from {background-color:var(--darkgray-light); color:#fff;} to {background-color:transparent; color:transparent;}}


/*####################
Info Cardbox
######################*/
.info-cardbox-list{display:flex; flex-direction:column; gap:16px; padding:24px; width:100%; border-radius:16px; background-color:#fff; box-shadow:0 0 16px rgb(0 0 0 / 5%);}
.info-cardbox-list:empty{padding:0; border-radius:0; background-color:transparent; box-shadow:none; cursor:pointer;}
.info-cardbox-list:empty::before{content:attr(data-empty); display:flex; justify-content:center; padding:24px; width:100%; border-radius:8px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); color:#777; font-size:15px;}
.info-cardbox-item{display:grid; grid-template-columns:1fr auto; gap:8px; padding-bottom:8px;}
.info-cardbox-item~.info-cardbox-item{padding-top:16px; border-top:1px dashed rgb(0 0 0 / 10%);}
.info-cardbox-item>h5{align-self:center; display:flex; gap:4px; color:#333; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:600;}
.info-cardbox-item>.function{display:flex; gap:8px;}
.info-cardbox-item>span{grid-column:1 / 3; color:#777; font-size:14px;}
.info-cardbox-item>p{grid-column:1 / 3; color:#333; font-size:14px;}


/*####################
Payment Card
######################*/
.payment-card-list{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%;}
.payment-card-list:empty{margin:0 auto; max-width:400px; min-height:200px; border-radius:8px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); cursor:pointer;}
.payment-card-list:empty::before{content:'add_circle'; flex-grow:1; display:flex; justify-content:center; align-items:flex-end; color:var(--darkgray-normal); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 0 5px #fff; color:var(--dark-lavender); font-family:'Material Symbols Rounded'; font-variation-settings:var(--symbols-basic); font-weight:normal; font-style:normal; font-size:40px; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;}
.payment-card-list:empty::after{content:attr(data-empty); flex-grow:1; display:flex; justify-content:center; color:#777; font-size:15px; white-space:pre-wrap;}
.payment-card-list~.guide-box{margin:0 auto; width:100%; max-width:400px;}
.payment-card-item{display:flex; flex-direction:column; gap:8px; position:relative; padding:24px; border-radius:16px; background-color:var(--dark-lavender); width:100%; max-width:400px; min-height:200px;}
.payment-card-item::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(160deg, #fff 0%, rgb(255 255 255 / 0%) 80%); opacity:0.25;}
.payment-card-item~.info-cardbox-item{padding-top:16px; border-top:1px dashed rgb(0 0 0 / 10%);}
.payment-card-item>:is(h5,h6){display:flex; gap:4px; position:relative; color:rgb(255 255 255 / 80%); font-family:var(--font-nanumsquareN); font-size:15px; font-weight:500;}
.payment-card-item>.function{flex-grow:1; display:flex; justify-content:flex-end; align-items:flex-end; gap:8px; position:relative;}
.payment-card-item>span{grid-column:1 / 3; color:#777; font-size:14px;}
.payment-card-item>p{grid-column:1 / 3; color:#333; font-size:14px;}


/*####################
Payment Detail
######################*/
.payment-original{font-size:18px; font-weight:600;}
.payment-detail{display:flex; flex-direction:column; gap:8px; width:100%;}
.payment-coupon-list{display:flex; gap:8px;}
.payment-total{display:flex; flex-direction:column; padding:16px; border-radius:8px; background-color:#fff;}
.modal-layer.setting .payment-total{margin-bottom:24px; padding:0 16px 16px 16px; border-radius:8px; background-color:var(--lightgray-bg);}
.payment-total-item{display:flex; justify-content:space-between; gap:8px; padding:4px; font-size:15px;}
.payment-total-item:not(.final){padding-left:8px; border-left:4px solid #ddd;}
.payment-total-item.final{padding:16px 0 4px 0; font-size:18px;}
.payment-total-item:not(.final)>b{color:var(--brand-color-1);}
.payment-total-item.final>b{color:var(--blue-normal);}
.payment-total-item:not(.final)>span{color:#555;}
.payment-total-item.final+.payment-total-item{margin-top:8px;}


/*####################
Guide Component
######################*/
.guide-box{display:flex; flex-direction:column;}
.guide-box>p{color:#555; font-size:14px; word-break:keep-all; letter-spacing:-0.5px;}
.guide-box b{color:var(--vivid-pink); font-weight:500;}
.guide-card{align-self:center; display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px;}
.guide-card h4{font-family:var(--font-nanumsquareN); font-size:20px; font-weight:200;}
.guide-card .speech-bubble{display:flex; position:relative; padding:8px 12px; border-radius:16px; border:1px solid rgb(0 0 0 / 15%); background-color:#fff; font-family:var(--font-nanumsquareR); font-size:15px; font-weight:200;}
.guide-card .speech-bubble::after{content:''; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; border-right:1px solid rgb(0 0 0 / 15%); border-bottom:1px solid rgb(0 0 0 / 15%); background-color:#fff; transform:rotate(45deg);}
.guide-card img{max-width:160px;}
.guide-card img.w200{max-width:200px;}


/*####################
Profile Card
######################*/
.profile-card{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin:4px 0; padding:16px 24px; border-radius:16px; border-left:8px solid var(--darkgray-light); background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 5%);}
.profile-card[data-gender="male"]{border-left-color:var(--bluejeans-normal);}
.profile-card[data-gender="female"]{border-left-color:var(--pinkrose-normal);}
.profile-card[data-gender="kindergarten"]{border-left-color:var(--sunflower-normal);}
.profile-add{align-self:flex-start; display:flex; align-items:center; gap:16px;}
.profile-add button{border-radius:16px;}
.profile-add button>span>i.material-symbols-rounded{margin-left:0; font-variation-settings:var(--symbols-basic);}

/* profile elements */
.profile-thumb>span{display:flex; justify-content:center; align-items:center; width:120px; aspect-ratio:1 / 1; border-radius:50%;}
.profile-thumb>span:empty::before{background:url(../img/profile/profile-default.png); background-size:contain; opacity:1;}
.profile-thumb.num>span::before{background:var(--darkgray-light); opacity:1;}
.profile-thumb.num>span::after{content:'+'attr(data-over-users); position:relative; line-height:1; color:#fff;}
.profile-name{display:flex; flex-direction:column; position:relative;}
.profile-name>h4{font-family:var(--font-poppins); font-size:16px; font-weight:400;}
.profile-name>h5{font-family:var(--font-poppins); font-size:14px; font-weight:400;}
.profile-name>span{line-height:1; color:#555; font-size:12px; font-weight:300;}
.profile-name>em{display:flex; align-items:center; padding:0 8px; min-height:23px; border-radius:12px; border:1px solid var(--sunflower-normal); color:var(--sunflower-normal); font-family:var(--font-nanumsquareR); font-size:11px; font-style:normal; font-weight:600; white-space:nowrap;}
.profile-name>.status-verified{margin-left:-4px;}
.profile-info{display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.profile-info>span{color:#555; font-size:13px;}
:is(.profile-level, .status-subscription, .status-step, .status-verified){display:flex; min-height:24px;}
:is(.profile-level, .status-subscription, .status-step, .status-verified)>:is(em, sub){display:flex; align-items:center; padding:0 12px; border-radius:14px; font-family:var(--font-nanumsquareR); font-size:12px; font-style:normal; white-space:nowrap;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).small>:is(em, sub){padding:0 8px; font-family:var(--font-nanumsquareN); font-size:10px; letter-spacing:-0.2px;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).sub>sub{padding-right:6px; border-top-right-radius:0; border-end-end-radius:0;}
:is(.profile-level, .status-subscription, .status-step, .status-verified).sub>em{padding-left:6px; border-top-left-radius:0; border-end-start-radius:0;}
.profile-level>em{background-color:var(--sunflower-normal); color:#fff;}
.profile-level>sub{border:1px solid var(--sunflower-normal); color:var(--sunflower-normal); font-weight:500;}
.profile-level>span{align-self:center; margin-left:8px; color:var(--sunflower-normal);}
.status-subscription>em{border:1px solid var(--vivid-pink); background-color:#fff; color:var(--vivid-pink);}
.status-step>em{border:1px solid var(--dark-lavender); background-color:#fff; color:var(--dark-lavender);}
#apply-class .section-header .status-step{margin:0 -8px 0 -4px;}
.status-verified>em{border:1px solid var(--grass-normal); background-color:#fff; color:var(--grass-normal);}
.status-verified>em>i.material-symbols-rounded{margin-left:-4px; width:18px; height:18px; font-size:18px; font-variation-settings:var(--symbols-basic);}
[data-course="kindergarten"] .profile-level>em{background-color:var(--sunflower-normal);}
[data-course="kindergarten"] .profile-level>sub{border:1px solid var(--sunflower-normal); color:var(--sunflower-normal);}
[data-course="kindergarten"] .profile-level>span{color:var(--sunflower-normal);}
[data-course="phonics"] .profile-level>em{background-color:var(--bittersweet-light);}
[data-course="phonics"] .profile-level>sub{border:1px solid var(--bittersweet-light); color:var(--bittersweet-light);}
[data-course="phonics"] .profile-level>span{color:var(--bittersweet-light);}
[data-course="nttalk"] .profile-level>em{background-color:var(--topaz-light);}
[data-course="nttalk"] .profile-level>sub{border:1px solid var(--topaz-light); color:var(--topaz-light);}
[data-course="nttalk"] .profile-level>span{color:var(--topaz-light);}

/* profile group */
.profile-basic{display:flex; align-items:center; gap:8px 24px;}
.profile-basic .profile-thumb{flex-shrink:0;}
.profile-basic .profile-thumb>span{width:64px;}
.profile-function{display:flex; justify-content:flex-end; gap:16px;}
.profile-subscription{grid-column:1 / 3;}
.profile-subscription:empty{display:none;}
.profile-subscription>li{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; min-height:47px; border-top:1px dashed rgb(0 0 0 / 10%);}
.profile-subscription .pay-info{display:flex; align-items:center; gap:8px; color:#333;}
.profile-subscription .pay-info>span{font-size:14px;}
.profile-subscription .group-info{display:flex; align-items:center; line-height:1; color:#333; font-size:14px;}
.profile-subscription .group-info>em{margin-right:4px; font-family:var(--font-default); font-style:normal;}
.profile-subscription .group-info>b{color:var(--grass-normal);}
.profile-subscription .profile-function{flex-grow:1; flex-wrap:wrap; row-gap:4px; text-align:right;}
.profile-subscription p.info{display:flex; justify-content:flex-end; align-items:center; width:100%; color:#777; font-size:11px;}
.profile-subscription p.info>i.material-symbols-rounded{width:18px; height:18px; font-size:18px;}

/* students list */
.students-list{grid-column:1 / 3; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:8px; border:1px dotted rgb(0 0 0 / 10%); background-color:rgb(0 0 0 / 2%);}
.students-header{display:flex; gap:16px; padding:0 4px;}
.students-header>h5{color:#333; font-family:var(--font-poppins); font-size:15px; font-weight:500;}
.students-items{display:flex; flex-direction:column; gap:6px; margin:0 4px; padding-top:10px; border-top:1px dotted rgb(0 0 0 / 10%)}
.student-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;}
.student-row .profile-basic{gap:16px;}
.student-row .profile-basic .profile-thumb>span{width:36px;}

/* quick list */
.quick-list{display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; margin:8px 0;}
.quick-list button[type=button].icon>span{padding:8px 4px;}
.quick-list button[type=button].icon:hover>:is(i, span){color:var(--dark-lavender);}

/* thumb list */
.character-list{display:flex; flex-direction:column; margin-top:16px;}
.character-list-tabmenu{display:flex; gap:8px; padding:8px 16px;}
.character-list-tabmenu>li{display:flex; cursor:pointer;}
.character-list-tabmenu>li>span{padding:8px 16px; border-radius:18px; border:1px solid rgb(0 0 0 / 24%); font-family:var(--font-nanumsquareR); font-size:15px;}
.character-list-tabmenu>li.selected>span{border:1px solid rgb(0 0 0 / 100%); background-color:#333; color:#fff;}


/* profile list */
.profile-list{display:flex; flex-wrap:wrap; gap:16px;}
.profile-list-item{display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; padding:8px;}
.profile-list-item>i.material-symbols-rounded{position:absolute; z-index:2; top:0; left:72%; width:28px; height:28px; border-radius:50%; background-color:#fff; color:#aaa; font-size:28px;}
.new>.profile-thumb>span>i.material-symbols-rounded{position:relative; width:64px; height:64px; color:#fff; font-size:64px;}
.new>.profile-thumb:hover>span>i{color:var(--dark-lavender);}
.new>.profile-thumb:hover>span::before{background:var(--lavender-light);}
.profile-list-item .profile-thumb>span{width:96px;}
.profile-list-item .profile-name{align-items:center;}
.profile-list-item input[type=radio]{display:none;}
.profile-list-item input[type=radio]:checked~i{color:var(--grass-normal); font-variation-settings:var(--symbols-basic);}
.profile-list-item input[type=radio]:checked~.profile-thumb>span{outline:3px solid var(--grass-normal); outline-offset:2px;}
.profile-list+.btn-submit{margin-top:0;}
#user-quick .section~.section .profile-list{padding-top:24px; width:100%; max-width:368px; border-top:1px dashed rgb(0 0 0 / 10%);}
#user-quick .section-items{align-items:center;}
#edit-profile .profile-list{padding:24px 0 32px 0;}
#edit-profile .character-list>.profile-list{align-self:center; max-width:368px;}
#change-info .change-data{padding:24px 0 32px 0; border-top:1px dashed rgb(0 0 0 / 10%);}

/* profile edit */
.profile-edit{display:flex; flex-direction:column; align-items:center; gap:32px; margin:0 auto; padding:32px 24px; max-width:480px; width:100%; border-radius:16px; background-color:#fff; box-shadow:0 0 16px rgb(0 0 0 / 5%);}
.profile-edit .profile-thumb>span{box-shadow:0 0 8px rgb(0 0 0 / 5%);}
.profile-form{display:flex; flex-direction:column; gap:8px; width:100%;}
.profile-form .form-item-title{justify-content:center;}


/*####################
Pay Card & Setting Card
######################*/
:is(.pay-card, .setting-card){display:flex; flex-direction:column; padding:8px 24px; border-radius:16px; background-color:#fff; box-shadow:0 0 8px rgb(0 0 0 / 5%);}
:is(.pay-card, .setting-card).essential{border:1px solid var(--dark-lavender);}
/* pay card */
.pay-card-date{display:flex; align-items:center; gap:8px; margin-top:8px;}
.pay-card-date::before{content:''; position:relative; z-index:2; width:7px; height:7px; border-radius:50%; background-color:var(--dark-lavender);}
.pay-card-date::after{content:''; position:absolute; z-index:1; left:3px; top:16px; bottom:-32px; width:1px; border-radius:50%; background-color:rgb(0 0 0 / 8%);}
.section-items:last-of-type .pay-card-date::after{background:linear-gradient(to top, rgb(0 0 0 / 0%),  rgb(0 0 0 / 8%));}
.pay-card-date>b{font-size:15px; font-weight:500;}
.pay-card-date+.pay-card{margin-left:24px;}
.pay-card-row{display:grid; grid-template-columns:1fr auto 80px; align-items:center; gap:24px; padding:8px 0;}
.pay-card-row>:is(b, span){font-size:15px; font-weight:500;}
.pay-title{display:flex; flex-direction:column; gap:4px;}
.pay-title>b{color:#333; font-size:15px; font-weight:600;}
.pay-title>span{display:flex; align-items:center; min-height:16px; color:#777;}
.pay-price{display:flex; flex-direction:column; gap:4px;}
.pay-price>b{color:var(--brand-color-1); font-size:15px; font-weight:500;}
.pay-price>span{display:flex; justify-content:center; align-items:center;}
/* setting card */
.setting-card-row{display:flex; align-items:center; column-gap:8px; padding:10px 0;}
.setting-card-row~.setting-card-row{border-top:1px dotted #ddd;}
.setting-card-row>i.material-symbols-rounded{flex-shrink:0; width:24px; color:#777;}
.setting-card-row>:is(b, strong, span){line-height:1; color:#555; font-size:15px; font-weight:normal;}
.setting-card-row>b{flex-shrink:0; width:96px;}
.setting-card-row>strong{flex-grow:1;}
.setting-card-row>span{flex-grow:1; display:flex; align-items:center; gap:2px 8px; flex-wrap:wrap;}
.setting-card-row>label{padding:5px 0;}
/* setting link */
.setting-link{padding:8px;}
.setting-link>a{display:flex; align-items:center; line-height:1; color:#777; font-size:15px;}
.setting-link>a>i.material-symbols-rounded{width:18px; height:18px; font-size:18px;}


/*####################
Coupon List
######################*/
.coupon-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:16px;}
.coupon-list-item{display:flex; flex-direction:column; gap:8px; position:relative; padding:24px; border-radius:16px; border:1px solid #999; background-color:#fff;}
.coupon-list-item::after{content:''; position:absolute; inset:50% -1px auto auto; margin-top:-20px; width:20px; height:40px; border-radius:20px 0 0 20px; border:1px solid #999; border-right:0; background-color:var(--lightgray-bg);}
.coupon-list-item.used{opacity:0.5;}
.coupon-list-item>h5{line-height:1; color:#333; font-size:24px; font-weight:600;}
.coupon-list-item>h6{color:#555; font-size:14px; font-weight:500;}
.coupon-list-item>p{margin-top:8px; color:#777;}
.coupon-list-item>.category{display:flex; gap:8px; color:#999;}
.coupon-list-item>.category>label{flex-shrink:0; display:flex; align-items:center; padding:0 8px; height:24px; border-radius:12px; background-color:#777; color:#fff; cursor:default;}
.coupon-list-item>.category>p{padding:4px 0; word-break:keep-all;}
.coupon-list-item>.status{position:absolute; inset:16px 16px auto auto; padding:6px; border:1px solid #ccc; color:#777; font-size:11px;}


/*####################
Apply for Course
######################*/
#apply-class .section~.section>.section-header,
#apply-class .section~.section>.section>.section-header{padding-top:24px; border-top:1px dotted rgb(0 0 0 / 10%);}
.apply-class-option{display:flex; flex-direction:column; gap:24px;}
.week-day-list{display:flex; border-radius:4px;}
.week-day-list.multiple{gap:8px;}
.week-day-list label.mode{flex-grow:1;}
.time-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:16px; align-items:flex-start;}
:is(.apply-class-option, .apply-change-day) label:is(.mode, .block)>span{flex-direction:column; gap:0; background-color:#fff; font-size:15px; text-align:center;}
:is(.apply-class-option, .apply-change-day) .time-list label:is(.mode, .block)>input:disabled+span::after{content:'마감'; line-height:1; font-size:11px;}
#select-second-time:empty{display:none;}
#select-second-time .apply-class-option .week-day-list label:is(.mode, .block)>input:disabled+span::before{content:'STEP 1'; position:absolute; left:0; top:-8px; padding:3px 6px 4px 6px; line-height:1; border-radius:8px; background-color:var(--dark-lavender); color:#fff; font-size:10px; letter-spacing:-0.5px;}
.time-list>label:is(.mode, .block){display:flex; flex-direction:column; gap:4px;}
.time-list>label:is(.mode, .block)>em{display:none; color:var(--vivid-pink); font-style:normal; text-align:center;}
.time-list>label:is(.mode, .block)>input:checked~em{display:block;}
#apply-class .profile-list-item>i{background-color:#f5f5f5;}
/* Apply Change Day */
.apply-change-day{display:flex; flex-direction:column; gap:24px; padding:24px; max-width:480px; width:100%; border-radius:16px; background-color:#fff; box-shadow:0 0 16px rgb(0 0 0 / 5%);}
.day-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:16px;}
.day-list:empty{display:flex;}
.day-list:empty::before{content:attr(data-empty); display:flex; justify-content:center; padding:24px; width:100%; border-radius:8px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(255 255 255 / 50%); color:#777; font-size:15px;}
:is(.target-day-list, .change-day-list){display:flex; flex-direction:column; gap:16px;}
:is(.target-day-list, .change-day-list)>h4{color:#333; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.apply-change-day .guide-box~div{padding-top:24px; border-top:1px dashed rgb(0 0 0 / 10%);}
.change-calendar .ui-datepicker{padding:16px 0; box-shadow:none;}
.change-calendar:empty::before{content:attr(data-empty); display:flex; justify-content:center; padding:24px; width:100%; border-radius:8px; border:1px dashed rgb(0 0 0 / 10%); background-color:rgb(0 0 0 / 4%); color:#777; font-size:15px;}
/* submit button */
.btn-submit{display:flex; gap:16px;}
.btn-submit button{flex-basis:0; flex-grow:1;}
/* two column layout */
.product-header{display:flex; justify-content:center; padding:16px; background-color:var(--dark-lavender);}
.product-contents{display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:24px; width:100%;}
.product-intro{flex-grow:1; display:flex; flex-direction:column; max-width:720px; width:100%; border:0 !important;}
.product-side{flex-shrink:0; display:flex; flex-direction:column; gap:16px; position:sticky; padding:16px 16px 0 0;}
.product-side-toggle{display:none; position:sticky; z-index:10; inset:0 0 auto 0; width:100%;}
.product-side.opened .product-side-toggle{display:flex; margin-bottom:-8px;}
.product-side-toggle button{justify-content:center; width:100%;}
.product-side-toggle i.material-symbols-rounded{width:32px; height:32px; color:#eee; text-shadow:0 -1px #ccc; font-size:32px; font-variation-settings:var(--symbols-basic); transform:scaleX(2.5);}
.product-side-header{display:flex; flex-direction:column;}
.product-side-contents{display:flex; flex-direction:column; gap:16px;}
.product-side .section{padding:0;}
.product-side .section-header{align-items:center; padding-top:16px !important;}
.product-side .section-header>h4{flex-grow:1; font-family:var(--font-nanumsquareN); font-size:15px;}
.product-side .section-items+.section-header{margin-top:8px; padding-top:16px; border-top:1px dashed rgb(0 0 0 / 16%);}
.product-side .section-items{gap:8px;}
.product-side .section-items[data-empty]:empty::after{font-size:15px;}

.product-side .course-list-item{flex-direction:column; padding:8px; width:360px; border-radius:8px; border:1px solid rgb(0 0 0 / 16%); background-color:#fff;}
.product-side .course-item-thumb{display:none;}
.product-side .course-item-thumb>span{align-items:center; width:auto; height:152px; border-radius:4px;}
.product-side .course-item-info>.tags{flex-grow:0;}
.product-side .course-label>*:last-child{border-radius:0 0 4px 0;}

.product-side .course-detail-info{margin-left:4px;}
.product-side .apply-class-option{gap:16px; max-width:360px;}
.product-side .apply-class-option label:is(.mode, .block)>span{padding:4px 8px 5px 8px; min-height:38px; font-size:13px;}
.product-side .time-list{grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:10px;}
.product-side .payment-card-item{display:grid; grid-template-columns:1fr auto; align-items:center; padding:16px; min-height:auto; border-radius:8px;}
.product-side .payment-card-item>h6{font-size:13px;}
.product-side .payment-card-item>.function{grid-row:1 / 3; grid-column:2 / 3; font-size:13px;}
.product-side .guide-box>p{padding:0 4px; font-size:13px;}
.product-side #submit-pay{position:sticky; z-index:10; inset:auto 0 0 0; padding:16px 0; background-color:#f5f5f5;}
.product-side button.action-open-option{display:none;}


/*####################
Form Style
######################*/
.form-group{display:flex; flex-direction:column; gap:8px;}
.form-group~.form-group{padding-top:8px; border-top:1px solid #eee;}
.form-group label.check>span{margin:8px 0; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-group.selected label.check{pointer-events:none;}
.form-group.selected{padding-bottom:16px;}
.form-item-title{display:flex; gap:8px; margin:0 0 8px 4px;}
.form-item-title~.form-item-title{margin-top:24px;}
.form-item-title>h3{font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-item{display:flex; flex-direction:column; gap:8px;}
.form-input-row{display:flex; align-items:center; padding:0 10px; min-height:50px; border-radius:8px; border:1px solid #ccc; background-color:#fff;}
.form-input-row.focus{padding:0 9px; border:2px solid var(--dark-lavender);}
.form-input-row i.material-symbols-rounded{flex-shrink:0; margin-left:4px; color:#777;}
.form-input-row :is(input, select){padding:8px; border:0; background-color:transparent !important;}
.form-input-row select.dim{color:#aaa;}
.form-input-row.focus select.dim{color:initial;}
.form-input-row button.material-symbols-rounded{padding:4px; color:#777;}
.form-input-row :is(input, .iti){flex-grow:1;}
.form-input-row button{flex-shrink:0;}
.form-select-row{display:flex; border-radius:8px;}
.form-select-row label.mode{flex-basis:0; flex-grow:1;}
.form-select-row label.mode>span{font-size:15px;}
.guide-text{display:none; margin-bottom:8px; padding:0 5px; color:var(--grapefruit-light); font-size:13px; white-space:pre-wrap;}
.form-item.error .form-input-row{padding:0 9px; border:2px solid var(--grapefruit-light);}
.form-item.error .form-select-row{border:2px solid var(--grapefruit-light);}
.form-item:is(.error, .success) .guide-text{display:block;}
.form-item.success .guide-text{color:var(--grass-normal);}
.form-item~button{margin-top:20px;}
.form-item em.status{flex-shrink:0; display:none; position:relative; padding:4px 6px 3px 6px; font-size:11px; font-weight:600; font-style:normal;}
.form-item em.status::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:10px; opacity:0.25;}
.form-item.error em.status{display:block; color:var(--grapefruit-light);}
.form-item.error em.status::before{background-color:var(--grapefruit-light);}
.form-item em.status.ok{display:block; color:var(--grass-normal);}
.form-item em.status.ok::before{background-color:var(--grass-normal);}
.form-item em.status:empty{display:none;}
/* registration input - disabled style */
.form-item.disabled .form-input-row{border:1px solid rgb(0 0 0 / 5%); background-color:rgb(0 0 0 / 5%);}
.form-item.disabled .form-input-row input:disabled{-webkit-user-select:none; -ms-user-select:none; user-select:none;}
/* registration input - nation no */
.iti--separate-dial-code .iti__selected-flag{border-radius:6px;}
.form-input-row .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{font-size:14px;}


/*####################
Screen size
######################*/
@media (hover: none) {

   .course-list-item:hover {transform:none !important; }
   
}

/* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

   #wrap{margin:0 auto; max-width:1280px;}
   
   /* class card */
   .mission-list{grid-template-columns:repeat(auto-fill, minmax(104px,1fr));}
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = 481px to higher resolution */
@media (min-width: 769px) {

   .course-list-item::before{content:''; position:absolute; inset:0 0 0 0; border-radius:12px; border:1px solid #ddd; background-color:#fff; box-shadow:0 0 16px rgb(0 0 0 / 5%); opacity:0; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transition:all 0.2s;}
   .product-side .course-list-item::before{content:none;}
   .course-list-item:hover::before{inset:-10px -10px -10px -10px; opacity:1;}
   .course-list-item:hover .course-item-thumb{transform: scale(1.06) translateY(-4px);}
   .course-list-item:hover .course-item-thumb>span{border-radius:8px 8px 0 0;}

}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = 481px to higher resolution */
@media (min-width: 481px) {

   body, #container, .detail-page-component{overflow:visible;}
   .detail-page-header, 
   .detail-page-component{border-left:1px solid #e5e5e5;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1024px */
@media (max-width: 1024px) {

   .nav-bar{width:96px;}
   .nav-mh>.logo{height:40px;}
   .nav-items>li{margin:0 8px;}
   .nav-items>li>a{flex-direction:column; justify-content:center; padding:0 4px 4px 4px; height:56px; font-size:10px; text-transform:uppercase;}
   .nav-items>li>a>i{margin:4px 0 0 0;}
   #container{left:96px;}
   .info-page{width:calc(100% - 96px);}

   .weeknav-items{gap:1.52vw;}

   /* class card */
   .class-info{gap:16px;}
   .class-lesson-type{gap:8px;}

   /* course items */
   .view-list .course-item-thumb>span{width:240px; height:180px;}
   .view-list .course-item-thumb>span>img{width:auto;}
   .course-list .course-item-info>.title-text>h6{font-size:15px;}
   .course-list .course-item-info{padding:4px;}

}

/* ##Device = Desktops, ##Screen = B/w Less than 960px */
@media (max-width: 960px) {

   /* class card */
   .class-card .class-lesson-type{grid-column:1 / 3;}

   /* product contents */
   .product-contents{flex-direction:column; align-items:center; gap:0; width:100%;}
   .product-side{inset:auto 0 0 0; padding:16px; width:100%; background-color:#fff;}
   .product-side-toggle{grid-column:1 / 3;}
   .product-side .section:first-of-type .section-header{padding-top:0 !important;}
   .product-side-header{flex-grow:1; justify-content:center;}
   .product-side .section:first-of-type .section-header{padding-top:16px !important; border-top:1px dashed rgb(0 0 0 / 16%);}
   .product-side .section-items:empty{background-color:rgb(0 0 0 / 4%);}
   .product-side .apply-class-option{max-width:none;}
   .product-side .course-list-item{padding:0; width:auto; border-radius:0; border:0; box-shadow:none;}
   .product-side .course-item-info{padding:0;}
   .product-side #submit-pay{padding:0; background-color:#fff;}
   /* product contents : opened */
   .product-side.opened{padding:0 16px; border-radius:8px 8px 0 0; box-shadow:0 0 24px rgb(0 0 0 / 16%); max-height:72vh; overflow:auto;}
   .product-side.opened::-webkit-scrollbar{width:0; height:0;}
   .product-side.opened .course-item-info>.title-text>h6{font-weight:700;}
   .product-side.opened #submit-pay{padding:16px 0;}
   .product-side:not(.opened){flex-direction:row; border-top:1px solid #ddd;}
   .product-side:not(.opened) .product-side-header{padding-right:16px; border-right: 1px dashed rgb(0 0 0 / 16%);}
   .product-side:not(.opened) :is(.tags, .apply, .section-header, .section-items){display:none;}
   .product-side:not(.opened) .course-item-info{justify-content:center; gap:0; padding:0;}
   .product-side:not(.opened) .product-side-contents{flex-grow:1; gap:0;}
   .product-side button.action-apply,
   .product-side.opened button.action-open-option{display:none;}
   .product-side button.action-open-option,
   .product-side.opened button.action-apply{display:inline-flex;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 768px */
@media (max-width: 768px) {

   .nav-mh{padding:16px 8px;}
   .user-info>span{display:none;}

   .detail-page-header{justify-content:flex-start; padding-top:16px; min-height:72px;}
   .detail-page-header::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-bottom:1px solid #e5e5e5; background-color:#fff;}
   :is(.header-title, .weeknav-bar, .section){padding:0 24px;}
   .header-title{display:grid; grid-template-columns:1fr 1fr;}
   .header-title h3{order:1; margin-left:4px; font-size:22px;}
   .header-title .function{order:4; justify-content:flex-end;}
   .header-title .user-info{order:2; justify-self:flex-end;}
   .header-title .subnav-bar{order:3; grid-column:1 / 3; padding:0;}
   .subnav-items{gap:24px;}
   .subnav-items>li>a{font-size:15px;}
   .weeknav-bar{flex-direction:column; align-items:flex-start; gap:16px;}
   .weeknav-items{display:grid; grid-template-columns:repeat(7, 1fr); gap:initial; width:100%;}
   .weeknav-items>li{padding:8px;}
   .weeknav-items>li>b{font-size:20px;}
   .weeknav-controls{flex-direction:row; align-items:center;}
   .weeknav-controls>h5{order:2;}
   .weeknav-controls>.function{order:1;}

   /* banner module */
   .banner-module{gap:16px; padding:0 16px;}
   .banner-module-text>h6{font-size:16px;}
   .banner-module-text>p{line-height:1.1;}

   /* course items */
   .course-list-item{padding:0;}

   /* class card */
   .lesson-btn-group .lesson-deadline{font-size:10px;}

   #teacher-class .class-info{grid-template-columns:56px 1fr auto;}
   #teacher-class .class-info>.class-time{order:1; grid-column:1 / 3; grid-row:1 / 2; flex-direction:row; padding-left:4px;}
   #teacher-class .class-info>.class-time>span{font-size:13px;}
   #teacher-class .class-info>.class-time>em::before{content:'(';}
   #teacher-class .class-info>.class-time>em::after{content:')';}
   #teacher-class .class-info>.class-member{order:3; grid-column:1 / 3; grid-row:2 / 3;}
   #teacher-class .class-time+:is(.profile-thumb, .class-member){padding-left:0; border-left:0;}

   .teaching-doc>a{max-width:160px;}

   /* setting card */
   .setting-card{padding:8px 16px;}
   .setting-card-row{display:grid; grid-template-columns:24px 1fr auto;}
   .setting-card-row>i{grid-row:1 / 3;}
   .setting-card-row>b{grid-row:1 / 2; align-self:flex-start; color:#999; font-size:10px;}
   .setting-card-row>strong{grid-row:1 / 3;}
   .setting-card-row>span{grid-row:2 / 3; align-self:flex-start; font-size:14px;}
   .setting-card-row>strong+span{display:none;}
   .setting-card-row>button{grid-row:1 / 3;}

   /* product contents */
   .modal-layer.full.page .modalwrap-header{padding:10px 4px;}
   .modal-layer.full.page .header-wrapper,
   .modal-layer.full.page .header-wrapper .function{margin-right:0;}
   .modal-layer.full.page .header-wrapper .logo{width:77px;}
   .modal-layer.full.page .header-wrapper .title-text{font-size:14px;}
   .modal-layer.full.page .header-wrapper .profile-list{width:auto;}
   .modal-layer.full.page .header-wrapper .profile-list :is(.profile-name, .status-verified){display:none;}
   .modal-layer.full.page .header-wrapper .profile-thumb>span{width:36px !important;}

   .product-side:not(.opened){padding:8px;}
   .product-side:not(.opened) .product-side-header{padding:0 0 0 8px; border:0;}
   .product-side:not(.opened) .course-item-info>.title-text{margin:0;}
   .product-side:not(.opened) .course-item-info>.title-text>h6{font-size:14px;}
   .product-side:not(.opened) .course-item-info>.price{line-height:1;}
   .product-side:not(.opened) .btn-submit button>span{font-size:1.3195em;}
   
}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 640px */
@media (max-width: 640px) {

   /* banner module */
   .banner-module-picture{width:80px;}
   .banner-module-text>h6{font-size:15px;}
   .banner-module-text>p{font-size:12px;}
   .banner-module-btn>button{display:none;}
   .banner-module-btn::before{content:'arrow_circle_right'; display:flex; justify-content:center; align-items:flex-start; color:rgb(255 255 255 / 80%); font-family:'Material Symbols Rounded'; font-variation-settings:var(--symbols-basic); font-weight:normal; font-style:normal; font-size:28px; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;}


   /* class card */
   .class-info .profile-thumb{align-self:flex-start;}
   .class-detail-info>.class-member{grid-row:auto; font-size:15px;}
   .class-info .class-detail-info{grid-template-columns:1fr;}
   .class-info>.class-date>span{font-size:11px;}
   .class-info>.class-date>em{padding:0 5px; font-size:9px;}
   .class-date>i.material-symbols-rounded{width:18px; height:18px; font-size:18px;}

   /* course items */
   .course-list .course-list-item{flex-direction:column;}
   .course-list:not(.view-grid) .course-item-thumb>span{width:auto; height:auto;}
   .course-list .course-item-thumb>span>img{width:100%;}

   /* profile card */
   .profile-function button[type=button]>span{gap:0; width:32px; height:32px; font-size:0;}
   .profile-function button[type=button]>span>i{margin:-0.2em; text-indent:0;}
   :is(.profile-level, .status-subscription)>em{padding:4px 10px; font-size:11px;}
   .profile-subscription .pay-info{font-size:14px;}

   /* pay card */
   .pay-card-row{grid-template-columns:1fr 80px;}
   .pay-title{grid-column:1 / 3;}
   .pay-price{grid-column:1 / 2;}
   .pay-card-row>button{grid-column:2 / 3;}
   .pay-price>span{justify-content:flex-start;}

   /* product contents */

   /* quill editor*/
   .ql-container.ql-snow .ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:1.333em;}
   .ql-container.ql-snow .ql-editor [class*='ql-indent']:not(.ql-direction-rtl){padding-right:1.333em;}
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (max-width: 480px) {

   body{display:block; overflow:auto;}
   #wrap{display:flex; flex-direction:column; position:relative;}
   .nav-bar{width:100%;}
   .nav-control{row-gap:calc(100% - 128px); overflow:hidden;}
   .nav-mh{padding:0 16px; height:64px; align-items:center; box-shadow:0 0 3px rgb(0 0 0 / 5%);}
   .nav-mh .logo{min-width:112px; height:32px; background-position:left;}
   .nav-mh .user-info{display:flex;}

   /* mobile menu icon */
   #header .nav-mh>:is(h3, .mobile-sidebar-icon, .alert-icon){display:flex;}

   /* mobile bottom nav */
   .nav-items{flex-direction:row; justify-content:space-around; align-items:center; gap:0.4em; padding:0; box-shadow:0 0 3px rgb(0 0 0 / 5%);}
   .nav-items>li{flex-basis:0; flex-grow:1; margin:0;}
   .nav-items>li>a{width:auto; text-align:center;}
   .nav-items>li.selected>a{background-color:transparent; color:var(--dark-lavender); font-weight:600;}

   /* container */
   #container{top:64px; bottom:64px; left:0; min-width:auto;}
   :is(#lesson, #myinfo) #container::before{content:none;}
   .contents-page{flex-grow:1;}
   .detail-page-wrapper{height:100%;}
   .detail-page-header{min-height:auto;}
   .detail-page-header{z-index:11; padding:0; box-shadow:0 0 3px rgb(0 0 0 / 5%);}
   .detail-page-header>.header-title :is(h3, .user-info){display:none;}
   .detail-page-component{gap:32px;}
   .info-page{width:100%; height:calc(100% - 64px);}
   .header-title{min-height:auto;}
   :is(.header-title, .weeknav-bar, .section){padding:0 16px;}
   .weeknav-controls>h5{font-size:14px;}
   .weeknav-items{gap:8px;}
   .weeknav-items>li{padding:8px 4px; min-width:40px;}
   .weeknav-items>li::before{font-size:9px;}
   .weeknav-items>li>b{font-size:18px;}
   .section-header>h4{font-size:16.5px;}

   /* banner module */
   .banner-module{gap:12px; padding:0 12px; height:80px;}
   .banner-module-picture{width:72px;}
   .banner-module-text>h6{font-size:14px;}
   .banner-module-text>p{font-size:11px;}

   /* class card */
   :is(.class-info, .class-management, .teacher-comments){padding:16px;}
   .class-info>.class-member{font-size:16px;}
   .lesson-btn{gap:6px; width:88px; font-size:11px;}
   .mission-list{grid-template-columns:repeat(auto-fill, minmax(88px,1fr));}
   .mission-card-name{font-size:12px;}

   /* course items : in apply form */
   .modal-layer.full.form .course-list-item{flex-direction:column;}
   .course-item-thumb.ratio>span{align-items:center; width:100%; height:46vw;}
   .course-item-thumb.ratio>span>img{width:100%;}
   .course-label>:is(span, em){padding:3px 4px 4px 4px; font-size:11px;}
   .course-label>*:first-child{padding-left:6px;}

   /* profile card */
   .profile-card{padding:16px;}
   .profile-basic{gap:8px 16px;}
   .profile-name{align-items:flex-start;}
   :is(.profile-level, .status-subscription, .status-verified){min-height:20px;}
   :is(.profile-level, .status-subscription, .status-verified).small>:is(em, sub){padding:0 6px; font-size:9px;}

   /* product contents */
   .product-side .section-header>h4{font-size:14px;}

   /* set layer */
   .modal-layer.setting .modalwrap-panel{max-width:360px;}

   /* quick list */
   .quick-list{gap:8px;}
   .quick-list button[type=button].icon>i.material-symbols-rounded{font-size:40px;}
   .quick-list button[type=button].icon{min-width:64px;}

   /* profile list */
   :is(#user-quick .section~.section, #edit-profile .character-list) .profile-list{gap:8px; max-width:296px;}
   :is(#user-quick .section~.section, #edit-profile .character-list) .profile-list-item{padding:4px;}
   .profile-list-item .profile-thumb>span{width:64px;}
   .profile-list-item .profile-name>h4{font-size:13px;}
   .profile-list-item .profile-name>span{font-size:11px;}

   /* guide box */
   .guide-box>p{font-size:12px;}
   .guide-box>p>br{display:none;}

   /* info page */
   .info-page.expand-ani{border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;  background-color:#f4f6f8; box-shadow:0 0 4px rgb(0 0 0 / 10%) inset;}
   .info-page-header{padding-top:16px;}
   .info-page-header .header-title{min-height:32px;}
   .info-page-header .header-title>h3{font-size:20px;}
   .info-page-content{gap:32px; padding:16px 0;}

   /* info page : elearning content */
   .elearning-content{gap:16px;}

   /* apply for class*/
   :is(.apply-class-option, .apply-change-day) label:is(.mode, .block)>span{padding:6px 8px 7px 8px; font-size:14px;}

}

/* ##Device = Galaxy Fold (Portrait), ##Screen = B/w Less than 319px */
@media (max-width: 319px) {

   .nav-items>li{padding:0;}

}

/* ##Device = Desktop height, Mobile (Landscape) */
@media (max-height: 640px) {

   .modal-layer:not(.full) .modal-wrapper{align-items:flex-start; height:auto;}
   .product-side.opened{max-height:72vh; overflow:auto;}

}