header {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    padding: 0 1.5rem;
    z-index: 7777;
    background: #fff;
    border-bottom: 1px solid #c3c3c3;
}
header h1 {}
header h1 a {
    font-family: 'RiaSans-ExtraBold';
    font-size: 2rem;
    font-weight: 900;
    color: #5a5dd4;
}
header #backBtn {
    width: 1.2rem;
    position: absolute;
    left: 1.5rem;
}
header #backBtn img {
    width: 100%;
}

#logoutModal {
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    z-index: 8888;
    top: 0;
}
#logoutModal .box {
    border-radius: 1rem;
    padding: 6rem 2rem;
    background: #fff;
    width: 100%;
    text-align: center;
}
#logoutModal .box p {
    font-size: 2rem;
    margin-bottom: 3rem;
    font-weight: 900;
}
#logoutModal .box .buttonWrap {
    display: flex;
    gap: 0.5rem;
}
#logoutModal .box .buttonWrap form {
    width: 50%;
}
#logoutModal .box .buttonWrap form button {
    width: 100%;
    font-size: 1.4rem;
    background: #5a5dd4;
    color: #fff;
    padding: 1.5rem 0;
    border-radius: 5rem;
}
#logoutModal .box .buttonWrap > button {
    width: 50%;
    border-radius: 5rem;
    font-size: 1.4rem;
    background: #ededed;
    padding: 1.5rem 0;
}
#logoutModal .box > button {
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: 1px solid #333;
}

#withdrawModal {
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    z-index: 8888;
    top: 0;
}
#withdrawModal .box {
    border-radius: 1rem;
    padding: 6rem 2rem;
    background: #fff;
    width: 100%;
    text-align: center;
}
#withdrawModal .box p {
    font-size: 2rem;
    margin-bottom: 3rem;
    font-weight: 900;
}
#withdrawModal .box .buttonWrap {
    display: flex;
    gap: 0.5rem;
}
#withdrawModal .box .buttonWrap form {
    width: 50%;
}
#withdrawModal .box .buttonWrap form button {
    width: 100%;
    font-size: 1.4rem;
    background: #5a5dd4;
    color: #fff;
    padding: 1.5rem 0;
    border-radius: 5rem;
}
#withdrawModal .box .buttonWrap > button {
    width: 50%;
    border-radius: 5rem;
    font-size: 1.4rem;
    background: #ededed;
    padding: 1.5rem 0;
}

main {
    padding: 4rem 1.5rem 10rem;
}
main .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
main .title h2 {
    font-size: 2rem;
    font-weight: 900;
}
main .title h2 span {
    font-size: 2rem;
    font-weight: 900;
    color: #5a5dd4;
}
main .title .buttonWrap {}
main .title .buttonWrap button {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid #333;
}
main .title .buttonWrap button:last-child {
    border: none;
    padding: 0;
    margin: 0;
}
main .today {
    position: relative;
    margin-bottom: 2rem;
    width: 100%;
}
main .today a {
    display: inline-block;
    width: 100%;
}
main .today a > img {
    width: 100%;
}
main .today a .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
    text-align: center;
    width: calc(100% - 6rem);
}
main .today a .text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}
main .today a .text pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
main .today a .text p {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #fff;
}
main .menu {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}
main .menu a {
    border-radius: 1rem;
    background: #ededed;
    padding: 1.5rem;
    display: flex;
    gap: 2rem;
    align-items: center;
}
main .menu a .image {
    width: 8rem;
}
main .menu a .image img {
    width: 100%;
}
main .menu a .text {}
main .menu a .text p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
main .menu a .text h2 {
    font-size: 1.8rem;
    font-weight: 800;
}

/* 오늘의 법문 */
main .todayBuddhist {
    position: relative;
    height: 40rem;
    margin-bottom: 4rem;
    border-radius: 1rem;
    overflow: hidden;
}
main .todayBuddhist > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main .todayBuddhist .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
    text-align: center;
    width: calc(100% - 6rem);
}
main .todayBuddhist .text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}
main .todayBuddhist .text #verseText {
    overflow-y: auto;
    height: 20rem;
}
main .todayBuddhist .text pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 4rem;
}
main .todayBuddhist .text p {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #fff;
}
main > button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 5rem;
    padding: 1.5rem 3rem;
    background: #ededed;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 auto;
}
main > button img {
    width: 1.5rem;
}

/* 필사 */
#buddhist {
    padding: 4rem 1.5rem 10rem;
    height: calc(100% - 5rem);
}
main > h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #5a5dd4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
main > h2 a {
    border-radius: 5rem;
    background: #5a5dd4;
    padding: 0.5rem 1.5rem;
    font-size: 1.4rem;
    color: #fff;
    display: flex;
    align-items: center;
}
main > h2 a img {
    width: 1rem;
}
main > p {
    font-size: 1.4rem;
    margin-bottom: 3rem;
}
main .preWrap {
    overflow-y: auto;
    height: 30rem;
    margin-bottom: 3rem;
}
main .preWrap pre {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}
main #selectFrm {
    display: flex;
    gap: 1rem;
    height: 100rem;
    position: relative;
    padding-bottom: 8rem;
}
main #selectFrm .wordWrap {
    display: flex;
    flex-flow: column nowrap;
    width: 30%;
    height: 100%;
    overflow-y: auto;
}
main #selectFrm .wordWrap .word {
    position: relative;
    height: 4rem;
    width: 100%;
}
main #selectFrm .wordWrap .word input {
    width: 100%;
    height: 100%;
}
main #selectFrm .wordWrap .word label {
    width: 100%;
    height: 100%;
    border-radius: 5rem;
    font-size: 1.4rem;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
