@import url(variable.css);
@import url(font.css);
@import url(reset.css);

.w100p {width:100%;}
.input_list{display:flex; flex-direction:column; gap:var(--size8);}
.input_custom{background:#fff; padding:var(--size6) var(--size14); border-radius:var(--size16); border:var(--size2) solid #fff;}
.input_custom input{border:none; width:100%; background:transparent;}
.input_custom input::placeholder{color:#D0D0D0;}
.input_custom label{font-size:var(--size14); display:block; margin-bottom:var(--size-6);}
.input_custom.focus {border-color:#111; }
.input_custom.error {border-color:#FF2B2F;}

.checkbox_custom {display:flex; gap:var(--size6); align-items:center;}
.checkbox_custom input{appearance:none}
.checkbox_custom label{cursor:pointer}
.checkbox_custom .mark{width:var(--size16); height:var(--size16); background:url(../img/ic_checkbox_default.svg) no-repeat center / contain;}
.checkbox_custom .text{ font-size:var(--size16); color:#186272;}
.checkbox_custom input:checked ~ .mark{background:url(../img/ic_checkbox_checked.svg) no-repeat center / contain;}

.custom__select__area{position:relative;}
.custom__select{width:var(--size76); border:var(--size2) solid #186272; font-size:var(--size16); font-weight:700; padding:var(--size7) var(--size12); line-height:1; border-radius:1000vw; background:#fff url(../img/ic_select_arrow.svg) no-repeat var(--size50) center / var(--size16) auto}
.custom__select span{line-height:1; color:#186272}
.custom__select__list__wrap{display:none; position:absolute; left:0; top:var(--size38); background:#F2F6FC; width:100%; border-radius:var(--size16); padding:var(--size8) var(--size4);}
.custom__select__list{max-height:232px; overflow:auto;}
.custom__select__list::-webkit-scrollbar {width: var(--size3); height: var(--size3);}
.custom__select__list::-webkit-scrollbar-thumb { background:rgba(24,98,114,0.2); border-radius:1000vw}
.custom__select__list .custom__select__option{padding:var(--size4) var(--size8); }
.custom__select__list .custom__select__option:first-child{padding-top:0;}
.custom__select__list .custom__select__option:last-child{padding-bottom:0;}
.custom__select__list .custom__select__option p{line-height:1; font-size:var(--size16); font-weight:700; color:#186272}

.btn_wrap {padding-top:var(--size8); display:flex; flex-wrap: wrap; gap:var(--size8);}
.btn {flex:1; height:var(--size80); border-radius:var(--size16); font-size:var(--size24); box-shadow:20px 10px 30px rgba(1,81,167,0.1); display:flex; align-items:center; justify-content:center; gap:var(--size6);}
.btn img{width:var(--size28)}
.btn.w100p {flex:none;}
.btn.h_sm{height:var(--size48)}

.btn.blue{background:url(../img/bg_btn_blue.svg) no-repeat center / cover; color:#fff;}
.btn.blue:hover{background:url(../img/bg_btn_blue_hover.svg) no-repeat center / cover;}
.btn.blue[disabled="disabled"]:hover{background:url(../img/bg_btn_blue.svg) no-repeat center / cover;}
.btn.pale_blue{background:url(../img/bg_btn_paleBlue.svg) no-repeat center / cover; color:#fff;}
.btn.pale_blue:hover{background:url(../img/bg_btn_paleBlue_hover.svg) no-repeat center / cover;}
.btn.pale_blue[disabled="disabled"]:hover{background:url(../img/bg_btn_paleBlue.svg) no-repeat center / cover;}
.btn.red{background:url(../img/bg_btn_red.svg) no-repeat center / cover; color:#fff;}
.btn.red:hover{background:url(../img/bg_btn_red_hover.svg) no-repeat center / cover;}
.btn.red[disabled="disabled"]:hover{background:url(../img/bg_btn_red.svg) no-repeat center / cover;}
.btn.green{background:url(../img/bg_btn_green.svg) no-repeat center / cover; color:#fff;}
.btn.green:hover{background:url(../img/bg_btn_green_hover.svg) no-repeat center / cover;}
.btn.green[disabled="disabled"]:hover{background:url(../img/bg_btn_green.svg) no-repeat center / cover;}
.btn.teal_green{background:url(../img/bg_btn_tealGreen.svg) no-repeat center / cover; color:#fff;}


.record_bar_wrap {display:flex; align-items:center;  gap:var(--size4);}
.record_bar_wrap div{width:var(--size4); height:var(--size6); border-radius:var(--size4); background:#EFEFEF;}
.record_bar_wrap div.on{background:#0555BF;}
.record_bar_wrap.mute div{height:var(--size4) !important;}


.bar_gauge_wrap{margin-top:var(--size20); margin-bottom:var(--size24); width:100%; height:var(--size20); border-radius:var(--size20); background:rgba(0,0,0,0.05); position:relative;}
.bar_gauge_wrap img{position:absolute; top:var(--size-23); left:var(--size-14); width:var(--size75)}
.bar_gauge_wrap .bar{width:0; height:100%; border-radius:1000vw; background:#FCBF29; position:relative;}
.bar_gauge_wrap .bar .bubble{display:block; position:absolute; top:var(--size-38); right:0; left:auto; background:#186272; font-size:var(--size14); line-height:1; color:#fff; padding:var(--size7) var(--size11) var(--size7) var(--size12); border-radius:var(--size8); transform:translatex(50%); width: max-content;}
.bar_gauge_wrap .bar .bubble:before{content:''; border-left:var(--size6) solid transparent; border-right:var(--size6) solid transparent; border-top:var(--size8) solid #186272; position:absolute; bottom:var(--size-6); left:50%; transform:translatex(-50%)}


.wrap{background-size:cover; background-repeat:no-repeat; width:100%; min-height:100%; height:100%; display:flex; flex-direction:column;}
.contents{padding-left:var(--size20); padding-right:var(--size20); padding-top:var(--size80); padding-bottom: var(--size20); flex:auto; overflow:auto;}
.bottom{position:absolute; bottom:0; left:0; right:0; padding:var(--size20)}


header{display:flex; align-items:center; justify-content:space-between; height:var(--size60); border-bottom:var(--size1) solid rgba(0,0,0,0.1); padding:var(--size20) var(--size18); position:absolute; top:0; left:0; width:100%; background:#88DBEE; z-index:1;}
header .logo{width:var(--size90);}
header .logo img{display:block; width:100%;}
header a{display:flex; font-size:var(--size16); color:#186272; gap:var(--size6); align-items:center;}
header a img{width:var(--size20); height:var(--size20); aspect-ratio:1/1;}
.page_tit{margin-left:auto; margin-right:auto; color:#000}

.box{width:100%; background:#fff url(../img/bg_popup_box.svg) no-repeat center top / var(--size60) auto; border-radius:var(--size16);}

.gray_wrap{background:rgba(4,85,191,0.05); border-radius:var(--size12);}

.card_wrap{display:flex; flex-direction:column; gap:var(--size8); height:100%;}
.card_wrap .btn{flex:none}
.card_wrap .btn_wrap .btn{flex:1;}
.card{border-radius:var(--size16); display:flex; color:#fff; position:relative;}
.card.date{background:#58CDE7; /* height:var(--size118); */ flex:auto; align-items: center; justify-content:center; font-size:var(--size24);  font-weight:700;}
.card.date:before{content:""; background:url(../img/bg_card_date.svg) no-repeat center / cover; height:var(--size174); position:absolute; left:var(--size-20); right:var(--size-20); top:var(--size-11)}
.card.message{background:url(../img/bg_card_message.svg) no-repeat center / cover; padding:var(--size20); gap:var(--size16)}
.card.message .text_wrap{display:flex; flex-direction:column; gap:var(--size6); justify-content:center;}
.card.message .text_wrap p{line-height:1;}
.card.message .text_wrap .tag{margin-right:auto; font-size:var(--size16); padding:var(--size2) var(--size8); border-radius:var(--size20); line-height:1; background:#488E19;}
.card.message .icon_wrap{min-width:var(--size72); width:var(--size72); height:var(--size72); border-radius:var(--size72); background:#fff; display:flex; align-items:center; justify-content:center; position:relative;}
.card.message .icon_wrap img{width:var(--size48);}
.card.message.new .icon_wrap:before{content:""; display:block; width:var(--size8); height:var(--size8); border-radius:var(--size8); background:#FF491C; position:absolute; top:var(--size20); right:var(--size14); border:var(--size2) solid #fff; box-sizing:content-box}
.card.blackboard{display:flex; flex-direction:column; gap:var(--size14); justify-content:center; align-items: center; font-size:var(--size40); line-height:1.025; padding-top: var(--size3); height:var(--size220);background:url(../img/bg_card_blackBoard.svg) no-repeat center / cover;}
.card.blackboard a{width:var(--size48);}
.card.blackboard a img{display:block; width:100%;}
.card.blackboard.completed{background-image:url(../img/bg_card_blackBoard_completed.svg); padding-bottom:var(--size29); gap:var(--size8); font-size:var(--size24); line-height:1;}
.card.blackboard.completed div{padding-top:var(--size2); display:flex; gap:var(--size12); align-items:center;}
.card.blackboard.completed div span{font-size:var(--size60); line-height:1.016;}
.card.blackboard.completed div img{width:var(--size72)}
.card.box{justify-content:center; font-size:var(--size18); color:#186272; line-height:1; text-align:center; padding:var(--size44) var(--size24) var(--size40); flex-direction:column;}
.card.box .btn{box-shadow:none;}

.page_home.bottom_btn_none .card_wrap{padding-bottom:var(--size88)}

.page_login{background-image:url(../img/bg_login.png); /* padding-top:var(--size141); */ position:relative;}
.page_login::before{content:''; display:block; width:100%; height:var(--size86); background:url(../img/bg_login_bottom.png) no-repeat center / cover; position:absolute; bottom:0; left:0;}
.page_login .contents{padding-top:var(--size20); display: flex; flex-direction: column; justify-content: center;}
.page_login > *{position:relative; }
.page_login .logo {margin-bottom:var(--size20); width:51.94%; margin-left:auto; margin-right:auto;}
.page_login .logo img{display:block; width:100%;}
.page_login .input_list{padding-bottom:var(--size16);}
.page_login .small{font-size:var(--size14); color:#28643E; text-align:center; margin-top:var(--size16);}

.page_message_list .contents{background-image:url(../img/bg_message_list.svg); background-repeat:no-repeat; background-position:center var(--size100); background-size:100% auto; display:flex; flex-direction:column; height:100%; padding-top:var(--size197); overflow:hidden;}
.page_message_list .contents:before{content:''; display:block; width:100%; height:50%; position:absolute; top:50%; bottom:0; left:0; right:0; background:#1C4F40; display:block; z-index:0;}
.page_message_list .contents:after{content:''; display:block; width:100%; height:var(--size43); position:absolute; top:auto; bottom:0; left:0; right:0; background:url(../img/bg_message_list_bottom.svg);background-repeat:no-repeat; background-position: center bottom;  background-size:100% auto; display:block; z-index:0;}
.page_message_list .contents > *{position:relative; z-index:1}
.page_message_list .contents p{color:#fff; font-size:var(--size24); font-weight:700; line-height:1.16; height:var(--size56)}
.page_message_list .contents p span{color:#94EE59;}
.page_message_list .contents .message_list_wrap{height:calc(100% - var(--size56)); overflow:auto; margin-top:var(--size40); )}
.page_message_list .contents .message_list{display:flex; flex-direction:column; gap:var(--size8); padding-bottom:var(--size12);}
.message_list li{display:flex; align-items:center; gap:var(--size4); border-radius:var(--size16); background:#fff; padding:var(--size12) var(--size16) var(--size12) var(--size12);}
.message_list .icon_wrap {width:var(--size48); height:var(--size48);}
.message_list .icon_wrap img{display:block; width:100%;}
.message_list .text_wrap{display:flex; align-items:center; gap:var(--size14); font-size:var(--size20); font-weight:700; color:#111;}
.message_list .text_wrap span{font-weight:400; color:#5C5C5C}
.message_list .btn{margin-left:auto; background-repeat:no-repeat; background-size:contain; max-width:var(--size40); width:var(--size40); height:var(--size40); border-radius:1000vw;}
.message_list .btn.play{background-image:url(../img/ic_btn_play.svg)}
.message_list .btn.pause{background-image:url(../img/ic_btn_pause.svg)}
.message_list .new .icon_wrap{position:relative;}
.message_list .new .icon_wrap:before{content:""; display:block; width:var(--size8); height:var(--size8); border-radius:var(--size8); background:#FF491C; position:absolute; top:var(--size8); right:var(--size2); border:var(--size2) solid #fff;box-sizing:content-box}

.word_card_wrap {margin-top:var(--size14); margin-bottom:var(--size24); width:100%; aspect-ratio:1/1; }
.word_card_wrap .cover{width:100%; height:100%; background:url(../img/bg_card_back.svg) no-repeat center / cover; display:flex; align-items:center; justify-content:center; display:flex; flex-direction:column; gap:var(--size41); align-items:center; justify-content:center; border-radius:var(--size16); }
.word_card_wrap .cover{display:flex; flex-direction:column; gap:var(--size41); align-items:center; justify-content:center;}
.word_card_wrap .cover p{color:#186272; font-size:var(--size28); -webkit-text-stroke:var(--size6) #fff; paint-order: stroke fill;}
.word_card_wrap .cover p span{position:relative;}
.word_card_wrap .cover img{width:var(--size162)}
.word_card_wrap .word_card{border-radius:var(--size16); border:var(--size8) solid #fff; overflow:hidden;}
.word_card_wrap .word_card img{width:100%; height:100%; display:block;}

/* 카드 뒤집기 */
.card_effect_wrap{perspective: 1000px;}
.card_effect_wrapper{ width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s;}
.card_effect{position: absolute; inset: 0; backface-visibility: hidden; /* 뒷면 숨기기 */ display: flex; align-items: center; justify-content: center top; font-weight: bold;}
.card_effect.word_card{transform: rotateY(180deg);}
.open .card_effect_wrapper{transform: rotateY(180deg);}

.practice_step{width:100%; height:19.44vw; padding:var(--size36) var(--size8) var(--size14); background-image:url(../img/bg_practice_step.svg); background-repeat:no-repeat; background-position:center bottom; background-size:contain; position:relative;}
.practice_step .bar{width:0; height:100%; background:#FCBF29; border-radius:1000vw; position:relative;}
.practice_step .bar .bubble{display:block; position:absolute; top:var(--size-40); right:0; left:auto; background:#186272; font-size:var(--size14); line-height:1; color:#fff; -webkit-text-stroke:0; padding:var(--size7) var(--size14) var(--size7) var(--size13); border-radius:var(--size8); transform:translatex(50%); width: max-content;}
.practice_step .bar .bubble:before{content:''; border-left:var(--size6) solid transparent; border-right:var(--size6) solid transparent; border-top:var(--size8) solid #186272; position:absolute; bottom:var(--size-6); left:50%; transform:translatex(-50%)}
.practice_step .flag{width:var(--size37); height:var(--size51); position:absolute; top:0; right:var(--size1);background-image:url(../img/ic_flag.svg); background-repeat:no-repeat; background-position:center top; background-size:contain;}
.practice_step span{display:block; padding-left:var(--size16); padding-top:var(--size38); line-height:1; font-size:var(--size16); color:#186272; -webkit-text-stroke:var(--size4) #fff; paint-order: stroke fill; position:absolute; top:0; left:0;}
.practice_step.goal{background-image:url(../img/bg_practice_step_goal.svg);}
.practice_step.goal .flag{background-image:url(../img/ic_flag_goal.svg);}

.feedback_step{display:flex; justify-content:space-between;}
.feedback_step .step{display:flex; align-items:center; font-size:var(--size20); color:rgba(24,98,114,0.4)}
.feedback_step .step span{color:#186272}
.feedback_step .step .tag{color:#fff;}
.feedback_step .tag{margin-left:var(--size8); padding:var(--size4) var(--size8); border-radius:1000vw; line-height:1; font-size:var(--size16); color:#fff;}
.feedback_step .tag.green{background:#70C636;}
.feedback_step .tag.red{background:#EA464A;}

.circle_step_list{display:flex; gap:var(--size8); align-items:center; justify-content:center; padding-bottom:var(--size16)}
.circle_step_list li{background-color:rgba(4,85,191,0.1); color:#186272; font-weight:700; font-size:var(--size18); width:var(--size32); height:var(--size32); display:flex; align-items:center; justify-content:center; border-radius:var(--size32);}
/* .circle_step_list li.on{background:url(../img/ic_check_circle.svg) no-repeat center / cover; font-size:0;} */
.circle_step_list_wrap{display:flex; gap:15px; justify-content:center;}

.page_practice .contents{padding-top:var(--size20)}
.page_practice .record_pause_wrap{display:none;}
.page_practice .record_pause_wrap.on{display:block;}
.page_practice .record_pause_wrap .btn_wrap{padding-top:0;}

.page_practice .record_wrap{display:none; background:#fff; border-radius:var(--size16); box-shadow:20px 10px 30px rgba(1,81,167,0.1)}
.page_practice .record_wrap.on{display:block;}
.page_practice .record_wrap div{display:flex; align-items:center; gap:var(--size12); height: var(--size80); padding:var(--size19) var(--size28) var(--size19) var(--size20);}
.page_practice .record_wrap div div{padding:0;  gap:var(--size4);}
.page_practice .record_wrap button img{display:block; min-width:var(--size40)}
.page_practice .record_bar_wrap div:nth-child(22){height:var(--size9)}

.page_practice .record_bar_wrap div{ height:var(--size6); }
.page_practice .record_bar_wrap div:nth-child(2),
.page_practice .record_bar_wrap div:nth-child(10),
.page_practice .record_bar_wrap div:nth-child(23),
.page_practice .record_bar_wrap div:nth-child(27){height:var(--size11);}
.page_practice .record_bar_wrap div:nth-child(3),
.page_practice .record_bar_wrap div:nth-child(6){height:var(--size17);}
.page_practice .record_bar_wrap div:nth-child(4){height:var(--size29);}
.page_practice .record_bar_wrap div:nth-child(5),
.page_practice .record_bar_wrap div:nth-child(13){height:var(--size12);}
.page_practice .record_bar_wrap div:nth-child(7){height:var(--size30);}
.page_practice .record_bar_wrap div:nth-child(8),
.page_practice .record_bar_wrap div:nth-child(11),
.page_practice .record_bar_wrap div:nth-child(21),
.page_practice .record_bar_wrap div:nth-child(25){height:var(--size18);}
.page_practice .record_bar_wrap div:nth-child(9),
.page_practice .record_bar_wrap div:nth-child(16){height:var(--size38);}
.page_practice .record_bar_wrap div:nth-child(12){height:var(--size8);}
.page_practice .record_bar_wrap div:nth-child(14){height:var(--size21)}
.page_practice .record_bar_wrap div:nth-child(15),
.page_practice .record_bar_wrap div:nth-child(19){height:var(--size15)}
.page_practice .record_bar_wrap div:nth-child(17){height:var(--size42)}
.page_practice .record_bar_wrap div:nth-child(18){height:var(--size24)}
.page_practice .record_bar_wrap div:nth-child(20),
.page_practice .record_bar_wrap div:nth-child(26){height:var(--size25)}

.page_practice .record_complete_wrap{display:none; background:#E6EEF9; border-radius:var(--size16); box-shadow:20px 10px 30px rgba(1,81,167,0.1); position:absolute; bottom:var(--size20); left:var(--size20); right:var(--size20);}
.page_practice .record_complete_wrap.on{display:block;}
.page_practice .record_complete_wrap div{display:flex; height: var(--size80); align-items:center; justify-content:center; gap:var(--size12); font-size:var(--size24); color:#186272}

.page_practice .text_stroke{font-size:var(--size32); -webkit-text-stroke:var(--size8) #fff; line-height:1; paint-order: stroke fill;}
.page_practice .text_wrap{text-align: center; color:#186272; font-size:var(--size24); line-height:1;}
.page_practice .text_wrap.before_wrap{padding-top:var(--size16); line-height:1;}
.page_practice .text_wrap.before_wrap span{display:block; margin-top:var(--size14); line-height:1;}
.page_practice .text_wrap.before_wrap .text_stroke{display:block; margin-top:var(--size14); margin-bottom:var(--size14); font-size:var(--size32);}
.page_practice .start_wrap{display:none;}
.page_practice .talking_wrap{display:none;}

.page_practice.start .before_wrap{display:none;}
.page_practice.start .start_wrap{display:block;}

.page_practice.talking .before_wrap{display:none;}
.page_practice.talking .start_wrap{display:none;}
.page_practice.talking .talking_wrap{display:block;}

.page_practice.compare .contents{display:none;}

.page_feedback{background:#F4BD00 url(../img/bg_feedback_bear01.svg) no-repeat center bottom / contain;}
.page_feedback header{background:transparent}
.page_feedback .page_tit{color:#876100}
.page_feedback .contents{padding:var(--size48) var(--size12) 0;}
.page_feedback .contents p{width:100%; height:var(--size319); display:flex; align-items:center; justify-content:center;  padding-top:var(--size36); padding-bottom:var(--size136); background:url(../img/bg_feedback_yl.svg) no-repeat center / cover; text-align:center; font-size:var(--size48); line-height:1.02; color:#fff;}
.page_feedback .contents img{position:absolute; bottom:0; left: 0; width:100%;}


.page_feedback.green{background:#70C636}
.page_feedback.green .page_tit{color:#317900}
.page_feedback.green .contents p{background:url(../img/bg_feedback_gr.svg) no-repeat center / cover;}

.page_feedback.blue{background:#0455BF}
.page_feedback.blue .page_tit{color:#fff}
.page_feedback.blue .contents p{background:url(../img/bg_feedback_bl.svg) no-repeat center / cover;}

.page_mission_success{background:#0455BF}
.page_mission_success header{background:transparent;}
.page_mission_success .page_tit{color:#fff}
.page_mission_success .contents {padding-top:var(--size48); padding-left:0; padding-right:0; display:flex; flex-direction:column;}
.page_mission_success .contents p{width:100%; height:var(--size210); display:flex; align-items:center; justify-content:center;  padding:var(--size36) var(--size12) var(--size27); text-align:center; font-size:var(--size48); line-height:1.02; color:#fff; background:url(../img/bg_text_area_blue.svg) no-repeat center top/ contain}

.spin_effect_wrap{flex:auto; width:100%; position: relative; overflow:hidden;}
.spin_effect_wrap img{position:relative; width:var(--size287); margin-left:auto; margin-right: auto; display:block; padding-top:var(--size51); padding-left:var(--size25)}
.spin_effect_wrap span{display:block; text-align:center; font-size:var(--size48); color:#fff; padding-top:var(--size11); line-height:1.02;}
.spin_effect_wrap .spin_effect{position:absolute; width:100%; padding-top:0; top:var(--size-110);left:50%; margin-left:-50%; mix-blend-mode: overlay; padding-left:0; animation:spin 10s linear infinite;}

.page_message .contents{padding-top:var(--size20)}
.page_message .card.box{font-size:var(--size24); padding-top:var(--size54); padding-bottom:var(--size24); gap:var(--size24); position: relative;}
.page_message .card.box .btn{height:var(--size64)}
.page_message .card.box .btn_wrap{padding-top:0}
.page_message .btn.teal_green{width:var(--size96)}
.page_message .record_before_wrap{display:none;}
.page_message .record_before_wrap.on{display:block;}
.page_message .record_wrap{display:none;}
.page_message .record_wrap.on{display:block;}
.page_message .record_wrap div{display:flex; gap:var(--size8)}
.page_message .record_wrap .record{flex:auto; display:flex; align-items:center; gap:var(--size10); border:var(--size2) solid #EFEFEF; padding:var(--size12) var(--size15) var(--size12) var(--size12); border-radius:var(--size12);}
.page_message .record_wrap .record button{min-width:var(--size36)}
.page_message .record_wrap .record button img{display:block; width:100%;}
.page_message .record .record_bar_wrap{gap:var(--size3)}
.page_message .record .record_bar_wrap div{width:var(--size3); height:var(--size5)}
.page_message .record .record_bar_wrap div:nth-child(2){height:var(--size10)}
.page_message .record .record_bar_wrap div:nth-child(3){height:var(--size14)}
.page_message .record .record_bar_wrap div:nth-child(4){height:var(--size23)}
.page_message .record .record_bar_wrap div:nth-child(5){height:var(--size9)}
.page_message .record .record_bar_wrap div:nth-child(6){height:var(--size13)}
.page_message .record .record_bar_wrap div:nth-child(7){height:var(--size23)}
.page_message .record .record_bar_wrap div:nth-child(8){height:var(--size14)}
.page_message .record .record_bar_wrap div:nth-child(9){height:var(--size29)}
.page_message .record .record_bar_wrap div:nth-child(10){height:var(--size9)}
.page_message .record .record_bar_wrap div:nth-child(11){height:var(--size13)}
.page_message .record .record_bar_wrap div:nth-child(12){height:var(--size6)}
.page_message .record .record_bar_wrap div:nth-child(13){height:var(--size9)}
.page_message .record .record_bar_wrap div:nth-child(14){height:var(--size16)}
.page_message .record .record_bar_wrap div:nth-child(15){height:var(--size11)}
.page_message .record .record_bar_wrap div:nth-child(16){height:var(--size16)}
.page_message .record .record_bar_wrap.mute div{height:var(--size3) !important}

.page_message .record_complete_wrap{display:none;background:#E6EEF9; border-radius:var(--size16); padding:var(--size16);)}
.page_message .record_complete_wrap.on{display:block;}
.page_message .record_complete_wrap div{display:flex; align-items:center; justify-content:center; gap:var(--size12); }
.page_message .record_after_wrap {display:none;}
.page_message .record_after_wrap.on {display:block;}
.page_message .record_after_wrap div{display:flex; gap:var(--size8)}
.page_message .record_after_wrap .btn.pale_blue{flex:auto;}

.page_message .record_play_wrap{display:none;}
.page_message .record_play_wrap.on{display:block;}
.page_message .record_play_wrap div{display:flex; gap:var(--size8)}
.page_message .record_play_wrap .record{flex:auto; display:flex; align-items:center; gap:var(--size10); border:var(--size2) solid #EFEFEF; padding:var(--size12) var(--size15) var(--size12) var(--size12); border-radius:var(--size12);}
.page_message .record_play_wrap .record button{min-width:var(--size36)}
.page_message .record_play_wrap .record button img{display:block;}

.page_practice_history .contents{padding-bottom:var(--size120)}
.page_practice_history .box{padding:var(--size46) var(--size24) var(--size24)}
.page_practice_history .box .box_tit{font-size:var(--size24); line-height:1; font-weight:700; color:#186272;}
.page_practice_history .box .box_tit_wrap{padding-bottom:var(--size18); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--size18);}
.page_practice_history .box .box_tit_wrap .gray_wrap{width:100%; padding:var(--size15); font-weight:700; font-size:var(--size18); color:#186272; display:flex; gap:var(--size8); justify-content:center; align-items:center}
.page_practice_history .box section {padding-bottom:var(--size32); padding-top:var(--size30)}
.page_practice_history .box section:first-child,.page_practice_history .box .box_tit_wrap + section{padding-top:0}
.page_practice_history .box section:last-child{padding-bottom:0}
.page_practice_history .box section + section{border-top:var(--size2) dotted rgba(24,98,114,0.2)}
.page_practice_history .box .sec_tit{font-size:var(--size18); font-weight:700; color:#186272}

.sec_history_chk{display:flex; flex-direction:column; gap:var(--size12)}
.sec_history_chk ul{display:flex; flex-wrap:wrap; gap:var(--size12) var(--size8)}
.sec_history_chk ul li{width:calc((100% - var(--size48)) / 7); display:flex; align-items:center; justify-content:center; gap:var(--size8); flex-direction:column; line-height:1; color:#186272; font-weight:700}
.sec_history_chk ul li .circle{width:100%; aspect-ratio:1/1; background:rgba(4,85,191,0.1); border-radius:1000vw}
.sec_history_chk ul li .circle img{display:block; width:100%;}

.count_wrap{height:var(--size64); padding-left:var(--size19); padding-right:var(--size16); display:flex; justify-content:space-between; align-items:center; color:#186272; font-size:var(--size18); font-weight:700}
.count_wrap span{font-size:var(--size36); color:rgba(24,98,114,0.4)}
.count_wrap .count{font-size:var(--size48); color:#186272}

.page_practice_history .cumulative_wrap{display:none;}
.page_practice_history .cumulative_wrap.on{display:flex;}

.chart_wrap{margin-top:var(--size8); padding:var(--size20); flex-direction:column;}
.chart_wrap .chart_dotted{border-top:2px dotted #FF6D72}
.chart_wrap .chart_teal_green{background:#186272; }
.chart_wrap .chart_green{background:#70C636;}

.legend{display:flex; gap:var(--size8); }
.legend div{background:#E7ECF5; display:flex; align-items:center; font-size:var(--size10); color:#186272; gap:var(--size4); padding:var(--size5) var(--size6); border-radius:1000vw; line-height:1;}
.legend .chart_dotted{width:var(--size12); height:var(--size1)}
.legend .chart_teal_green{width:var(--size10); height:var(--size10); border-radius:var(--size10);}
.legend .chart_green{width:var(--size10); height:var(--size10); border-radius:var(--size10);}

.chart{width:100%; height:var(--size100); margin-top:var(--size16); border-bottom:var(--size2) solid #186272; position:relative; display:flex; justify-content:center; align-items:end; gap:var(--size10); padding-left:var(--size9); padding-right:var(--size9)}
.chart .chart_dotted{position:absolute; top:auto; left:0; right:0;}
.chart .sesstion{width:var(--size18);height:100%; font-size:var(--size12); color:#186272; display:flex; justify-content: center; align-items:end; gap:var(--size4) var(--size2); position:relative;}
.chart .sesstion span{width:100%; line-height:1; text-align:center; position:absolute; bottom:var(--size-16); left:50%; transform: translatex(-50%)}
.chart .sesstion .chart_bar{margin-top:auto; width:calc((100% - var(--size2)) / 2); border-radius:var(--size8) var(--size8) 0 0}
.chart .sesstion.off .chart_teal_green{background:#DEE6F1;}
.chart .sesstion.off .chart_green{background:#E6EEF9;}

/* popup */
.dim{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blue(8px;); z-index:999;}
.dim.on{display:block;}
.popup{display:none; padding:var(--size20); z-index:999;}
.popup.on{display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.popup .bottom p{font-size:var(--size24); font-weight:700; color:#fff; text-align:center; line-height:1; padding-bottom:var(--size8)}
.popup .inner{display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; padding-bottom:var(--size60)}
.popup .box{padding:var(--size56) var(--size20) var(--size44);}
.popup .box p{text-align:center;}

.popup_campare{/* padding-top:var(--size130); */ /* padding-left:var(--size20); padding-right:var(--size20) */}
.popup_campare .inner{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; padding-bottom:var(--size3)}
.popup_campare .popup_tit{width:100%; padding-bottom:var(--size4); font-size:var(--size32); color:#fff; text-align:center; line-height:1.03}
.popup_campare .box{ padding:var(--size54) var(--size24) var(--size24) var(--size24)}
.popup_campare .box .box_tit{padding-bottom:var(--size25); font-size:var(--size32); color:#186272; text-align:center; line-height:1.03}

.popup_campare .box .record_bar_wrap{width:100%; height:var(--size64); border:var(--size2) solid #EFEFEF; border-radius:var(--size12); justify-content:center; gap:var(--size3)}
.popup_campare .box .record_bar_wrap.on{border:var(--size4) solid #4E9CF6;}
.popup_campare .box .record_bar_wrap div{width:var(--size3); height:var(--size5);}
.popup_campare .box .record_bar_wrap div:nth-child(2){height:var(--size10);}
.popup_campare .box .record_bar_wrap div:nth-child(3){height:var(--size14);}
.popup_campare .box .record_bar_wrap div:nth-child(4){height:var(--size23);}
.popup_campare .box .record_bar_wrap div:nth-child(5),
.popup_campare .box .record_bar_wrap div:nth-child(13),
.popup_campare .box .record_bar_wrap div:nth-child(18),
.popup_campare .box .record_bar_wrap div:nth-child(20),
.popup_campare .box .record_bar_wrap div:nth-child(23),
.popup_campare .box .record_bar_wrap div:nth-child(28),
.popup_campare .box .record_bar_wrap div:nth-child(30),
.popup_campare .box .record_bar_wrap div:nth-child(33){height:var(--size9);}
.popup_campare .box .record_bar_wrap div:nth-child(6){height:var(--size13);}
.popup_campare .box .record_bar_wrap div:nth-child(7){height:var(--size23);}
.popup_campare .box .record_bar_wrap div:nth-child(8){height:var(--size14);}
.popup_campare .box .record_bar_wrap div:nth-child(9),
.popup_campare .box .record_bar_wrap div:nth-child(16),
.popup_campare .box .record_bar_wrap div:nth-child(26){height:var(--size29);}
.popup_campare .box .record_bar_wrap div:nth-child(10){height:var(--size9);}
.popup_campare .box .record_bar_wrap div:nth-child(11){height:var(--size13);}
.popup_campare .box .record_bar_wrap div:nth-child(12),
.popup_campare .box .record_bar_wrap div:nth-child(19),
.popup_campare .box .record_bar_wrap div:nth-child(22),
.popup_campare .box .record_bar_wrap div:nth-child(29),
.popup_campare .box .record_bar_wrap div:nth-child(32),
.popup_campare .box .record_bar_wrap div:nth-child(34){height:var(--size6);}
.popup_campare .box .record_bar_wrap div:nth-child(14),
.popup_campare .box .record_bar_wrap div:nth-child(21),
.popup_campare .box .record_bar_wrap div:nth-child(24),
.popup_campare .box .record_bar_wrap div:nth-child(27),
.popup_campare .box .record_bar_wrap div:nth-child(31){height:var(--size16)}
.popup_campare .box .record_bar_wrap div:nth-child(15),
.popup_campare .box .record_bar_wrap div:nth-child(25){height:var(--size11)}
.popup_campare .box .record_bar_wrap div:nth-child(17){height:var(--size16)}
.popup_campare .box .record_bar_wrap.mute div{height:var(--size3) !important}

.popup_campare_feedback{/* padding:var(--size20); */ /*var(--size187) */}
.popup_campare_feedback .inner{ padding-bottom:var(--size100)}
.popup_campare_feedback .box {padding:var(--size47) var(--size20) var(--size20)}
.popup_campare_feedback .box p{text-align:center; font-size:var(--size24); line-height:1;}
.popup_campare_feedback .box .btn_wrap{padding-top:var(--size15); gap:var(--size8);}
.popup_campare_feedback .box .btn_wrap .btn {flex-direction:column; height:var(--size136); padding-top:var(--size4); box-shadow:none; color:#fff; line-height:1;}
.popup_campare_feedback .box .btn_wrap .btn img{width:var(--size60);}
.popup_campare_feedback .box .btn_wrap .btn.green{background:url(../img/bg_icon_btn_green.svg) no-repeat center / cover}
.popup_campare_feedback .box .btn_wrap .btn.green:hover{background:url(../img/bg_icon_btn_green_hover.svg) no-repeat center / cover}
.popup_campare_feedback .box .btn_wrap .btn.red{background:url(../img/bg_icon_btn_red.svg) no-repeat center / cover}
.popup_campare_feedback .box .btn_wrap .btn.red:hover{background:url(../img/bg_icon_btn_red_hover.svg) no-repeat center / cover}

.popup_mission_complete .box p{font-size:var(--size24); line-height:1; margin-top:var(--size16)}
.popup_mission_complete .box img{width:var(--size60); display:block; margin-left:auto; margin-right:auto;}


@keyframes spin{
  0% {
    transform:rotate(0deg)
  }
  
  100% {
    transform:rotate(360deg)
  }
}

/* 파형 애니메이션 정의_0205 */
@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

/* 모바일용 선택자: record_bar_wrap 내부에 .on 클래스가 있는 div에 적용_0205 */
/* .record_bar_wrap div.on { */
  /* width와 background는 기존 style.css의 설정을 유지하도록 애니메이션만 추가 _0205*/
  /* animation: wave 0.6s infinite ease-in-out;
  transform-origin: center;
} */

/* ===== 녹음 중 이퀄라이저 ===== */
.page_practice .record_wrap.on .record_bar_wrap div.on {
  animation: wave 0.6s infinite ease-in-out;
  transform-origin: center;
}

/* small 버전 */
.page_practice .record_wrap.on.h_sm .record_bar_wrap div.on {
  animation-name: wave-sm;
}

/* ===== 비교 팝업 : 포커싱된 박스만 ===== */
.popup_campare .record_bar_wrap.on div.on {
  animation: wave 0.6s infinite ease-in-out;
  transform-origin: center;
}

/* ===== 비교 팝업 : 포커싱 안 된 경우 ===== */
.popup_campare .record_bar_wrap:not(.on) div {
  background: #EFEFEF !important;
  animation: none !important;
  transform: scaleY(1);
}


/* 각 막대마다 딜레이를 주어 파동 형태 생성_0205 */
.page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(even),
.popup_campare .record_bar_wrap.on div.on:nth-child(even) {
  animation-delay: 0.1s;
}

.page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(3n),
.popup_campare .record_bar_wrap.on div.on:nth-child(3n) {
  animation-delay: 0.2s;
}

.page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(4n),
.popup_campare .record_bar_wrap.on div.on:nth-child(4n) {
  animation-delay: 0.3s;
}

.recording-text {
  /* 폰트 크기를 대폭 키움 (기존 16 -> 28) */
  font-size: var(--size26);
  font-weight: 700; /* 더 두껍게 설정 */
  color: #0555BF;
  white-space: nowrap;
  margin-right: var(--size8);

  /* 텍스트 가독성을 위해 약간의 그림자 추가 (선택 사항) */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

  /* 깜빡이는 애니메이션 유지 */
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; } /* 깜빡임 농도를 더 진하게 조정 */
}

.touch-text {
  position: absolute;
  top: 42%;          /* 말풍선 바로 아래 */
  right: 52px;       /* 살짝 오른쪽으로 */
  margin-top: 6px;
  
  font-size: var(--size-6);
  
  /* opacity: 0.85; */
  white-space: nowrap;
  animation: touchHint 1.6s ease-in-out infinite;
}

.touch-f-text {
  position: absolute;
  top: 39%;          /* 말풍선 바로 아래 */
  right: 52px;       /* 살짝 오른쪽으로 */
  margin-top: 6px;

  font-size: var(--size-6);
  
  /* opacity: 0.85; */

  white-space: nowrap;
  animation: touchHint 1.6s ease-in-out infinite;
}

.touch-s-text {
  position: absolute;
  top: 87%;          /* 말풍선 바로 아래 */
  right: 31%;       /* 살짝 오른쪽으로 */
  margin-top: 6px;

  font-size: var(--size-6);
  
  /* opacity: 0.85; */

  white-space: nowrap;
  animation: touchHint 1.6s ease-in-out infinite;
}

/* ===============================
   P04 전용 파형 (page_message)
   =============================== */

/* 기본 상태 */
.page_message .p04-wave:not(.is-active) div {
  animation: none;
  transform: scaleY(1);
}

/* 파형 컨테이너 */
.page_message .p04-wave {
  display: flex;
  align-items:center;
  gap: var(--size3);
}

/* 기존 파형 높이 유지 */
.page_message .p04-wave div {
  display: block !important;
  width: var(--size3);
  background: #0555BF;
  border-radius: var(--size3);
  transform-origin: center center;
}

/* 🔥 녹음 / 재생 중 → 기존 wave 그대로 */
.page_message .p04-wave.is-active div {
  animation: wave 0.6s infinite ease-in-out;
}

/* 기존 로직 그대로 딜레이 */
.page_message .p04-wave.is-active div:nth-child(even) {
  animation-delay: 0.1s;
}
.page_message .p04-wave.is-active div:nth-child(3n) {
  animation-delay: 0.2s;
}
.page_message .p04-wave.is-active div:nth-child(4n) {
  animation-delay: 0.3s;
}

/* green / red 버튼 disabled → 회색 처리 */
button.btn.green:disabled,
button.btn.red:disabled,
button.btn.green[disabled],
button.btn.red[disabled],
.btn.green.disabled,
.btn.red.disabled {

  /* 핵심 필터 */
  filter: grayscale(100%) brightness(0.85);
  -webkit-filter: grayscale(100%) brightness(0.85);

  color: #9e9e9e !important;
  cursor: not-allowed;

}

/* 2026.02.11 FJB System 수정 */
.record_wrap.h_sm{height:var(--size48);}
.record_wrap.h_sm div{height:100%}
.record_wrap.h_sm .record_bar_wrap div.on{animation-name: wave-sm ;}

@keyframes wave-sm {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}