@charset "UTF-8";

::selection { background-color: var(--mainColor); color: #fff; }
html,body,div,p,a,img,header,footer,section,article,aside,nav,h1,h2,h3,h4,h5,input,label,button,select,ul,ol,textarea { display: block; position: relative; box-sizing: border-box; margin: 0; padding: 0; border: 0 none; outline: none; appearance: none; border-radius: 0; line-height: 1; }
span,strong { position: relative; box-sizing: border-box; margin: 0; padding: 0; border: 0 none; line-height: 1; }
body,input,button,select,textarea { width: 100%; font-family: 'Gmarket Sans', sans-serif; color: var(--mainColor); }
html { font-size: 1vw; }
ul,ol { padding-left: 3rem; }
ul::marker,ol::marker { font-size: 3rem; }
p { word-break: keep-all; }
img { width: 100%; height: auto; }
a { text-decoration: none; color: inherit; cursor: pointer; touch-action: manipulation; }

body { background-color: var(--mainColor); transition: background-color .3s ease; }
.wrap { opacity: 0; visibility: hidden; transition: opacity .5s ease .3s, visibility .5s ease .3s; width: 100%; max-width: 500px; margin: 0 auto; padding: 0 5rem; }
.btn { display: flex; justify-content: center; align-items: center; height: 12rem; border-radius: 1rem; font-size: 5rem; font-weight: 500; background-color: var(--mainColor); color: #fff; touch-action: manipulation; }
.btn-cancel { background-color: #ccc; }

body.show { background-color: #fff; }
body.show .wrap { opacity: 1; visibility: visible; }

header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: flex-end; height: 22rem; padding: 4rem 0 12rem; border-bottom: 2px dashed var(--mainColor); background-color: #fff; z-index: 900; }
header h1.title { flex-grow: 1; display: flex; align-items: flex-end; height: 5rem; font-size: 5rem; font-weight: 700; color: var(--mainColor); }
html[lang='en'] header h1.title { letter-spacing: -1px; }
header h1.title .name { margin-bottom: .5rem; margin-left: 1rem; font-size: 4rem; font-weight: 500; color: var(--subColor); }
header h1.title .rank { width: auto; margin-bottom: .5rem; margin-left: 1rem; padding: 1rem; border-radius: 1rem; font-size: 2rem; font-weight: 500; text-align: center; color: #fff; cursor: pointer; background-color: var(--subColor); }
header h1.title .lv-info { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; position: absolute; top: 6.5rem; left: -26rem; width: 60rem; padding: 3rem; border: 1rem solid var(--subColor); border-radius: 3rem; font-size: 3rem; font-weight: 500; background-color: #fff; box-shadow: 0 0 5rem #0003; z-index: 100; }
header h1.title .lv-info:before { content: ''; display: block; position: absolute; top: -5.2rem; left: 50%; width: 0; height: 0; border: 2.5rem solid transparent; border-bottom-color: var(--subColor); transform: translateX(-50%); }
header h1.title .lv-info.show { opacity: 1; visibility: visible; }
header h1.title .lv-info table { width: 100%; color: var(--subColor); }
header h1.title .lv-info table th, header h1.title .lv-info table td { padding: 1rem; }
header h1.title .lv-info table tr:nth-child(odd) { background-color: #0001; }
header .lang-wrap { flex-shrink: 0; width: 13rem; height: 5rem; margin-right: 2rem; border-radius: 1rem; background-color: #aaa; }
header .lang-wrap:before { content: 'EN'; position: absolute; top: 0; right: 0; display: flex;justify-content: center; align-items: center; width: 5.5rem; height: 5rem; font-size: 2.5rem; color: #fff; }
header .lang-wrap .btn { position: absolute; top: 0; left: 0; width: 8rem; height: 5rem; border: .5rem solid #aaa; font-size: 2.8rem; font-weight: 700; color: #aaa; background-color: #fff; }
header .lang-wrap.en:before { content: '한'; right: auto; left: 0;}
header .lang-wrap.en .btn { left: 5rem; }
header .color-picker-wrap { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; width: 11rem; }
header .color-picker { width: 5rem; height: 5rem; border-radius: 5rem; overflow: hidden; }
header .color-picker input[type="color"] { position: absolute; top: -2rem; left: -2rem; width: 10rem; height: 10rem; }
header .progress-wrap { position: absolute; bottom: 3rem; left: 0; width: 100%; height: 5rem; border-radius: 1rem; font-size: 3rem; overflow: hidden; background-color: #ccc; }
header .progress-wrap .progress-text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 3rem; color: white; z-index: 1; }
header .progress-wrap .progress-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: var(--mainColor); z-index: 0; transition: width .5s ease-in-out; }

section .btn-add-wrap { position: fixed; bottom: 0; right: 50%; width: 100%; max-width: 800px; height: 0; transform: translateX(50%); z-index: 800; }
section .btn-add-wrap .btn { position: absolute; bottom: 4rem; right: 4rem; width: 12rem; height: 12rem; margin-top: 2rem; border: 1rem solid #fff; border-radius: 10rem; box-shadow: 0 0 5rem #0005; font-size: 8rem; overflow: hidden; background-color: var(--subColor); }

#content { margin-top: 3rem; }
#content .card-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
#content .card-wrap.empty { min-height: 50rem; border-radius: 2rem; background-color: #eee; }
#content .card-wrap .card { width: 100%; margin-bottom: 3rem; padding: 5rem 5rem 7rem; border-radius: 2rem; background-color: #eee; overflow: hidden; }
#content .card-wrap .card .card-header { display: flex; justify-content: space-between; align-items: center; height: 6rem; margin-bottom: 3rem; }
#content .card-wrap .card .card-header label { height: 6rem; padding: 1.5rem 1.5rem 1.5rem 6rem; border-radius: 1rem; font-size: 3rem; background-image: url("../../images/check.png"); background-repeat: no-repeat; background-size: auto 4rem; background-position: 1rem 1rem; background-color: #ccc; color: #fff; transition: background-color .5s ease; }
#content .card-wrap .card input[type='checkbox'] { display: none; }
#content .card-wrap .card input[type='checkbox']:checked+.card-header label { background-color: var(--subColor); }
#content .card-wrap .card h3.title { height: 6rem; font-size: 5rem; font-weight: bold; transition: color .5s ease; line-height: 7rem; }
#content .card-wrap .card h3.title span { display: block; margin-bottom: 1rem; font-size: 3rem; font-weight: normal; }
#content .card-wrap .card .btn-speach { position: absolute; top: 0; right: 0; width: auto; height: 6rem; padding: .5rem 0; background-color: transparent; }
#content .card-wrap .card .btn-speach svg { width: auto; height: 100%; fill: var(--mainColor); }
#content .card-wrap .card .btn-practice-wrap { display: flex; justify-content: space-between; width: 32rem; height: 6rem; border-radius: 1rem; overflow: hidden; }
#content .card-wrap .card .btn-practice-wrap .btn { width: 100%; height: 100%; font-size: 3rem; background-color: #0003; overflow: hidden; }
#content .card-wrap .card .btn-practice-wrap .btn-practice span.text { z-index: 10; }
#content .card-wrap .card .btn-practice-wrap .btn-practice span.progress { position: absolute; top: 0; left: 0; display: block; height: 100%; background-color: var(--subColor); z-index: 0; }
#content .card-wrap .card .btn-practice-wrap.personal .btn { width: 15rem; }
#content .card-wrap .card .btn-practice-wrap.personal .btn-edit { width: 8rem; background-color: var(--mainColor); }
#content .card-wrap .card .btn-practice-wrap.personal .btn-del { width: 8rem; background-color: var(--subColor); }
#content .card-wrap .card .card-content { max-height: 50rem; margin-top: 5rem; padding-bottom: 5rem; font-size: 4rem; line-height: 1.5; word-break: keep-all; overflow: hidden; color: #666; transition: max-height .5s ease-in-out, padding-bottom .5s ease-in-out; }
#content .card-wrap .card .btn-toggle-card { position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 7rem; border-radius: 0; padding: 0; background-color: #ccc; }
#content .card-wrap .card .btn-toggle-card:after { content: ''; display: block; width: 5rem; height: 5rem; background-image: url("../../images/arrow.png"); background-repeat: no-repeat; background-size: 100%; transform: rotate(-90deg); transition: transform .5s ease-in-out; }
#content .card-wrap .card .btn-toggle-card:before { content: '닫기'; display: block; font-size: 3rem; font-weight: normal; }
#content .card-wrap .card.checked .card-content { max-height: 0 !important; padding-bottom: 0; }
#content .card-wrap .card.checked .btn-toggle-card:after { transform: rotate(90deg); }
#content .card-wrap .card.checked .btn-toggle-card:before { content: '열기'; }
#content .card-wrap .card input[type='checkbox']:checked+.card-header+h3.title { color: var(--subColor); }

.popup-wrap { visibility: hidden; transition: visibility .5s ease; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; z-index: 1000; }
.popup-wrap .dim { position: fixed; width: 100%; height: 100%; background-color: #0006; opacity: 0; transition: opacity .5s ease; }
.popup-content { width: 80rem; max-height: calc(100vh - 20rem); padding: 5rem; border-radius: 2rem; background-color: #fff; font-size: 4rem; overflow-y: auto; box-shadow: 0 0 5rem #0003; transform: translateY(-100%); transition: transform .5s ease-in-out, filter .3s ease; }
.popup-content #page { padding: 5rem; }
.popup-content h3.title { font-size: 6rem; margin-bottom: 2rem; }
.popup-content input { height: 12rem; margin-top: 2rem; padding: 2rem 4rem; border: 2px solid #eee; border-radius: 1rem; font-size: 4rem; }
.popup-content input::placeholder { font-size: 3.5rem; color: #999; }
.popup-content input.error { border-color: #f00; }
.popup-content .desc { text-align: center; }
.popup-content .desc div { margin-bottom: 2rem; font-size: 5rem; font-weight: 500; word-break: keep-all; }
.popup-content .btn-wrap { display: flex; justify-content: space-between; margin-top: 3rem; padding: 0 5rem 5rem; }
.popup-content .btn-wrap .btn { width: 100%; }
.popup-content .btn-wrap.half .btn { width: calc(50% - 1rem); }
.popup-content .btn-kakao { background-color: #FEE500; color: rgba(0,0,0,.9); font-weight: bold; font-size: 4rem; margin: 0 5rem 3rem; }

.layer-content { width: 80rem; max-height: calc(90vh - 20rem); padding: 5rem; border-radius: 2rem; background-color: #fff; font-size: 4rem; overflow-y: auto; box-shadow: 0 0 5rem #0005; transform: translateY(-100%); transition: transform .5s ease-in-out, filter .5s ease; }
.layer-content h3.title { font-size: 5rem; margin-bottom: 3rem; }
.layer-content input { height: 10rem; margin-top: 3rem; padding: 2rem 4rem; border-radius: 1rem; font-size: 4rem; background-color: #eee; }
.layer-content input::placeholder { font-size: 3.5rem; color: #999; }
.layer-content input.error { background-color: #f003; }
.layer-content .radio-container { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 3rem; }
.layer-content .radio-wrap { display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 1rem; padding: 3rem 1rem; background-color: #0001; }
.layer-content .radio-wrap label { margin-right: 1rem; padding-left: 1rem; font-size: 3rem; color: #36318f66; cursor: pointer; }
.layer-content .radio-wrap input[type="radio"] { display: none; }
.layer-content .radio-wrap input[type="radio"]:checked+label { color: #36318f; text-decoration: underline 1rem #fabe00;  }
.layer-content textarea { width: 100%; min-height: 40rem; margin-top: 2rem; padding: 2rem 4rem; border-radius: 1rem; font-size: 3.5rem; resize: none; background-color: #eee; line-height: 1.25; word-break: keep-all; }
.layer-content textarea::placeholder { color: #ccc; }
.layer-content textarea.error { background-color: #f003; }
.layer-content .desc { text-align: center; }
.layer-content .desc div { margin-bottom: 2rem; font-size: 5rem; color: crimson; }
.layer-content .btn-wrap { display: flex; justify-content: space-between; margin-top: 2rem; }
.layer-content .btn-wrap .btn { width: 100%; }
.layer-content .btn-wrap.half .btn { width: calc(50% - 1rem); }

.layer-content .verse-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-top: 2rem; }
.layer-content .verse-wrap .select-wrap { display: flex; justify-content: space-between; width: 100%; margin-bottom: 2rem; }
.layer-content .verse-wrap .select-wrap select { border-radius: 1rem; padding: 2rem 1rem; font-size: 4rem; text-align: center; background-color: #eee; }
.layer-content .verse-wrap .select-wrap select option:disabled { color: #36318f3; }
.layer-content .verse-wrap .select-wrap.paragraph span { display: flex; justify-content: center; align-items: center; width: 12%; }
.layer-content .verse-wrap .select-wrap.paragraph span.divide { width: 2rem; }
.layer-content .verse-wrap .select-wrap.paragraph select { width: calc(22% - 1rem); font-size: 3.5rem; }

.layer-content .preview-wrap { min-height: 10rem; margin: 4rem 0; padding: 5rem; border-radius: 1rem; background-color: #0001; }
.layer-content .preview-wrap .preview-title { margin-bottom: 2rem; font-size: 5rem; }
.layer-content .preview-wrap .preview-sentence { font-size: 4rem; word-break: keep-all; line-height: 1.2; }

#addVerse .btn-submit { pointer-events: none; opacity: .5; transition: opacity .5s ease; }
#addVerse .btn-submit.on { pointer-events: auto; opacity: 1; }

.popup-wrap.open { opacity: 1; visibility: visible; }
.popup-wrap.open .popup-content { transform: translateY(10rem); }
.popup-wrap.open .layer-content { transform: translateY(10rem); }
.popup-wrap.open .dim { opacity: 1; }

#practice .popup-content { width: 90rem; padding: 0; }
#practice .popup-content .btn-reset { position: absolute; top: 4rem; right: 5rem; width: auto; height: 5rem; padding: 1rem; border-radius: 1rem; font-size: 3rem; overflow: hidden; background-color: var(--subColor); }
/*#practice .popup-content .btn-reset:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 5rem; height: 5rem; background-image: url("../../images/plus.png"); background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; transform: rotate(45deg); }*/
/*#practice .popup-content .btn-reset:before { content: ''; display: block; width: 7rem; height: 7rem; background-image: url("../../images/check.png"); background-repeat: no-repeat; background-size: 100%; background-position: 0 0; }*/
#practice .popup-content .sentence { margin-bottom: 3rem; line-height: 1.5; color: #666; word-break: keep-all; }
#practice .popup-content h4 { height: 5rem; font-size: 4.5rem; margin: 3rem 0 2rem; }
#practice .popup-content h4 span { display: block; font-size: 4rem; font-weight: 300; line-height: 1.2; margin-top: 1rem; }
#practice .popup-content h5 { margin-bottom: 4rem; font-size: 3.5rem; font-weight: normal; color: var(--subColor);
    text-decoration-line: underline;
    text-decoration-color: var(--mainColor);
    text-decoration-style: double;
    text-decoration-skip-ink: none;
}
#practice .popup-content h5 span { display: inline; font-weight: bold; }
#practice .popup-content .btn-speach { position: absolute; top: 12rem; right: 5rem; width: 7rem; height: 7rem; background: none; }
#practice .popup-content .btn-speach svg { fill: var(--mainColor); height: 100%; }
#practice .popup-content .practice-board { display: flex; flex-wrap: wrap; width: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
#practice .popup-content .practice-board .count-box { display: flex; justify-content: center; align-items: center; width: 7.7%; height: 5.5rem; font-size: 2rem; font-weight: normal; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
#practice .popup-content .practice-board .count-box:nth-child(25n-12) { width: 7.6%; }
#practice .popup-content .practice-board .count-box:nth-child(25n) { width: 15.3%; color: var(--subColor); }
/*#practice .popup-content table.practice-board td { position: relative; border: 1px solid #ccc; width: 6%; height: 6rem; font-size: 2rem; text-align: center; }*/
#practice .popup-content .practice-board input[type="checkbox"] { display: none; }
#practice .popup-content .practice-board .checkbox { display: block; position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; margin: 0; padding: 0; border: 1rem solid transparent; border-radius: 5rem; transform: translate(-50%,-50%); transition: border .3s ease; pointer-events: none; }
#practice .popup-content .practice-board input[type="checkbox"]:checked+.checkbox { border-color: var(--subColor); }
#practice .btn-check.disabled { opacity: .5; }

#userList button { margin-top: 5rem; }

#alert.open .layer-content { transform: translateY(15rem); }
#alert .alert-title { font-weight: bold; }
#alert .alert-text { color: var(--subColor); word-break: keep-all; margin-top: 3rem; line-height: 1.25; }

#quiz h3.title { display: flex; justify-content: center; align-items: flex-end; font-size: 8rem; }
#quiz h3.title svg { fill: var(--mainColor); height: 11rem; margin-left: 1rem; }
#quiz .quiz-title { margin: 5rem 0; font-size: 5rem; text-align: center; color: var(--subColor); }
#quiz .quiz-text { display: none; margin: 5rem 0; line-height: 1.25; word-break: keep-all; }
#quiz.answer .quiz-text { display: block; }

#gift h3.title { display: flex; justify-content: center; align-items: flex-end; font-size: 8rem; }
#gift h3.title svg { fill: var(--mainColor); height: 11rem; margin-left: 1rem; }
#gift .gift-title { margin: 5rem 0; font-size: 5rem; text-align: center; color: var(--subColor); }
#gift .gift-text { margin: 5rem 0; line-height: 1.25; word-break: keep-all; }

body.popup-alert-open .alert-wrap.open { opacity: 1; visibility: visible; }
body.popup-alert-open .popup-wrap.open .popup-content { filter: brightness(.5); pointer-events: none; }

#login .btn-back { position: fixed; top: 0; left: 50%; width: 80rem; height: 10rem; transform: translateX(-50%); font-size: 4rem; font-weight: bold; display: flex; justify-content: center; align-items: center; color: #fff; z-index: 10; }
#login .popup-content { z-index: 11; }

@media all and (min-width: 500px) {
    html { font-size: 5px; }
}