main #selectFrm .wordWrap .word input:checked + label {
    color: #fff;
    background: #5a5dd4;
}
main #selectFrm .resultWrap {
    width: 70%;
    height: 100%;
    overflow-y: auto;
}
main #selectFrm .resultWrap .result {
    position: relative;
    height: 4rem;
    width: 100%;
}
main #selectFrm .resultWrap .result input {
    width: 100%;
    height: 100%;
}
main #selectFrm .resultWrap .result label {
    width: 100%;
    height: 100%;
    border-radius: 5rem;
    font-size: 1.4rem;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 1.5rem;
}
main #selectFrm .resultWrap .result input:checked + label {
    color: #fff;
    background: #5a5dd4;
}
main #selectFrm > button {
    width: 100%;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    color: #fff;
    font-weight: 600;
    background: #5a5dd4;
    border-radius: 5rem;
    position: absolute;
    bottom: 0;
}
main #editFrm {}
main #editFrm textarea {
    width: 100%;
    border-radius: 1rem;
    padding: 2rem;
    font-size: 1.4rem;
    line-height: 1.4;
    height: 25rem;
    margin-bottom: 3rem;
}
main #editFrm > button {
    border-radius: 5rem;
    background: #5a5dd4;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 1.5rem 0;
    width: 100%;
}
main #editFrm .buttonWrap {
    display: flex;
    border-radius: 5rem;
    overflow: hidden;
}
main #editFrm .buttonWrap button {
    background: #5a5dd4;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 2rem 0;
    width: 50%;
}

/* 경전 */
main .category {
    display: flex;
    border-radius: 5rem;
    overflow: hidden;
    margin-bottom: 2rem;
}
main .category a {
    width: 50%;
    font-size: 1.6rem;
    font-weight: 600;
    background: #ededed;
    text-align: center;
    padding: 2rem 0;
}
main .category a.on {
    background: #5a5dd4;
    color: #fff;
}
main #searchFrm {
    margin-bottom: 3rem;
}
main #searchFrm input {
    border-radius: 5rem;
    font-size: 1.6rem;
    padding: 2rem;
    border: 1px solid #888888;
    width: 100%;
    background-image: url(../img/search.png);
    background-color: #fff;
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: right 2rem center;
}
main .contentWrap {
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
}
main .contentWrap a {
    display: flex;
    gap: 1rem;
}
main .contentWrap a h3 {
    font-size: 1.4rem;
    color: #fff;
    background: #5a5dd4;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .contentWrap a p {
    font-size: 1.4rem;
    width: calc(100% - 3rem);
    line-height: 1.4;
    word-break: break-all;
}
main .titleOption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
main .titleOption h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #5a5dd4;
    line-height: 1.4;
    word-break: break-all;
}
main .titleOption #oriTraFrm {
    display: flex;
    gap: 1rem;
}
main .titleOption #oriTraFrm label {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
main .titleOption #oriTraFrm label input {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100%;
    background-image: url(../img/check-off.png);
    background-size: cover;
}
main .titleOption #oriTraFrm label input:checked {
    background-image: url(../img/check-on.png);
}
main .preWrap span {
    font-size: 1.4rem;
    line-height: 1.4;
}

#colorModal {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: flex-end;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
}
#colorModal.show {
    display: flex;
}
#colorModal #colorFrm {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #fff;
    padding: 3rem 2rem;
    display: flex;
    flex-flow: column nowrap;
    gap: 3rem;
    width: 100%;
}
#colorModal #colorFrm .colorWrap {
    display: flex;
    gap: 0.5rem;
}
#colorModal #colorFrm .colorWrap input {
    width: calc(100% / 8);
    aspect-ratio: 1/1;
    border-radius: 100%;
}
#colorModal #colorFrm .colorWrap input:checked {
    border: 2px solid #5a5dd4;
}
#colorModal #colorFrm > button {
    padding: 1.5rem 0;
    font-size: 1.4rem;
    color: #fff;
    background: #5a5dd4;
    border-radius: 5rem;
}

/* 나만의 구절 */
main .mineWrap {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
main .mineWrap a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 1rem;
    border: 1px solid #828282;
    padding: 2rem 1.5rem;
    font-size: 1.4rem;
    line-height: 1.4;
    word-break: break-word;
}
main .titleOption .colorSel {
    position: relative;
    width: 8rem;
}
main .titleOption .colorSel > a {
    height: 3rem;
    font-size: 1.4rem;
    font-weight: 600;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    border-radius: 1rem;
    background-image: url(../img/arrow-2.png);
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right 1rem center;
}
main .titleOption .colorSel .colorOption {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
main .titleOption .colorSel .colorOption a {
    font-size: 1.4rem;
    padding: 1rem;
    font-weight: 600;
}

main .copyList {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
main .copyList a {
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #828282;
}
main .copyList a pre {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
main .copyList a button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    color: #929292;
}
main .copyList a button img {
    width: 1rem;
}
main .copyList > p {
    font-size: 1.4rem;
    font-weight: 600;
    padding-top: 10rem;
    text-align: center;
}