@charset "UTF-8";
/* 36318f fabe00 */
::selection { background-color: #0009; 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; -webkit-tap-highlight-color: #0000; 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: 'IMHyemin', sans-serif; color: #36318f; -webkit-tap-highlight-color: #0000; outline: none; }
html { font-size: 1vw; }
body { font-size: 4rem; }
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; -webkit-tap-highlight-color: #0000; outline: none; }

.wrap { display: none; width: 100%; max-width: 800px; margin: 0 auto; padding: 0 5rem; }
.btn { display: flex; justify-content: center; align-items: center; height: 10rem; border-radius: 1rem; font-size: 4rem; background-color: #36318f; color: #fff; cursor: pointer; -webkit-tap-highlight-color: #0000; outline: none; }
.btn-cancel { background-color: #ccc; }
.btn-del { background-color: crimson; }

header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; height: 20rem; padding: 4rem 0 11rem; border-bottom: 2px dashed #36318f; background-color: #fff; z-index: 900; }
header h1.title { display: flex; justify-content: center; align-items: flex-end; height: 5rem; font-size: 5rem; color: #36318f; z-index: 100; }
header h1.title img { width: 6.75rem; height: 6rem; margin-right: 1rem; transform: translateY(.8rem); }
header h1.title span { margin-left: 1rem; font-size: 3.5rem; color: #999; cursor: pointer; }
header h1.title .user-list-mini { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; position: absolute; top: 6rem; left: 27rem; width: 20rem; padding: 2rem; border-radius: 1rem; background-color: #fabe00; box-shadow: 0 0 5rem #0005; }
header h1.title .user-list-mini a { margin-bottom: 1rem; padding: 1rem 0; border-radius: .5rem; font-size: 3rem; text-align: center; background-color: #fff; }
header h1.title .user-list-mini a.on { background-color: #36318f; color: #fff; pointer-events: none; }
header h1.title .user-list-mini a:last-child { margin-bottom: 0; }
header h1.title .user-list-mini.open { opacity: 1; visibility: visible; }
header .btn-wrap { display: flex; border-radius: 1rem; overflow: hidden; }
header .btn { width: 16rem; height: 5rem; padding: 0; border-radius: 0; font-size: 3rem; background-color: #36318f66; }
header .btn.on { background-color: #36318f; }
header .btn-sort-complete { width: 26rem; }
header .btn:last-child { border-left: 1px dashed #fff; }
header .progress-wrap { position: absolute; bottom: 3rem; left: 0; width: 100%; height: 5rem; border-radius: 1rem; font-size: 3rem; overflow: hidden; background-color: #fabe0055; }
header .progress-wrap .progress-text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 3rem; color: white; color: #36318f; z-index: 1; }
header .progress-wrap .progress-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: #fabe00; z-index: 0; transition: width .5s ease-in-out; }

section { padding-bottom: 15rem; }
section h3.subject { margin-top: 3rem; }
section .user-list { margin-top: 2rem; }
section .user-list .btn { margin-top: 2rem; background-color: #fabe00; color: #36318f; }
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: #fabe00; }
section .btn-wrap { margin-top: 3rem; }
section .comment { margin-top: 2rem; padding-bottom: 2rem; border-bottom: 2px dashed #36318f; line-height: 1.5; }

#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: 30rem; border-radius: 2rem; background-color: #eee; }
#content .card-wrap .card { width: 100%; margin-bottom: 2rem; padding: 5rem 5rem 7rem; border-radius: 2rem; background-color: #0001; overflow: hidden; transition: background-color .5s ease, color .5s ease; }
#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 .check-wrap { display: flex; justify-content: space-between; width: 41rem; }
#content .card-wrap .card .card-header label { display: flex; justify-content: center; align-items: center; width: 20rem; height: 6rem; padding: 1.5rem; border-radius: 1rem; font-size: 3rem; background-color: #0002; color: #fff; cursor: pointer; transition: color .5s ease; }
#content .card-wrap .card .card-header label svg { display: block; height: 80%; margin-right: 1rem; fill: #fff; transition: fill .5s ease; }
#content .card-wrap .card .card-header .btn-practice { width: 20rem; height: 6rem; padding: 0; font-size: 3rem; transition: opacity .5s ease, visibility .5s ease; overflow: hidden; background-color: #0002; }
#content .card-wrap .card .card-header .btn-practice .text { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#content .card-wrap .card .card-header .btn-practice .progress-bar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #36318f; z-index: 0; }
#content .card-wrap .card .card-header .btn-speach { width: 8rem; height: 6rem; background-color: transparent; }
#content .card-wrap .card .card-header .btn-speach svg { width: auto; height: 6rem; fill: #36318f; }
#content .card-wrap .card .btn-wrap { display: flex; justify-content: center; align-items: center; margin: 0; transform: translateX(24rem); transition: transform .5s ease-in-out; }
#content .card-wrap .card .btn-wrap .btn { width: 10rem; height: 6rem; margin-left: 1rem; font-size: 3rem; }
#content .card-wrap .card .btn-wrap .btn.btn-close { width: 6rem; height: 6rem; background-color: transparent; transform: translateX(3rem); z-index: 10; transition: transform .5s ease; }
#content .card-wrap .card .btn-wrap .btn.btn-close span { display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border-radius: 6rem; margin: 0; opacity: 0; background-color: #0005; transition: opacity .5s ease, background-color .5s ease; }
#content .card-wrap .card .btn-wrap .btn.btn-close svg { height: 60%; fill: #fff; transform: rotate(-45deg); transition: fill .5s ease; }
#content .card-wrap .card .btn-wrap .btn.btn-edit { background-color: #0003; pointer-events: none; }
#content .card-wrap .card .btn-wrap .btn.btn-del { background-color: crimson; }
#content .card-wrap .card input[type='checkbox'] { display: none; }
#content .card-wrap .card input[type='checkbox']:checked+label { background-color: #36318f; }
#content .card-wrap .card h3.title { font-size: 5rem; }
#content .card-wrap .card h3.title span.subject { display: block; margin-bottom: 2rem; font-size: 3.5rem; color: #36318f99; }
#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; 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: #0003; }
#content .card-wrap .card .btn-toggle-card svg { display: block; height: 3.5rem; margin-right: 1rem; transform: rotate(-90deg); fill: #fff; transition: transform .5s ease-in-out, fill .5s ease; }
#content .card-wrap .card .btn-toggle-card:after { content: '닫기'; display: block; font-size: 3rem; }
#content .card-wrap .card.close .card-content { max-height: 0 !important; padding-bottom: 0; }
#content .card-wrap .card.close .btn-toggle-card svg { transform: rotate(90deg); }
#content .card-wrap .card.close .btn-toggle-card:after { content: '열기'; }
#content .card-wrap .card.checked { background-color: #36318f; color: #fff; }
#content .card-wrap .card.checked .card-header label svg { fill: #36318f; }
#content .card-wrap .card.checked .card-header .btn-practice { opacity: 0; visibility: hidden; }
#content .card-wrap .card.checked h3.title span.subject { color: #fabe00; }
#content .card-wrap .card.checked .btn-wrap .btn-close span { background-color: #fff; }
#content .card-wrap .card.checked .btn-wrap .btn-close svg { fill: #36318f; }
#content .card-wrap .card.checked .btn-wrap .btn.btn-edit { background-color: #fff5; }
#content .card-wrap .card.checked input[type='checkbox']:checked+label { background-color: #fff; color: #36318f; }
#content .card-wrap .card.open-option .btn-wrap { transform: translateX(0); }
#content .card-wrap .card.open-option .btn-wrap .btn.btn-close { transform: translateX(0); }
#content .card-wrap .card.open-option .btn-wrap .btn.btn-close span { opacity: 1; }
#content .card-wrap .card.open-option .btn-wrap .btn.btn-edit { pointer-events: auto; }

.user-list-wrap header { height: 13rem; padding: 4rem 0 4rem; }

.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; }
.layer-content { width: 80rem; max-height: calc(90vh - 18rem); 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; }
#practiceSubject { display: block; font-size: 3rem; margin-bottom: 1rem; }
.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 h3.title .btn-fullscreen { position: absolute; top: 0; right: 0; width: 6rem; }
.layer-content h3.title .btn-fullscreen svg { fill: #36318f; }

.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; }

.popup-wrap.open { opacity: 1; visibility: visible; }
.popup-wrap.open .dim { opacity: 1; }
.popup-wrap.open .layer-content { transform: translateY(10rem); }
.popup-wrap.open.disable .layer-content { pointer-events: none; filter: brightness(.8); }

#practice .layer-content { width: 96rem; }
#practice .layer-content .btn-reset { position: absolute; top: 0; right: 0; width: auto; height: 5rem; padding: 1rem; border-radius: 1rem; font-size: 3rem; overflow: hidden; background-color: crimson; }
#practice .layer-content .sentence { margin-bottom: 3rem; line-height: 1.5; word-break: keep-all; }
#practice .layer-content h4 { font-size: 4.5rem; margin: 3rem 0 2rem; padding-top: 3rem; border-top: 2px dashed #36318f; }
#practice .layer-content h4 span { display: block; font-size: 4rem; font-weight: 300; line-height: 1.2; margin-top: 1rem; }
#practice .layer-content table.practice-board { width: 100%; border-collapse: collapse; }
#practice .layer-content table.practice-board td { position: relative; border: 1px solid #ccc; width: 10%; height: 7rem; font-size: 3rem; text-align: center; }
#practice .layer-content table.practice-board input[type="checkbox"] { position: absolute; top: 50%; left: 50%; width: 6rem; height: 6rem; margin: 0; padding: 0; border: 1rem solid transparent; border-radius: 5rem; transform: translate(-50%,-50%); transition: border .3s ease; pointer-events: none; background-color: transparent; }
#practice .layer-content table.practice-board input[type="checkbox"]:checked { border-color: crimson; }
#practice .layer-content .btn-check svg { height: 30%; fill: #fff; margin-right: 1rem; }

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

.alert-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; }
.alert-wrap .layer-content { width: 90rem; }

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

.guide-wrap { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: #000a; z-index: 9999; }
.guide-wrap .inner { display: flex; justify-content: center; align-items: center; max-width: 800px; height: 100%; margin: 0 auto; }
.guide-wrap .guide { color: #fff; font-size: 4.5rem; text-align: center; line-height: 1.5; }
.guide-wrap .guide span { color: #fabe00; }
.guide-wrap .arrow { position: absolute; bottom: 3rem; right: 8rem; width: 10rem; height: 10rem; transform: rotate(60deg); animation: bounce .5s ease-in-out infinite alternate; }
.guide-wrap .arrow:before { content: ''; position: absolute; top: 4.1rem; right: 0; width: 9rem; height: .8rem; background-color: #fabe00; }
.guide-wrap .arrow svg { fill: #fabe00; position: absolute; top: 2rem; right: -2rem; width: 5rem; height: 5rem; }

.guide-wrap.show { display: block; }

.fullscreen-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999; }
.fullscreen-wrap a { position: absolute; top: 2rem; right: 2rem; }
.fullscreen-content { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; }
.fullscreen-content .verse { width: 90%; margin-bottom: 2rem; text-align: center; }
.fullscreen-content .sentence { width: 90%; text-align: center; line-height: 1.2; word-break: keep-all; }

@keyframes bounce {
    0% { transform: rotate(60deg) translateX(0);  }
    100% { transform: rotate(60deg) translateX(-5rem);  }
}

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