/*#region ========== Variables (root) ==========*/
:root{
	color-scheme: light; /* 일부 브라우저에서 자동 스크롤바 색상 보정 */
	--ff:'NanumBarunGothic', 'Nanum Gothic', sans-serif;--fp:62.5%;--fs:1.6rem;
	--radius:.8rem;	--radius-sm: calc(var(--radius) * 0.5);--radius-lg: calc(var(--radius) * 2);--radius-xlg: calc(var(--radius) * 3);
	--gap:calc(var(--fs) * 0.75);--gap-sm:calc(var(--gap) * 0.5);--gap-xsm:calc(var(--gap) * 0.25);--gap-xxsm:calc(var(--gap) * 0.15);
    --gap-lg:calc(var(--gap) * 2);--gap-xlg:calc(var(--gap) * 3);--gap-xxlg:calc(var(--gap) * 5);
	--tran: all 0.3s ease;--tran-slow: all 0.5s ease;--tran-fast: all 0.1s ease;
	--z-1:1; /*기본 컨트롤*/
	--z-2:2; /*툴팁(미사용)*/
	--z-3:33; /*Overlay*/
	--z-4:44; /*팝업*/
	--z-5:55; /*팝업 오류신고*/
	--z-8:88; /*공용 Dialog*/
	--z-9:99; /*스크린락, Loading*/
	--size-max:54rem;--size-min:32rem;--size-width:100%;

    /* 기본 텍스트/배경/구분 */
    --text: #222222;
    --background: #f3f2f7;--bg:#f3f2f7;--bg-footer:#ededed;
    --muted: #c5c5c5;
	--divider: #e6e6e6;

    --white: #fefefe;
    --black: #000000;

    /* 메인 오렌지 */
    --primary: #ffa415;
    --primary-light: #ffd180;
    --primary-light-very: #fff4de;
    --primary-dark: #c46202;
    --primary-dark-deep: #774214;

    /* 세컨드(레드 계열) */
    --second: #e30d0d;
    --second-light: #fdafaf;
    --second-light-very: #ffe4e4;
    --second-dark: #b80000;
    --second-dark-deep: #750000;

    /* 액센트(블루 계열) */
    --accent: #049ef8;
    --accent-light: #7ac4dc;
    --accent-light-very: #e2f4fd;
    --accent-dark: #0068a5;
    --accent-dark-deep: #195e76;

    /* 필요에 따라 보조 컬러 */
	--gray: #dcdcdc;
    --gray-light: #f5f5f5;
    --gray-dark: #b6b6b6;
    --red: #e30d0d;
    --red-dark: #b80000;
    --green: #48bf5c;
    --green-dark: #29a23e;
	--orange:#ff6c00;
    --yellow:#ffe261;
    --blue:#4bace5;
}
/*#endregion*/

/*#region ========== Reset Element ==========*/
html{color-scheme: only light;background-color: var(--background) !important;}
body, html {-webkit-user-select: none;  -ms-user-select: none;  user-select: none;overscroll-behavior: contain;touch-action: manipulation;}
html{font-family:var(--ff);font-size:var(--fp);user-select:none;}
body{font-size:var(--fs);line-height: 1.2;background-color: var(--white); color: var(--text);}
h1,h2,h3,h4,h5,h6{font-weight: bold;}strong,b{font-weight: bold;}
h1{font-size:3.2rem;}h2{font-size:2.8rem;}h3{font-size:2.4rem;}h4{font-size:2.2rem;}h5{font-size:var(--fs, 1.6rem);}h6{font-size:calc(var(--fs, 1.6rem) * 0.95);}
small{font-size:0.8em;}button{cursor: pointer;outline: none;border: none;}
hr{border: 0;height: 1px;background-color: rgba(0, 0, 0, 0.1);margin: var(--gap) 0;}ul, ol{list-style: none;}
a, button{transition: var(--tran);user-select: none;}input,textarea{border: none;outline: none;}select{border: none;}
input[type="range"]+.thumb{display: none !important;}
/*#endregion*/

/*#region ========== Color ========*/
.white{color:var(--white) !important}.bg-white{background-color: var(--white) !important;}.text{color:var(--text) !important}
.black{color:var(--black) !important}.bg-black{background-color: var(--black) !important;}
.primary{color:var(--primary) !important}.bg-primary{background-color: var(--primary) !important;}
.second{color: var(--second) !important}.bg-second{background-color: var(--second) !important;}
.accent{color: var(--accent) !important}.bg-accent{background-color: var(--accent) !important;}
.accent-light{color: var(--accent-light) !important}.bg-accent-light{background-color: var(--accent-light) !important;}
.gray{color: var(--gray) !important;}.bg-gray{background-color: var(--gray) !important;}
.gray-dark{color: var(--gray-dark) !important;}.bg-gray-dark{background-color: var(--gray-dark) !important;}
.red{color: var(--red) !important;}.bg-red{background-color: var(--red) !important;}
.blue{color: var(--blue) !important;}.bg-blue{background-color: var(--blue) !important;}
.red-dark{color: var(--red-dark) !important;}.bg-red-dark{background-color: var(--red-dark) !important;}
.green{color: var(--green) !important;}.bg-green{background-color: var(--green) !important;}
.green-dark{color: var(--green-dark) !important;}.bg-green-dark{background-color: var(--green-dark) !important;}
.orange{color: var(--orange) !important;}.bg-orange{background-color: var(--orange) !important;}
.yellow{color:var(--yellow) !important;}.bg-yellow{background-color: var(--yellow) !important;}
/*#endregion*/

/*#region ========== Dialog ============*/

