/* COMMON */
body {touch-action: manipulation;}
.inner {padding: 0 2rem;}

header.main_header {padding: 1.5rem 0;}
header.main_header .inner {display: flex; align-items: center; justify-content: space-between;}
header.main_header img.logo {display: block; width: 9rem; margin-left: auto;}
header.main_header button img,
header.main_header a img {width: 1.3rem;}

.main_container {background: #f8f8f8; min-height: 100dvh;}

.index_container {display: flex; align-items: center; justify-content: center; min-height: 100dvh;}
.index_container img {width: 28rem;}

/* login.php */
.login_container .logo_wrap {text-align: center; margin-bottom: 4rem; margin-top: 4.5rem;}
.login_container .logo_wrap img {width: 23rem;}

.login_container .login_wrap h3 {font-size: 2.5rem; font-weight: 700; letter-spacing: -.1rem; color: #000; margin-bottom: 2.3rem;}
.login_container .login_wrap .input_wrap {display: flex; flex-direction: column; gap: 1.5rem;}
.login_container .login_wrap .input_wrap input {width: 100%; height: 6.5rem; background: #e8e8e8; font-size: 1.8rem; border-radius: 1rem; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 0 1.5rem; letter-spacing: -.1rem; caret-color: #000;}
.login_container .login_wrap .input_wrap input::placeholder {color: #a8a8a8;}

.login_container .login_wrap .menu_wrap {display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; margin-top: 1.8rem;}
.login_container .login_wrap .menu_wrap i {width: 2px; height: 1.6rem; background: #dadada;}
.login_container .login_wrap .menu_wrap a {font-size: 1.7rem; letter-spacing: -.1rem; color: #777;}

.login_container .login_wrap .login_btn {display: block; width: 100%; background: #efab18; color: #fff; font-size: 3rem; font-weight: 600; letter-spacing: -.1rem; padding: 2rem 0; margin-top: 5.5rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/* signup.php */
.signup_container header {padding: .8rem 0;}
.signup_container header img {width: 4rem;}
.signup_container main {margin-top: 4rem;}
.signup_container main .title_wrap {margin-bottom: 5rem;}
.signup_container main .title_wrap h3 {font-size: 2.2rem; font-weight: 600; margin-bottom: 1.5rem;}
.signup_container main .title_wrap p {font-size: 1.6rem; font-weight: 500;}
.signup_container main .input_wrap {display: flex; flex-direction: column; gap: 2.5rem;}
.signup_container main .input_wrap input {border-bottom: 2px solid #444; font-size: 2.8rem; font-weight: 500; width: 100%; padding: 1rem .8rem; letter-spacing: -.1rem; outline: none; caret-color: #000;}
.signup_container main .input_wrap input::placeholder {color: #c6c6c6;}
.signup_container main .input_wrap .cellverify_number {display: none;}
.signup_container main .input_wrap .tel_wrap {position: relative;}
.signup_container main .input_wrap .tel_wrap .cellverify_btn {position: absolute; top: 0; right: 0; font-size: 1.45rem; height: 5.3rem; padding-right: 1rem; font-weight: 600; color: #444; letter-spacing: -.1rem;}
.signup_container main .radio_wrap {display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;}
.signup_container main .radio_wrap input[type="radio"] {display: none;}
.signup_container main .radio_wrap label {background: #ddd; font-size: 3rem; font-weight: 500; width: 100%; height: 8.4rem; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem; color: #a2a2a2;}
.signup_container main .radio_wrap input[type="radio"]:checked + label {background: #efab18; color: #000;}
.signup_container main .privacy_wrap {position: relative;}
.signup_container main .privacy_wrap label {font-size: 1.7rem; font-weight: 500; color: #444; margin-left: 1rem; letter-spacing: -.05rem;}
.signup_container main .privacy_wrap input[type="checkbox"] {position: absolute; left: 0; opacity: 0;}
.signup_container main .privacy_wrap i {width: 3.2rem; height: 3.2rem; background: url("../img/check-1.png") no-repeat center / contain;}
.signup_container main .privacy_wrap input[type="checkbox"]:checked + i {background: url("../img/check-2.png") no-repeat center / contain;}
.signup_container main .privacy_wrap .privacy_box {display: flex; align-items: center;}
.signup_container main .privacy_wrap .privacy_box.all {border-bottom: 1px solid #999; padding-bottom: 1.5rem;}
.signup_container main .privacy_wrap .privacy_opt {display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1.5rem;}
.signup_container main .privacy_wrap .privacy_box button {display: block; width: 1.2rem; margin-left: auto;}
.signup_container main .privacy_wrap .privacy_box button img {width: 100%;}

.signup_container main .continue {background: #fff; border: 2px solid #444; font-size: 2.6rem; font-weight: 600; display: block; width: 100%; padding: 2.1rem 0; color: #f0a816; border-radius: 1rem; margin-top: 5rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.signup_container main .signup {background: #f0a816; font-size: 2.6rem; font-weight: 600; display: block; width: 100%; padding: 2.1rem 0; color: #fff; border-radius: 1rem; margin-top: 5rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/* find_id.php */
.find_container header {padding: .8rem 0;}
.find_container header img {width: 4rem;}
.find_container main {margin-top: 3rem;}
.find_container h3 {font-size: 2.5rem; font-weight: 700; letter-spacing: -.1rem; color: #000; margin-bottom: 2.3rem;}
.find_container .input_wrap {display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 5.5rem;}
.find_container .input_wrap input {width: 100%; height: 6.5rem; background: #e8e8e8; font-size: 1.8rem; border-radius: 1rem; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 0 1.5rem; letter-spacing: -.1rem; caret-color: #000;}
.find_container .input_wrap input::placeholder {color: #a8a8a8;}
.find_container .input_wrap .tel_wrap {position: relative;}
.find_container .input_wrap .tel_wrap .cellverify_btn {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-size: 1.5rem; letter-spacing: -.1rem; color: #666; height: 6.5rem;}
.find_container .submit_btn {display: block; width: 100%; background: #efab18; color: #fff; font-size: 2.7rem; font-weight: 600; letter-spacing: -.1rem; padding: 2rem 0; margin-bottom: 1rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; text-align: center;}

/* home.php */
.home_container .welcome_wrap {display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;}
.home_container .welcome_wrap img {width: 6.8rem;}
.home_container .welcome_wrap p {font-size: 1.6rem; font-weight: 600; color: #686868;}
.home_container .welcome_wrap p b {font-size: 1.9rem; color: #000;}

.home_container .goal_wrap {background: #fef3d4; border-radius: 1rem; padding: 2.5rem 0 4.5rem; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 8px; margin-bottom: 6rem;}
.home_container .goal_wrap::before {content: ""; position: absolute; top: -.5rem; left: -.2rem; background: url("../img/icon-12.png") no-repeat 0 0 / contain; width: 6.5rem; height: 10rem;}
.home_container .goal_wrap::after {content: ""; position: absolute; top: -.5rem; right: -.2rem; background: url("../img/icon-13.png") no-repeat 0 0 / contain; width: 6.5rem; height: 10rem;}
.home_container .goal_wrap .goal_box {display: flex; align-items: center; justify-content: center; gap: 3rem;}
.home_container .goal_wrap .goal_box img {width: 10.5rem; position: relative;}
.home_container .goal_wrap .goal_box .today_wrap {display: flex; flex-direction: column; align-items: center; gap: 1.5rem;}
.home_container .goal_wrap .goal_box .today_wrap .percent_wrap {display: flex; align-items: flex-end; gap: .5rem;}
.home_container .goal_wrap .goal_box .today_wrap .percent_wrap p {font-size: 2.8rem; font-weight: 600; background: #efab18; border-radius: 100%; color: #fff; width: 6.5rem; height: 6.5rem; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;}
.home_container .goal_wrap .goal_box .today_wrap .percent_wrap span {font-size: 1.8rem; font-weight: 600; color: #666;}
.home_container .goal_wrap .goal_box .today_wrap h4 {font-size: 2rem; font-weight: 600; letter-spacing: -.1rem;}
.home_container .goal_wrap .today_learn {display: flex; align-items: center; justify-content: center; gap: .7rem; background: #eeaa17; width: 78%; border-radius: 3rem; padding: .1rem 0; position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%);}
.home_container .goal_wrap .today_learn img {width: 5.8rem;}
.home_container .goal_wrap .today_learn p {font-size: 1.7rem; font-weight: 600; color: #fff;}

.home_container .menu_wrap {display: flex; align-items: center; gap: 1.5rem; margin-bottom: 5rem;}
.home_container .menu_wrap a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 7.5rem; background: #ffd98e; padding: 1.2rem 1.8rem; border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 6px;}
.home_container .menu_wrap a img {width: 4.5rem;}
.home_container .menu_wrap a.wrong img {width: 3.7rem;}
.home_container .menu_wrap a p {font-size: 1.9rem; font-weight: 600; letter-spacing: -.1rem; color: #000;}

.home_container .learn_wrap {margin-bottom: 3rem;}
.home_container .learn_wrap ul {display: flex; flex-direction: column; gap: 3rem;}
.home_container .learn_wrap ul li a {display: block; border: 1px solid #eeaa17; padding: 1.3rem 1.5rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px; background: #fff url("../img/arrow-1.png") no-repeat calc(100% - 1.5rem) center / 2rem;}
.home_container .learn_wrap ul li a .title_wrap {display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;}
.home_container .learn_wrap ul li a .title_wrap img {width: 4.5rem;}
.home_container .learn_wrap ul li a .title_wrap h4 {font-size: 1.9rem; font-weight: 600; color: #000; letter-spacing: -.1rem;}
.home_container .learn_wrap ul li a .eng_wrap p {font-size: 2rem; letter-spacing: -.1rem; color: #de534f; font-weight: 600; margin-bottom: .8rem;}
.home_container .learn_wrap ul li a .eng_wrap span {font-size: 1.6rem; letter-spacing: -.1rem; color: #000;}

/* voca.php */
.main_container .title_wrap {display: flex; align-items: center; gap: 1rem; margin-bottom: 3.2rem; margin-top: 2rem;}
.main_container .title_wrap img {width: 6.2rem;}
.main_container .title_wrap h4 {font-size: 2.3rem; font-weight: 600; letter-spacing: -.1rem; color: #000;}
.main_container .select_wrap {position: relative;}
.main_container .select_wrap .current_category {background: #fff url("../img/arrow-3.png") no-repeat calc(100% - 1.4rem) 50% / 2.2rem; font-size: 1.7rem; letter-spacing: -.1rem; padding: 1.4rem; border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px; color: #bbb;}
.main_container .select_wrap .current_category.selected {color: #333;}
.main_container .select_wrap .current_category.on {border-radius: 1.5rem 1.5rem 0 0;}
.main_container .select_wrap .option_wrap {display: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px; padding: 1.8rem 1.4rem; border-radius: 0 0 1.5rem 1.5rem; background: #fff; position: absolute; top: 4.5rem; left: 0; width: 100%; z-index: 99;}
.main_container .select_wrap .option_wrap ul li a {display: block; font-size: 1.6rem; letter-spacing: -.1rem; color: #ccc;}
.main_container .select_wrap .option_wrap ul li a.on {color: #333;}
.main_container .select_wrap .option_wrap ul li:not(:last-child) a {margin-bottom: 2.5rem;}

.main_container .voca_list_wrap {margin-top: 3rem;}
.main_container .voca_list_wrap .voca_box {padding-bottom: 3.5rem;}
.main_container .voca_list_wrap .voca_box:not(:last-of-type) {margin-bottom: 3.5rem; border-bottom: 1px solid #999;}
.main_container .voca_list_wrap .voca_box h4 {font-size: 2rem; font-weight: 600; margin-bottom: 2rem;}
.main_container .voca_list_wrap .voca_box ul {display: flex; flex-direction: column; gap: 1rem;}
.main_container .voca_list_wrap .voca_box ul li {background: #fed88d; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.5rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 6px;}
.main_container .voca_list_wrap .voca_box ul li .text_wrap {display: flex; align-items: center; gap: 2rem;}
.main_container .voca_list_wrap .voca_box ul li .text_wrap p {font-size: 1.8rem; font-weight: 600; letter-spacing: -.1rem; color: #111; line-height: 1.3;}
.main_container .voca_list_wrap .voca_box ul li .text_wrap span {font-size: 1.6rem; letter-spacing: -.1rem; color: #555;}
.main_container .voca_list_wrap .voca_box ul li button img {width: 3.2rem; filter: grayscale(1);}
.main_container .voca_list_wrap .voca_box ul li button.active img {filter: grayscale(0);}

.phrase_container .title_wrap img {width: 4.5rem;}
.phrase_container .voca_list_wrap .voca_box ul li,
.sentence_container .voca_list_wrap .voca_box ul li,
.like_container .voca_list_wrap .phrase_box ul li {padding: 1.5rem 1.5rem;}
.phrase_container .voca_list_wrap .voca_box ul li .text_wrap,
.sentence_container .voca_list_wrap .voca_box ul li .text_wrap,
.like_container .voca_list_wrap .phrase_box ul li .text_wrap {flex-direction: column; align-items: flex-start; gap: 1rem;}

.sentence_container .title_wrap img {width: 3rem;}
.sentence_container .search_wrap {position: relative;}
.sentence_container .search_wrap input[type="text"] {background: #fff; font-size: 1.7rem; letter-spacing: -.1rem; padding: 1.4rem; padding-right: 5rem; border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px; color: #bbb; width: 100%; caret-color: #000; color: #333;}
.sentence_container .search_wrap input[type="text"]::placeholder {color: #aaa;}
.sentence_container .search_wrap button {position: absolute; top: 50%; right: 1.4rem; transform: translateY(-50%);}
.sentence_container .search_wrap button img {width: 2.3rem;}

/* like.php */
.like_container .title_wrap img {width: 3.8rem;}
.like_container .voca_list_wrap .voca_box h4 {background: #0b0a0f; color: #fff; padding: 1.5rem; border-radius: 1rem; font-weight: 400;}
.like_container .voca_list_wrap .voca_box:not(:last-of-type) {border-bottom: 0; padding-bottom: 0;}

/* mypage.php */
.mypage_container {background: #f8f8f8 url("../img/icon-11.png") no-repeat 0 0 / 100%;}
.mypage_container header button img,
.mypage_container header a img {width: 2.5rem;}
.mypage_container .character_wrap {text-align: center; margin: 4rem 0 3rem;}
.mypage_container .character_wrap img {width: 9.5rem;}

.mypage_container .my_wrap {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.8rem;}
.mypage_container .my_wrap h4 {font-size: 2.2rem; color: #000; font-weight: 600; letter-spacing: -.1rem;}
.mypage_container .my_wrap h4 b {font-size: 2.7rem; margin-right: .5rem;}
.mypage_container .my_wrap .log_wrap {display: flex; align-items: center; border-bottom: 1px solid #aaa;}
.mypage_container .my_wrap .log_wrap button {font-size: 1.5rem; letter-spacing: -.1rem; color: #777;}
.mypage_container .my_wrap .log_wrap i {font-size: 1.5rem; margin: 0 .3rem; color: #777;}

.mypage_container .goal_wrap {background: #eeaa17; display: flex; align-items: center; justify-content: space-between; padding: 3rem 2rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; margin-bottom: 3.5rem;}
.mypage_container .goal_wrap h5 {font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: -.1rem;}
.mypage_container .goal_wrap .goal_box {background: #fff; display: flex; align-items: center; padding: 1.3rem 3.4rem; border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px;}
.mypage_container .goal_wrap .goal_box p,
.mypage_container .goal_wrap .goal_box i {font-size: 1.8rem; font-weight: 600; color: #000;}

.mypage_container .link_wrap {padding-bottom: 3rem;}
.mypage_container .link_wrap ul {display: flex; flex-direction: column; gap: 2.5rem;}
.mypage_container .link_wrap ul li a {display: block; background: #ffd98e url("../img/arrow-2.png") no-repeat calc(100% - 1.3rem) 50% / 4.5rem; padding: 1.6rem 2rem; border-radius: 1rem;}
.mypage_container .link_wrap ul li a img {width: 4rem; margin-bottom: 1.3rem;}
.mypage_container .link_wrap ul li a p {font-size: 1.8rem; font-weight: 600; color: #000;}


/* modal.php */
.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.modal .modal_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 4rem); background: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 12px;}
.modal .modal_wrap .text_wrap {text-align: center; padding: 2rem 0;}
.modal .modal_wrap .text_wrap p {font-size: 2rem; font-weight: 600; margin-bottom: 2rem;}
.modal .modal_wrap .text_wrap span {font-size: 1.6rem; color: #444;}
.modal .modal_wrap .btn_wrap {display: flex;}
.modal .modal_wrap .btn_wrap button {width: 100%; font-size: 2rem; font-weight: 600; background: #d6d6d6; padding: 2.3rem 0; color: #555;}
.modal .modal_wrap .btn_wrap button.cancel {background: #efab18; color: #fff;}

/* study.php */
.study_container {background: #f5f5f5; min-height: 100dvh;}
.study_container header {position: relative; padding: 1.5rem 0;}
.study_container header .back {position: absolute; top: 1.5rem; left: 1.5rem;}
.study_container header .back img {width: 1.4rem;}
.study_container header .bar_wrap {background: #0b0a0f; border-radius: 2rem; width: 65%; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 5px;}
.study_container header .bar_wrap p {color: #fff; font-weight: 600; font-size: 1.4rem; text-align: center; padding: .6rem 0;}

.study_container main {margin-top: 3.8rem;}
.study_container .test_wrap .question_wrap {background: #eca819; padding: 6.5rem 2.5rem; border-radius: 1.5rem 1.5rem 0 0;}
.study_container .test_wrap .question_wrap h4 {font-size: 2.5rem; font-weight: 600; letter-spacing: -.1rem; line-height: 1.4; color: #000;}
.study_container .test_wrap .answer_wrap {background: #fff; padding: 6.5rem 2.5rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 0 0 1.5rem 1.5rem;}
.study_container .test_wrap .answer_wrap input[type="text"] {background: #fed78a; font-size: 2rem; padding: 1.4rem 2rem; border-radius: 2rem; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 6px; caret-color: #000; color: #000; outline: none; width: 100%; letter-spacing: -.1rem;}
.study_container .check_btn {display: block; width: 100%; background: #0b0a0f; color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: -.1rem; padding: 3rem 0; margin-top: 7.5rem; border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px;}

.study_container .alert_wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);}
.study_container .alert_wrap .correct_wrap {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 2rem;}
.study_container .alert_wrap .correct_wrap .title_wrap {background: #fbd029; text-align: center; padding: 3rem 0; border-radius: 1.5rem 1.5rem 0 0;}
.study_container .alert_wrap .correct_wrap .title_wrap img {width: 11rem;}
.study_container .alert_wrap .correct_wrap .title_wrap p {font-size: 2.7rem; font-weight: 600; letter-spacing: -.1rem; margin-top: 2.6rem; color: #022cfb;}
.study_container .alert_wrap .correct_wrap .btn_wrap {border-radius: 0 0 1.5rem 1.5rem; overflow: hidden;}
.study_container .alert_wrap .correct_wrap .btn_wrap button {background: #0b0a0f; color: #fff; font-weight: 600; font-size: 2.5rem; letter-spacing: -.1rem; display: block; width: 100%; padding: 4rem 0;}
.study_container .alert_wrap .correct_wrap#incorrect .title_wrap p {color: #df2a2d;}
.study_container .alert_wrap .correct_wrap#incorrect .btn_wrap {display: flex;}
.study_container .alert_wrap .correct_wrap#incorrect .btn_wrap button {font-size: 2.2rem;}
.study_container .alert_wrap .correct_wrap#incorrect .btn_wrap button:first-of-type {border-right: 1px solid #555;}

/* wrong.php */
.wrong_container .title_wrap img {width: 3.2rem;}
.wrong_container .list_wrap ul li {box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 1.2rem; overflow: hidden; margin-bottom: 3.5rem;}
.wrong_container .list_wrap ul li p {background: #eca819; font-size: 1.7rem; font-weight: 600; letter-spacing: -.1rem; padding: 3rem 2rem;}
.wrong_container .list_wrap ul li a {display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -.1rem; text-align: center; padding: 2.3rem 0; background: #fff;}