/* Dialog(Model) */
dialog{margin:0;width:calc(clamp(var(--size-min),var(--size-width),var(--size-max)) - var(--gap-xlg)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: var(--z-3);background-color: var(--white);border: none;outline: none;}
dialog::backdrop{background-color: rgba(0, 0, 0, 0.6);backdrop-filter: blur(5px);}body.no-blur dialog::backdrop{backdrop-filter:none !important;}
dialog.bg-invisible::backdrop{background-color: rgba(0, 0, 0, 0);backdrop-filter: blur(3px);}body.no-blur dialog.bg-invisible::backdrop{backdrop-filter:none !important;}
dialog main{background-color: var(--white);color: var(--text); padding:var(--gap);min-height: 15rem;display: flex;justify-content: center;align-items: center;text-align: center;line-height: 1.5em;}
dialog footer{display: flex;text-align: center;}
dialog footer button{flex: 1;outline:1px solid rgba(255, 255, 255, 0.3); padding: var(--gap);background-color: var(--primary);color: var(--white);font-size:var(--fs);transition: var(--tran);font-weight: bold;white-space:nowrap;}
dialog footer button:active{opacity: .8;}

dialog > main hr.full-bleed {margin-left: calc(-1 * var(--gap));margin-right: calc(-1 * var(--gap));height: 1px;border: 0;background: var(--divider, #e6e6e6);}
dialog .dialog-title{display: flex;align-items: center;gap: var(--gap-sm);color: #888;}
dialog .dialog-title::before{content: "";display: block;width: 2.4rem;height: 2.4rem;margin-right: var(--gap-xsm);background:url('../images/popup_notice.png') no-repeat center/cover;}
dialog .dialog-title.noti::before{background-image: url('../images/popup_notice.png');}
dialog .dialog-title.in::before{background-image: url('../images/popup_in.png');}
dialog .dialog-title.out::before{background-image: url('../images/popup_out.png');}
dialog .dialog-title.daily::before{background-image: url('../images/popup_daily.png');}
dialog .dialog-title.review::before{background-image: url('../images/popup_review.png');}
dialog .dialog-title.monthly::before{background-image: url('../images/popup_monthly.png');}
dialog .dialog-title.memo::before{background-image: url('../images/popup_memo.png');}
dialog .dialog-title::after{content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../images/popup_notice.png'),url('../images/popup_in.png'), url('../images/popup_out.png'), url('../images/popup_daily.png'), url('../images/popup_review.png'), url('../images/popup_monthly.png'), url('../images/popup_daily.png'), url('../images/popup_review.png'), url('../images/popup_monthly.png'), url('../images/popup_memo.png');}
/*#endregion*/

/*#region ========== Util ========*/
#_loading {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;justify-content: center;align-items: center;z-index: var(--z-9);}
#_loading::before{content: '';position: absolute; width: 14rem;height:14rem; display: block;border-radius: 50%;background-color: var(--black);z-index: -1;}
#_loading::after{content: '';width: 13rem;height:13rem; display: block;border-radius: 50%;background:url('../images/loading.gif') no-repeat center top/cover;}
#_loading.active {display: flex;}
/* Overlay */
.overlay {position: fixed;top: 0;left: 0;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}
.popup.active ~ .overlay, #_loading.active ~ .overlay{opacity: 1;visibility: visible;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: var(--z-3);}
.popup.active.bg-invisible ~ .overlay{background-color: rgba(0, 0, 0, 0)}
/* Animation */
.fadeIn{animation: ani-fadeIn 1s ease forwards;}
.fadeOut{animation: ani-fadeIn 1s ease reverse forwards;}
.fadeOut.fast{animation: ani-fadeIn .5s ease reverse forwards;}
.fadeInOut{animation: ani-fadeInOut 1.5s ease-in-out infinite;}
.ani-bounce{animation: ani-bounce 1s ease-in-out infinite;}
.ani-wiggle{animation: ani-wiggle 0.4s ease-in-out infinite;}
.ani-pulseFade{animation: ani-pulseFade 1.5s ease-in-out infinite;}
@keyframes ani-fadeIn{0%{opacity: 0;}100%{opacity: 1;}}@keyframes ani-fadeIn2{0%{opacity: 0;}95%{opacity: 0;}100%{opacity: 1;}}
@keyframes ani-fadeInOut{0%{opacity: 0;}50%{opacity: 1;} 100%{opacity: 0;}}
@keyframes ani-bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-.8rem); } } .attention-bounce {animation: ani-bounce 1s ease-in-out infinite; }
@keyframes ani-wiggle {	0%, 100% {transform: rotate(0deg);}	25% {transform: rotate(2deg);} 75% { transform: rotate(-2deg);}}
@keyframes ani-pulseFade {0% { transform: scale(1); opacity: 0.3;}50% {transform: scale(1.1); opacity: 1;}100% { transform: scale(1); opacity: 0.3;} }
/*#endregion*/

/*#region ========== Component ==========*/
.tab{height: 6rem; display: flex; padding: var(--gap);background-color: var(--white);border-bottom: 1px solid var(--divider);text-align:center;}
.tab > * {flex:1;padding: var(--gap-sm);border: 1px solid var(--primary);border-right: none; background-color: var(--white);color: var(--primary);}
.tab > *:first-child{border-top-left-radius: var(--radius);border-bottom-left-radius: var(--radius);}
.tab > *:last-child{border-top-right-radius: var(--radius);border-bottom-right-radius: var(--radius);border-right: 1px solid var(--primary);}
.tab > *:active, .tab > *.active{background-color: var(--primary);color: var(--white);}.tab > *.active{pointer-events: none;cursor: default;}
.panel{background-color: var(--white);border-top: 1px solid var(--divider);border-bottom: 1px solid var(--divider);}
.panel.bo{border: 1px solid var(--divider);}
.btn{background-color: var(--white);color: var(--accent);border: 1px solid var(--accent);border-radius: var(--radius-sm);padding: var(--gap-xsm) var(--gap);white-space: nowrap;}
.btn:active, .btn.active{background-color: var(--accent-light-very);}
.btn.btn-fill{background-color: var(--accent);color: var(--white);border-color: var(--accent);}
.btn.btn-fill:active, .btn.btn-fill.active{background-color: var(--accent-dark);}
.btn.btn-gray{color: var(--gray-dark);border-color: var(--gray-dark);}
.btn.btn-gray:active, .btn.btn-gray.active{background-color: var(--gray-light);}
.btn.btn-primary{color: var(--white);background-color: var(--primary-dark); border-color: var(--primary-dark);}
.btn.btn-primary:active, .btn.btn-primary.active{background-color: var(--primary-dark-deep) !important;}
.btn.btn-white{background-color: var(--white);color: var(--primary);border-color: var(--white);}
.btn.btn-white:active, .btn.btn-white.active{background-color: var(--primary-light-very)!important;}

.link{color:var(--accent);text-decoration:underline;text-underline-offset: .25em;}

.list{background-color: var(--white);}.list.bo{border: 1px solid var(--divider);}
.list > * {border-bottom: 1px solid var(--divider);padding: var(--gap);}.list.sm > *{padding: var(--gap-sm);}
.list > *:not(.no-hover):active, .list > *.active{background-color: var(--gray-light);}
/* .list > *:last-child{border-bottom: none;} */
.list.words > *{display: grid; grid-template-columns: repeat(2, 1fr);}
.input{width: 100%;padding: var(--gap-sm);outline: none;}
.input::placeholder{color: var(--muted);}
.input.ty1{border: 1px solid var(--divider);border-radius: var(--radius-sm);background-color: var(--white);color: var(--text);padding: var(--gap);}
.input.ty1:focus{border-color: var(--primary);box-shadow: 0 0 0 2px rgba(255, 164, 21, 0.2);}
.input.bo{outline: 1px solid var(--divider);}

.label{--label-c:#42c5dc;background-color: var(--label-c, #42c5dc);color: var(--white);padding: .1em 1em;border-radius: var(--radius-sm);white-space: nowrap;}

.checkbox{appearance: none;-webkit-appearance: none;position: relative;width: 2.6rem;height: 2.5rem;outline: none;}
.checkbox::before {content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../images/check_off.png'),url('../images/check_on.png')}
.checkbox::after{content: '';position: absolute;inset: 0;display: block;background: url('../images/check_off.png') no-repeat center/cover;}
.checkbox:checked::after{background-image: url('../images/check_on.png');}
.checkbox:disabled{ cursor: not-allowed; opacity: .6; }

.img-switch{--img-off: url("../images/toggle_off.png");--img-on : url("../images/toggle_on.png");  appearance: none;  -webkit-appearance: none;width: 4.7rem;  height: 2.5rem;  background: var(--img-off) no-repeat center/contain;  border: 0;  cursor: pointer;  vertical-align: middle;}
.img-switch:checked{background-image: var(--img-on);}
.img-switch:focus-visible{ outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }
.img-switch:disabled{ opacity: .5; cursor: not-allowed; }

.img-profile{ width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; }
.dotted{border-radius: 50%;width: 1rem;height: 1rem;display: inline-block;background: var(--primary);margin-right: var(--gap-xs);}

.chk-simple input[type="checkbox"] {  appearance: none;  -webkit-appearance: none;  width: 2.6rem;  height: 2.5rem;  background: url('../images/check_off.png') no-repeat center/contain;  border: none;  cursor: pointer;  vertical-align: middle;  transition: opacity .15s;}
.chk-simple input[type="checkbox"]:checked { background: url('../images/check_on.png') no-repeat center/contain;}
.chk-simple input[type="checkbox"]:disabled { opacity: 0.5;  cursor: not-allowed;}

.no-data{display:flex;flex-direction: column;justify-content: center;align-items: center;gap: var(--gap);padding: var(--gap-lg);color: var(--muted);text-align: center;font-size:1.1em;flex:1;}
.no-data::before{content: '';display: block;width:11.6rem;height:7.4rem;background: url('../images/img_no_contents.png') no-repeat center/contain;}
.title-book {aspect-ratio: 3 / 4;max-width: 22rem;border-radius: var(--radius-sm);box-shadow: 0 0 0.5rem rgba(0,0,0,0.32), 0 1rem 1.2rem rgba(0,0,0,0.18);}

/*#endregion*/
/*#region ========== Layout ==========*/
#page-content {height: 100%;min-height: 100%;background-color: var(--background);}
.container{background-color: var(--background);display:flex;flex-direction: column;width:clamp(var(--size-min),var(--size-width),var(--size-max));min-height: 100%; position: relative;margin: auto;overflow-x:hidden;}
header.header{height: 4.8rem;	width:clamp(var(--size-min),var(--size-width),var(--size-max));	display: flex;align-items: center;justify-content: space-between;color: var(--white);background-color: var(--primary);z-index: var(--z-1); position: fixed;top: 0;left: 50%;transform: translateX(-50%);box-shadow: 0 .2rem .5rem rgba(0, 0, 0, 0.1);}
header.header > * {white-space: nowrap;}
main.main{margin-top: 4.8rem;margin-bottom: 6rem;width: 100%;flex: 1;position: relative;display: flex;flex-direction: column;}main.main.no-footer{margin-bottom: 0;}
footer.footer{height: 6rem;width:clamp(var(--size-min),var(--size-width),var(--size-max));background-color: var(--default);z-index: var(--z-2); position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);background-color: var(--bg-footer);box-shadow: 0 -0.1rem 0.1rem rgba(0, 0, 0, 0.08);}

.header-title{display: flex;justify-content: center;align-items: center;}
.header-title::before{content: '';display: block;width: 8rem;height: 5rem;background:url('../images/icon_logo_actionbar.png') no-repeat center/cover;}

.link-add-child, .link-download{display: block;width: 8rem;height: 5rem;background: url('../images/icon_child.png') no-repeat center/cover;}
.link-add-child::before {content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../images/icon_child.png'),url('../images/icon_child_no.png')}
.link-add-child:active{background-image: url('../images/icon_child_no.png');}
.link-download{background-image: url('../images/icon_download.png');}

.link-back{display: flex;justify-content: center;align-items: center;}
.link-back::before{content: "";display: block;width: 5.3rem;height: 5rem;background:url('../images/icon_actionbar_back.png') no-repeat center/cover;}

.link-arrow{display: flex;justify-content: space-between;align-items: center;padding: var(--gap);}
.link-arrow::after{content: '';width: .9rem;height: 1.6rem;background: url('../images/icon_arrow_list.png') no-repeat center/cover;display: block;}

footer.footer nav.nav{min-height: 100%; display: grid;grid-template-columns: repeat(4, 1fr);}
footer.footer nav.nav a::after{content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../images/icon_navi_alarm.png'),url('../images/icon_navi_alarm_select.png'),url('../images/icon_navi_attendance.png'),url('../images/icon_navi_attendance_press.png'),url('../images/icon_navi_study.png'),url('../images/icon_navi_study_select.png'),url('../images/icon_navi_more.png'),url('../images/icon_navi_more_select.png');	}
footer.footer nav.nav a{display: flex;flex-direction: column; justify-content: center;align-items: center;gap: var(--gap-xxsm); color: var(--gray-dark);font-size: .9em;}
footer.footer nav.nav a::before{content: "";display: flex;justify-content: center; width: 3rem;height: 2.4rem;background: url('../images/icon_navi_alarm.png') no-repeat center/cover;}
footer.footer nav.nav a.active, footer.footer nav.nav a:active{color: var(--orange);}
footer.footer nav.nav a.active::before, footer.footer nav.nav a:active::before{background-image: url('../images/icon_navi_alarm_select.png');}
footer.footer nav.nav a:nth-child(2)::before{background-image: url('../images/icon_navi_attendance.png');}
footer.footer nav.nav a:nth-child(3)::before{background-image: url('../images/icon_navi_study.png');}
footer.footer nav.nav a:nth-child(4)::before{background-image: url('../images/icon_navi_more.png');}
footer.footer nav.nav a:nth-child(2).active::before, footer.footer nav.nav a:nth-child(2):active::before{background-image: url('../images/icon_navi_attendance_press.png');}
footer.footer nav.nav a:nth-child(3).active::before, footer.footer nav.nav a:nth-child(3):active::before{background-image: url('../images/icon_navi_study_select.png');}
footer.footer nav.nav a:nth-child(4).active::before, footer.footer nav.nav a:nth-child(4):active::before{background-image: url('../images/icon_navi_more_select.png');}
footer.footer nav.nav a:not(.btn-more-menu).active{pointer-events: none;cursor: default;}

.close-dialog{position: absolute;right: 0;font-size: 1.5em;z-index: var(--z-3);line-height:1.5}.close-dialog a{padding: var(--gap);outline:none;}
.container-dialog{width: clamp(calc(var(--size-min) - var(--gap-xlg)), 90%, 40rem);text-align: center;}
#_dialog_calendar ul{height: 15rem;}#_dialog_calendar ul li{display: grid;}#_dialog_calendar ul li a{display: flex;justify-content: center; align-items: center;}
#_dialog_calendar ul li a:active, #_dialog_calendar ul li a.active{background-color: var(--accent-light-very);}

#_dialog_words ul.header{height: 4.5rem; background-color: var(--accent-light);color: var(--white);align-items: center;}

#_dialog_add_child{text-align: left;}
#_dialog_add_child header{height: 4.8rem;padding: 0 var(--gap);display: flex;align-items: center;border-bottom: 2px solid var(--divider);}
#_dialog_add_child footer{height: 5rem; box-shadow: 0 -0.1rem .4rem rgba(0, 0, 0, 0.1);padding: 0 var(--gap);border-top: 1px solid var(--divider);}
#_dialog_add_child footer a{display: flex;align-items: center;gap: var(--gap-xsm);margin-left: auto;}
#_dialog_add_child .add_child{position: absolute;bottom: 5rem;width: 100%;display:none;align-items: center;gap: var(--gap-sm); padding:var(--gap);border-top: 1px solid var(--divider);background-color: var(--white);}
#_dialog_add_child .add_child.active{display: flex;}

.chaci-list{display: grid;grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));column-gap: var(--gap-lg);row-gap: var(--gap);place-items: center;}
.chaci{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.chaci a::before {content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../images/icon_degree_c.png'),url('../images/icon_degree_a.png'),url('../images/icon_degree_b.png'),url('../images/ic_review_a.png'),url('../images/ic_review_b.png'),url('../images/ic_review_c.png'),url('../images/icon_cha_no.png'),url('../images/icon_cha_test.png'),url('../images/icon_cha_complete.png'),url('../images/icon_cha_ing.png'),url('../images/icon_monthly_test_disable.png')}
.chaci a{display: inline-block;width: 7rem;height: 7rem;background:url('../images/icon_cha_no.png') no-repeat center/contain; margin-bottom: var(--gap-sm);}
.chaci a:active{filter: brightness(0.8)}
.chaci small{color: var(--blue);white-space: nowrap;}.chaci small::before, .chaci small::after{content: "\00A0";}
.chaci.ing a{background-image: url('../images/icon_cha_ing.png');}
.chaci.end a{background-image: url('../images/icon_cha_complete.png');}
.chaci.monthly a{background-image: url('../images/icon_monthly_test_disable.png');}
.chaci.monthly.ing a{background-image: url('../images/icon_monthly_test_ing.png');}
.chaci.monthly.end a{background-image: url('../images/icon_cha_test.png');}

.chaci-list.words{grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));column-gap: var(--gap-lg);row-gap: var(--gap);place-items: center;}
.chaci-list.words a{width: 5rem;height: 5rem;}
.chaci-list.words .chaci.end a{background-image: url('../images/icon_degree_a.png');}
.chaci-list.words .chaci.try a{background-image: url('../images/icon_degree_b.png');}

.chaci-list.review .chaci.ing a{background-image: url('../images/ic_review_a.png');}
.chaci-list.review .chaci.end a{background-image: url('../images/ic_review_b.png');}
.chaci-list.review .chaci.pass a{background-image: url('../images/ic_review_c.png');}
.chaci-list.review .chaci h5{font-size: .75em;}
.chaci-list .chaci h5{white-space:nowrap;}

.__title {--w:12rem;font-size: 2rem;width: calc(100vw - var(--w));white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.certificate-container{padding-top: 15rem;line-height: 1.4; display: flex;flex-direction: column;justify-content: center;align-items: center; width: 100%;min-height: 60rem; background: url('../images/ic_certi_bg_a.png') no-repeat center/cover;}
.certificate-container.lv-2 {background-image: url('../images/ic_certi_bg_b.png');}
.certificate-container.lv-3 {background-image: url('../images/ic_certi_bg_c.png');}
.certificate-container.lv-4 {background-image: url('../images/ic_certi_bg_d.png');}
.certificate-container.lv-5 {background-image: url('../images/ic_certi_bg_e.png');}
.certificate-container.lv-6 {background-image: url('../images/ic_certi_bg_f.png');}
.certificate-container b{color:#176223;}
.certificate-container.lv-2 b{color:#306f93;}
.certificate-container.lv-3 b{color:#6e3c21;}
.certificate-container.lv-4 b{color:#644e8d;}
.certificate-container.lv-5 b{color:#a83349;}
.certificate-container.lv-6 b{color:#d2c528;}
.certificate-container .user{color:#4aace5 !important;}

.more-menu{
    position: fixed;bottom: 6rem;left: 50%;transform: translateX(-50%);
    width:clamp(var(--size-min),var(--size-width),var(--size-max));
    background-color: var(--white);z-index: var(--z-4);
    display: grid;grid-template-columns: repeat(3, 1fr);
    transition: var(--tran);
    opacity: 0;pointer-events: none;
    grid-auto-rows: minmax(12rem, auto);
}
.more-menu.active{opacity: 1;pointer-events: auto;}
.more-menu a{
    display: flex;flex-direction: column;justify-content: center;align-items: center;
    padding: var(--gap);gap: var(--gap);border-left: 1px solid var(--divider);border-top: 1px solid var(--divider);
}
.more-menu a:active, .more-menu a.active{background-color: var(--gray-light);}.more-menu a.active{pointer-events:none;cursor:default;}
.more-menu a:first-child, .more-menu a:nth-child(4), .more-menu a:nth-child(7){border-left: none;}

.more-overlay {    position: fixed;    inset: 0;    background-color: rgba(0,0,0,0.6);    backdrop-filter: blur(5px);    opacity: 0;    pointer-events: none;    transition: var(--tran);    z-index: var(--z-1);}
.more-menu.active + .more-overlay {    opacity: 1;    pointer-events: auto;}

.watermark-overlay{display: none;font-size:clamp(5rem, calc(10vw + 10vh + 5vmin), 8rem);color: rgba(0, 0, 0, 0.1);-webkit-text-stroke: 2px rgba(0, 0, 0, 0.05);z-index: var(--z-3,3);font-weight: bold; position: fixed;top: 0;left: 0;width: 100%;height: 100%;align-items: flex-start;justify-content: center;pointer-events: none;}
.watermark-overlay.active{display: flex !important;}
/*#endregion*/

/*#region ========== Page Style (Login) ============*/
.wrapper-login{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: var(--gap-lg); background: url('../images/bg_intro.png') no-repeat center/cover;background-color: #ffa415;}
.wrapper-login .input{padding: 1.5rem;}.wrapper-login .input::placeholder{color: var(--text);}
.wrapper-login .input:first-child{border-top-left-radius: var(--radius);border-top-right-radius: var(--radius);}
.wrapper-login .input:last-child{border-bottom-left-radius: var(--radius);border-bottom-right-radius: var(--radius);  }
.wrapper-login .btn{padding: 1.25rem;}
.wrapper-login .list > *:active{background-color: var(--primary-light-very);}
/*#endregion*/

/*#region ========== Page Style (Notice) ============*/
.container-noti{max-height: calc(100vh - 16.8rem);}/*header + tab + footer = 16.8rem*/
.noti-title{margin-bottom: var(--gap-lg);}
.noti-content a{color: var(--accent);display: inline-block; overflow: hidden;text-overflow: ellipsis;white-space: wrap;width:100%;}
/*#endregion*/

/*#region ========== Page Style (출석부) ============*/
.cal__header{display:flex;align-items:center;justify-content: space-between; gap: var(--gap);padding: var(--gap-sm);border-bottom: 1px solid var(--divider);}
.cal__header h4{font-size: 1.8rem;}
.btn-nav::before {content: "";position: absolute;width: 0;height: 0;overflow: hidden;background-image: url('../../images/icon_arrow_left.png'),url('../../images/icon_arrow_left_press.png'),url('../../images/icon_arrow_right.png'),url('../../images/icon_arrow_right_press.png')}
.btn-nav{ display: block; width: 4rem; height: 4rem;background: url('../../images/icon_arrow_left.png') no-repeat center/contain;}
.btn-nav.right{ background-image: url('../../images/icon_arrow_right.png'); }
.btn-nav:active{ background-image: url('../../images/icon_arrow_left_press.png'); }
.btn-nav.right:active{ background-image: url('../../images/icon_arrow_right_press.png'); }
  /* 요일 행 */
.cal__week{ display:grid;grid-template-columns:repeat(7,1fr);background:var(--gray-light); text-align: center;padding: var(--gap) 0;}
  /* 월 뷰포트 */
.cal__viewport{ overflow:hidden;position:relative; touch-action: pan-y; -ms-touch-action: pan-y;}
.cal__track{ display:flex;width:300%;transform:translateX(-33.333%); }
  /* 월 그리드 (7x6) */
.cal__month{width:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:calc((min(100vw,var(--size-max)) - 2*var(--gap)) / 7);background:var(--white);border-top:1px solid var(--divider);}
  /* 개별 날짜 셀 */
  #cal-attendance .day{ position:relative;background:var(--white); border-right:1px solid var(--divider);border-bottom:1px solid var(--divider); padding:.35rem .45rem .4rem;font-size:1.2rem;cursor: pointer;}
  #cal-attendance .day:nth-child(7n){ border-right:0; } /* 토요일 끝선 제거 */
  #cal-attendance .day--other{ opacity:.5 }
  #cal-attendance .day--sun .day__num{ color:var(--second) }
  /* 오른쪽 위 태그 (W/E/T) */
  #cal-attendance .day__badges{ position:absolute;top:.28rem;right:.35rem;display:flex;font-size:1rem }
  #cal-attendance .tag{ font-weight:800;line-height:1 }
  .dot{ width:.7rem; height:.7rem;display: inline-block; border-radius: 50%;}
  .tag--W, .tag--R{ color:var(--green);font-size: 1.2em;}
  .tag--E{ color:var(--accent);font-size: 1.2em;}
  .tag--T{ color:var(--red);font-size: 1.2em;}.tag--D{ color:var(--primary);font-size: 1.2em;}
  /* 점 + 시간 라인 */
  #cal-attendance .list-times{ margin-top:var(--gap-xsm);display:grid; }
  #cal-attendance .row-time{ display:flex;align-items:center;gap:var(--gap-xsm);font-size:1rem;color:var(--gray-dark) }
  #cal-attendance .dot{ width:.55rem;height:.55rem;}
  .dot--in{ background:var(--primary);}
  .dot--out{ background:var(--accent);}
  /* 오늘/선택 강조 */
  #cal-attendance .day--today{ outline:0.2rem solid var(--primary);outline-offset:-0.2rem }
  #cal-attendance .day--selected{ box-shadow:0 0 0 .2rem var(--second) inset }
  #cal-attendance .day--selected::before{content:'';position:absolute;left:-0.1rem;top:-0.1rem;width:0;height:0; border-top:1rem solid var(--second);border-right:1rem solid transparent;}
  /* 범례 */
  #cal-attendance .cal__legend{display:flex;gap: var(--gap);justify-content: end;  align-items:center;color:var(--muted); font-size:1.4rem;padding:var(--gap);}
  #cal-attendance .cal__legend .dot{ width:.7rem; height:.7rem; }
  /* ===== 상세내용 패널 ===== */
  .att-detail{background:var(--white);}
  .att-detail[hidden]{display:none}
  .att-detail__head{border-bottom:1px solid var(--divider);padding:var(--gap);color: var(--gray-dark);background-color: var(--background);}
  .att-detail__section{display: grid;}
  .att-detail__section > * {border-bottom:1px solid var(--divider);}
  .att-detail__section h6{padding:var(--gap);color: var(--gray-dark);display: flex;gap: var(--gap-sm);align-items: center;}
  .att-detail__section li{padding: var(--gap);padding-left: var(--gap-lg);align-items: center;}
  #attDetailTimes{padding-bottom: var(--gap);}#attDetailTimes li{display: flex;align-items: center;gap: var(--gap-sm);padding-bottom: 0; }#attDetailTimes li strong{color:var(--text);}
/*#endregion*/

/*#region ========== Page Style (학습현황) ============*/
/* 월 선택 인풋 커스텀 스타일 */
input[type="month"]{position: relative;appearance: none;-webkit-appearance: none;-moz-appearance: none;background: transparent url("../../images/icon_calander.png") no-repeat right center / 2.5em;border: none;color: var(--text);cursor: pointer;width: 15rem;}
/* Safari(iOS) 기본 화살표 제거 */
input[type="month"]::-webkit-calendar-picker-indicator {opacity: 0;cursor: pointer;position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
/* hover / active 시 약간의 반응 */
input[type="month"]:active {opacity: 0.85;}

.select-books{border-bottom: 1px solid var(--divider);}
.select-books label{background-color: var(--white);border-top: 1px solid var(--divider);cursor: pointer;transition: var(--tran);}
.select-books label:has(input:checked){background-color: var(--gray-light);}
.select-books input{appearance: none;-webkit-appearance: none;position: absolute;width: 0;height: 0;opacity: 0;cursor: pointer;}
.select-books input:checked + i{width: 2rem;height: 2rem;display: block;background:url('../images/icon_select.png') no-repeat center / contain;}
.select-levels {
    border-bottom: none;
    /* 가로 스크롤 행 */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 스냅 스크롤 */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gap);
    /* 모바일 트렌드: 왼쪽 정렬 + 가로 패딩 */
    justify-content: flex-start;
    padding-inline: var(--gap);
    gap: var(--gap-sm);
    scrollbar-width: none;
}
.select-levels input{display: none;}
.select-levels label{display: flex;justify-content: center;align-items: center;color: var(--white); width: 6.5rem;height: 6.5rem;background: var(--gray);border-radius: 50%;cursor: pointer;transition: var(--tran);text-align: center;line-height: 1.3;position: relative;}
.select-levels label:has(input:checked) {outline: 3px solid var(--accent-light);}
.select-levels label:has(input:checked), .select-levels label:active, .select-levels label.active{background-color: var(--gray-dark);}
.select-levels label.ing{background-color: var(--primary);}
.select-levels label.ing:has(input:checked), .select-levels label.ing:active, .select-levels label.ing.active{background-color: var(--primary-dark);}
.select-levels label.end{background-color: var(--green);}
.select-levels label.end:has(input:checked), .select-levels label.end:active, .select-levels label.end.active{background-color: var(--green-dark);}
.select-levels h3{margin-bottom: -.5rem;}
.select-levels h3::before{content: 'Level';font-weight: normal;font-size: .5em;display: block;}
.select-levels label.pass::after{content: "";display: block;width: 1.6rem;height: 2.4rem;background: url('../images/ic_certi.png') no-repeat center/contain;  position: absolute;bottom:0;right:.3rem;}
.select-levels label {flex: 0 0 auto;scroll-snap-align: center;}
.select-levels::-webkit-scrollbar{display: none;}

.select-ebooks a{display: flex; align-items: center;gap: var(--gap);padding: var(--gap);background-color: var(--white);}
.select-ebooks a:active, .select-ebooks a.active{background-color: var(--gray-light);}
.select-ebooks img{height: 10rem;object-fit: cover;}

table.table{width: 100%;border-collapse: collapse;text-align: center;font-size: .875em;background-color: var(--white);}
table.table th{padding: var(--gap);background-color: var(--accent-light);color: var(--white);}
table.table td{border-bottom: 1px solid var(--divider);padding: var(--gap);vertical-align: middle;}
table.table .bg-dark{background-color:#64b3cd; color: var(--white);}
table.table .bg-dark-deep{background-color:#3491b0;color: var(--white);}
table.table.ebook td{text-align: left;padding-top: calc(var(--gap) * 1.5);padding-bottom: calc(var(--gap) * 1.5);}
.ic_r{display: inline-block;width: 1.7rem;height: 1.7rem;background: url('../images/popup_review.png') no-repeat center/contain; margin-right: .2rem;}
.ic_r.sm{width: 1.2rem;height: 1.2rem;}
._bar-area{position: relative; width: 100%; height: .4rem; background: var(--gray-light); border-radius: .2rem; overflow: hidden; margin-top: .4rem;}
._bar{position:absolute;top:0;left:0;  display: inline-block;height: .4rem;background: var(--primary-light);}
table.table.point{font-size: .8em; color: var(--gray-dark);}table.table.point th{background-color: var(--primary-light-very);color: var(--primary-dark);white-space: nowrap;}
table.table.point td:first-child{color: var(--text);}

/* 차트 컨테이너 */
.bar-chart {
--h: 16rem;           /* 차트 높이 */
--bar-w: .9rem;       /* 막대 너비 (얇게) */
--gap: var(--gap-xsm);        /* 카테고리 간격 */
position: relative;
height: var(--h);
padding: 2rem 1rem 2.2rem 3.8rem; /* 왼쪽 = Y축/라벨 영역 */
/* 0,50,100 수평 그리드라인 */
background: linear-gradient(to top, var(--divider) 1px, transparent 1px) -40% 0/120% var(--h) no-repeat;
margin-bottom: 2rem;
font-size: .8em;
}
/* Y축 세로 라인 */
.bar-chart::before{
content:"";
position:absolute; left:3.6rem; top:0; bottom:0;
width:2px; background:var(--divider);
opacity:.9;
}
/* Y축 라벨(100/50/0) */
.bar-chart .y-labels{
position:absolute; left:0; top:0; bottom:0; width:3.4rem;
display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
font-size:.9em; color:var(--gray-dark);
padding:.2rem .2rem .1rem 0;
}
/* X영역 */
.bar-chart .x-area{
height: calc(var(--h) + 2rem);
display:flex; align-items:flex-end; gap:var(--gap);
margin-left:.4rem;
margin-top: -1.6rem;
}
/* 그룹 */
.bar-chart .group{
display:flex; flex-direction:column; align-items:center; gap:.8rem; min-width:5.6rem;
flex:1 1 0;height: 100%;
}
/* 막대 2개(내점수/동일연령) */
.bar-chart .bars{ display:flex; align-items:flex-end; gap:.5rem; height:100%; }
.bar-chart .bar{
width:var(--bar-w);;
height:calc(var(--val,0) * 1%);
transition:height .5s ease;
background:var(--gray-light);
}
.bar {
    height: calc(var(--val) * 1%);
    transition: height 0.5s ease;
}
.bar.orange{ background:var(--primary); }  /* 오렌지 */
.bar.blue{   background:var(--accent);  }  /* 블루   */

/* 하단 라벨 */
.bar-chart .label{ text-align:center; font-size:.95em; color:var(--text); white-space:nowrap;background-color: transparent; }

/* 범례: 상단 중앙 정렬(이미지처럼) */
.chart-legend{
display:flex; justify-content:end; gap:var(--gap);
align-items:end; font-size:.95em;margin-bottom: var(--gap);
}
.legend-item{ display:flex; align-items:center; gap:.4rem; }
.legend-swatch{ width:1.5rem; height:.5rem; display:inline-block; }

/*#endregion*/

/*#region ========== Page Style (결제현황) ============*/
.item-row{display:grid;grid-template-columns:3rem 1fr auto;gap:var(--gap);align-items:center;padding:var(--gap-lg) var(--gap);background:var(--white)}
.item-row .title{font-weight:700}
.item-row small{color:var(--gray-dark)}
.item-row .price{font-weight:700;color:var(--red);text-align:right;white-space:nowrap}
.sum-line{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--gap);border-top:1px solid var(--divider);border-bottom: 1px solid var(--divider);}
.sum-line b{font-size:1.05em}
.point-box{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;padding-top:var(--gap);background:var(--white);border-top:1px solid var(--divider)}
.point-input{display:flex;align-items:center;gap:.6rem}
.point-input label{min-width:6rem}
.paybar{position:sticky;bottom:0;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem var(--gap);background:var(--white);}
.empty{padding:3rem 1rem;text-align:center;background:var(--white);border-bottom:1px solid var(--divider)}
/*#endregion*/

/*#region ========== Device (Responsive) ============*/

/* 세로 모드 */
/* @media (orientation: portrait) and (max-width: 1024px){		
	.no-pc{display: none !important;}.no-mobile{display: block !important;}
	:root {--fp:50%; --gap: 1.4rem;--radius: .7rem;--size-width: 100%;}	
} */
/* PC 환경에서만 :hover 스타일이 활성화되도록 설정 -> 뒤로가기할때 잔상이 남음 방지 */
@media (hover: hover) and (pointer: fine) {
	.link-add-child:hover{background-image: url('../images/icon_child_no.png');}
	footer.footer nav.nav a:hover{color: var(--orange);}
	footer.footer nav.nav a:hover::before{background-image: url('../images/icon_navi_alarm_select.png');}
	footer.footer nav.nav a:nth-child(2):hover::before{background-image: url('../images/icon_navi_attendance_press.png');}
	footer.footer nav.nav a:nth-child(3):hover::before{background-image: url('../images/icon_navi_study_select.png');}
	footer.footer nav.nav a:nth-child(4):hover::before{background-image: url('../images/icon_navi_more_select.png');}
    #_dialog_calendar ul li a:hover{background-color: var(--accent-light-very);}

    .tab > *:hover{background-color: var(--primary);color: var(--white);}
    .btn:hover{background-color: var(--accent-light-very);}
    .btn-fill:hover{background-color: var(--accent-dark);border-color: var(--accent-dark);}
    .btn-gray:hover{background-color: var(--gray-light);}
    .btn-primary:hover{background-color: var(--primary-dark-deep);}
    .btn.btn-white:hover{background-color: var(--primary-light-very);}
    .list > *:not(.no-hover):hover{background-color: var(--gray-light);}
    .wrapper-login .list > *:hover{background-color: var(--primary-light-very);}

    .select-ebooks a:hover{background-color: var(--gray-light);}
    .more-menu a:hover{background-color: var(--gray-light);}
    .month-chip:hover{background-color: var(--primary-light-very)!important;}
}
/*#endregion*/
/*라인체크용표시 주석-529*/

/*#region ========== Slide Detail View (공용 디테일 패널) ==========*/
#slide-view {position: fixed;inset: 0;z-index: var(--z-4);display: flex;justify-content: center;pointer-events: none; }
#slide-view.active {pointer-events: auto;}
/* 슬라이드 프레임: 부모 페이지와 같은 폭, 내부 스크롤 컨테이너 */
.slide-view__frame {width: clamp(var(--size-min), var(--size-width), var(--size-max));max-width: 100vw;height: 100%;max-height: 100%;background-color: var(--background);transform: translateX(100%);transition: transform .32s cubic-bezier(0.22, 0.61, 0.36, 1);box-shadow: 0 0 .8rem rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;overflow-y: auto;overflow-x: hidden;}
/* 활성화 시 오른쪽 → 0 으로 슬라이드 인 */
#slide-view.active .slide-view__frame {transform: translateX(0);}
/* 패널 뒤 어두운 오버레이 */
#slide-view-overlay {position: fixed;inset: 0;background-color: rgba(0,0,0,.25);opacity: 0;pointer-events: none;transition: opacity .25s ease-out;z-index: var(--z-3);}
#slide-view-overlay.active {opacity: 1;pointer-events: auto;}
/*#endregion 537*/

/* E-Book 리포트 총점 라운드 */
.score-circle {flex-shrink: 0;width: 7rem;height: 7rem;position: absolute;right:var(--gap);margin-top:var(--gap-lg);}
.circle-track {width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(var(--accent) calc(var(--value, 0) * 1%), #e0e0e0 0%);display: flex;align-items: center;justify-content: center;position: relative;}
.circle-track::before {content: '';position: absolute;width: 70%;height: 70%;background: #fff;border-radius: 50%;z-index: 1;}
.circle-text {position: absolute;z-index: 2;font-size: 2rem;font-weight: bold;color: var(--accent);}

.listen-actions button{min-width:9rem;}
.report-list .row{gap:var(--gap);}