@charset "UTF-8";

/* 공용부 */
*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select:none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: none;
    scrollbar-color: transparent;
    touch-action: pan-x pan-y;
}

/* 가로 스크롤 차단 */
html, body {
    overscroll-behavior-x: none;
}
* {
    box-sizing: border-box;
}



/* 폰트 */
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    src: local('Spoqa Han Sans Neo Medium'),
    url('../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
}

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 400;
    src: local('Spoqa Han Sans Neo Regular'),
    url('../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
}

/* common */
body{color:#111827; font-size:14px; font-family:"Spoqa Han Sans Neo", 'sans-serif'; overflow-x:hidden;}
:not(.overflow-x-auto){scrollbar-width:none;-ms-overflow-style:none;}
:not(.overflow-x-auto)::-webkit-scrollbar{display:none;}

*{word-break:keep-all;}
a,a:active,a:hover,a:link,a:visited,a:focus{text-decoration:none}
.nav-link{padding:0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{margin-bottom:0; color:#222;}

main h2{font-size:20px; font-weight:700; line-height:28px;}
main h3{margin-top:26px; font-size:16px; font-weight:500; line-height:22px;}
main h4{font-size:16px; font-weight:600; line-height:22px;}
main h5{margin-top:8px; font-size:15px; font-weight:500; line-height:24px;}

p{margin-bottom:0;}
ul{margin-bottom:0; padding-left:0; list-style:none;}

button{padding:0; border-width:0; background-color:transparent;}
.btn{width:100%; margin:0; padding:13px 20px; border-radius:0; color:#222; font-size:18px; font-weight:500;}
.btn:hover,
.btn:active{color:#222 !important;}
.btn-primary {background-color: #5DDBDB !important;border-color:#5DDBDB !important;}
.btn-primary:hover,
.btn-primary.hover {background-color: #5DDBDB !important;border-color:#5DDBDB !important;}
.btn-primary:disabled,
.btn-primary.disabled {background-color: #E2F5F5 !important;border-color:#E2F5F5 !important;color:#B3C2C2 !important;}
.btn-secondary {background-color: #86E57F !important;border-color:#86E57F !important;}
.btn-secondary:hover,
.btn-secondary.hover {background-color: #86E57F !important;border-color:#86E57F !important;}
.btn-secondary:disabled,
.btn-secondary.disabled {background-color: #CEFBC9 !important;border-color:#CEFBC9 !important;}
.btn-retry {background-color: transparent !important;border-color:#D5CFC9 !important;}
.btn-retry:hover,
.btn-retry.hover {background-color: transparent !important;border-color:#D5CFC9 !important;}

.form-control{width:100%; padding:13px 24px 13px 0; border:0; border-bottom:2px solid #D5CFC9; border-radius:0; color:#111827; font-size:18px; line-height:22px;}
.form-control:focus{border-color:#222; box-shadow:none !important; box-shadow:0 2px 8px 0 rgba(34, 34, 34, 0.24);}
.form-control.is-invalid{border-color:#EE1100;}
.invalid-feedback{margin-top:0px; color:#EE1100; font-size:13px;}
.form-control::placeholder{color:#9ca3af;}
.form-select{width:100%; padding:13px 24px 13px 0; border:0; border-bottom:1px solid #D5CFC9; border-radius:0; background:url(../images/sub/select_arrow.webp) no-repeat right center / 24px; background-size:16px; color:#222; font-size:18px; line-height:22px;}
.form-select:focus{border-color:#222; box-shadow:none !important;}
.form-select::placeholder{color:#9ca3af;}
.form-check{position:relative; width:calc(50% - 4px); margin:0; padding-left:0;}
.form-check .form-check-input{position:absolute; top:2px; left:3px; margin-left:0;}
.form-check .form-check-label{position:relative; width:100%; border:1px solid #D5CFC9; background-color:#fff; color:#999; font-size:16px; text-align:center; line-height:48px; cursor:pointer;}
.form-check .form-check-label:before{position:absolute; top:0; left:0; bottom:0; margin:auto 0; background-repeat:no-repeat; background-size:100%;/* content:'';*/}
.form-check .form-check-input[type="checkbox"]{left:5px;}
.form-check .form-check-input[type="checkbox"] + .form-check-label{padding-left:32px;}
.form-check .form-check-input[type="checkbox"] + .form-check-label:before{width:24px; height:24px; background-image:url(../images/sub/ico_checkbox.webp);}
.form-check .form-check-input[type="checkbox"]:checked + .form-check-label:before{background-image:url(../images/sub/ico_checkbox-checked.webp);}
.form-check .form-check-input[type="radio"] + .form-check-label{/* padding-left:28px;*/}
.form-check .form-check-input[type="radio"] + .form-check-label:before{width:20px; height:20px;}
.form-check .form-check-input[type="radio"]:checked + .form-check-label{border-color:#222; color:#222;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.form-check2{position:relative; margin:0 24px 0 0; padding-left:0;}
.form-check2 .form-check-input{position:absolute; top:2px; left:3px; margin-left:0;}
.form-check2 .form-check-label{position:relative; color:#222; font-size:16px; font-weight:500; line-height:24px; cursor:pointer;}
.form-check2 .form-check-label:before{position:absolute; top:0; left:0; bottom:0; margin:auto 0; background-repeat:no-repeat; background-size:100%; content:'';}
.form-check2 .form-check-input[type="checkbox"]{left:5px;}
.form-check2 .form-check-input[type="checkbox"] + .form-check-label{padding-left:32px;}
.form-check2 .form-check-input[type="checkbox"] + .form-check-label:before{width:24px; height:24px; background-image:url('../images/sub/ico_checkbox.webp');}
.form-check2 .form-check-input[type="checkbox"]:checked + .form-check-label:before{background-image:url('../images/sub/ico_checkbox-checked.webp');}
.form-control.is-invalid {background-image: none !important;}
#birth-time.form-select {border-bottom: none !important;box-shadow: none !important;background-image: none !important;}


/* layout */
.container{max-width:100%; padding:0 24px;}
.main main .container{padding:0 16px;}
.wrapper .side{display:none;}
.wrapper .page{display:flex; max-width:482px; height:auto; min-height:100vh; margin:0 auto; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0; background-color:#fff; box-sizing:border-box; flex-direction:column;/* 고정 높이 없애기 */ /* 화면보다 짧으면 화면 높이만큼은 차지 */ /* padding, border가 크기에 포함되도록 */ /* 하단 고정 요소를 밀어내기 위해 */}
section{overflow:hidden;}

/* header */
.main #header{position:fixed; top:0; z-index:10; width:100%; max-width:480px; background-color:#F6F5F3;}
.main #header .navbar{--bs-navbar-padding-y:0;}
.sub #header{border-bottom:1px solid #EBE7E4;}
.sub #header .navbar{background-color:#fff; --bs-navbar-padding-y:0;}
#header .navbar .container{height:60px;}
#header .navbar h1{margin-bottom:0;}
#header .navbar h1 span{display:block; color:#111827; font-size:20px; font-weight:700; line-height:28px;}
#header .navbar .nav-sub{display:flex; position:relative; width:100%; padding:16px 0; justify-content:space-between;}
#header .navbar .nav-sub .nav-btn{width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:100%; font-size:0;}
#header .navbar .nav-sub .nav-btn.prev{background-image:url(../images/sub/ico_prev.webp);}
#header .navbar .nav-sub .nav-btn.home{background-image:url(../images/sub/ico_home.webp);}
#header .navbar .nav-sub .nav-title{overflow:hidden; position:absolute; top:16px; left:34px; right:34px; bottom:16px; width:calc(100% - 68px); font-size:16px; font-weight:500; text-align:center; text-overflow:ellipsis; line-height:24px; white-space:nowrap;}
#header .navbar .nav-sub .nav-title img{height:24px;}

/* footer */
#footer{padding:20px 0 40px 0; border-top:1px solid #e5e7eb;}
#footer .footer-company{color:#666; font-size:12px; font-weight:500; line-height:18px;}
#footer .footer-info{margin-top:6px; font-size:0;}
#footer .footer-info span{display:inline-block; margin-top:2px; color:#999; font-size:12px; line-height:18px; vertical-align:top;}
#footer .footer-info span + span{margin-left:12px;}

/* modal */
.modal .modal-dialog{width:312px; margin:20px auto;}
.modal .modal-content{border-radius:0; color:#111827;}
.modal .modal-header{padding:24px 24px; border-bottom:0;}
.modal .modal-header .modal-title{font-size:20px;}
.modal .modal-header .btn-close{opacity:1; width:24px; height:24px; margin-right:-3px; padding:0; background:url(../images/sub/ico_close.webp) no-repeat center / 100%; font-size:0;}
.modal .modal-body{padding:32px 24px;}
.modal .modal-body .modal-list .list-item .list-link{display:flex; height:56px; padding:0 20px; color:#222; font-size:16px; line-height:22px; align-items:center;}
.modal .modal-body .modal-list .list-item .list-link:hover{background:url(../images/sub/ico_check.webp) no-repeat right 17px center / 24px;}
.modal .modal-body .modal-form-list{display:flex; padding: 0 20px 0 24px; flex-wrap:wrap;gap:8px;}
.modal .modal-body .modal-form-list .list-item{position:relative; width:calc(50% - 6px);}
.modal .modal-body .modal-form-list .list-item input{position:absolute; top:10px; left:10px;}
.modal .modal-body .modal-form-list .list-item label{display:flex; position:relative; height:52px; padding:0 16px; border:1px solid #e5e7eb; background-color:#fff; color:#999; font-size:16px; line-height:22px; cursor:pointer; align-items:center;justify-content:center;}
.modal .modal-body .modal-form-list .list-item input:checked + label{border-color:#222; box-shadow:0 4px 8px rgba(0,0,0,.12); color:#222;}
.modal .modal-body .modal-dialog-title{margin-top:12px; font-size:18px; font-weight:600; text-align:center;}
.modal .modal-body .modal-dialog-text{margin-top:4px; font-size:15px; text-align:center; line-height:24px;}
.modal .modal-footer{padding:0 24px 24px 24px; border-top:0; gap:8px;flex-wrap:nowrap;}
.modal .modal-footer .btn{padding-top:11px; padding-bottom:11px; font-size:16px;}
.modal.modal-bottom .modal-dialog{position:absolute; left:0; right:0; bottom:-100%; width:100%; max-width:480px; margin:0 auto; transition-property:all;}
.modal.modal-bottom.show .modal-dialog{bottom:0;}
.modal.modal-bottom .modal-dialog .modal-content{border-radius:0;}
.modal.modal-bottom .modal-body{padding:0 0 64px 0;}

/* main */
.page.main{padding-top: 60px; padding-bottom:60px; background-color:#F6F5F3;}
.input main{padding-bottom:0;}
.tarot main{padding-bottom:10px;}
section{position:relative;}

.card{margin-top:16px; padding:0; border:0; background-color:transparent; gap:24px;}
h3 + .card{margin-top:4px;}
.card + h3{margin-top:33px;}
.card .card-tab{display:flex; margin-bottom:0px; gap:8px;}
.card .card-tab .tab-item{position:relative;}
.card .card-tab .tab-item + .tab-item:before{position:absolute; top:0; left:-12px; bottom:0; width:1px; height:12px; margin:auto 0; background-color:#9ca3af;/* content:'';*/}
.card .card-tab .tab-item .tab-link{height:40px; padding:0 15px; border:1px solid #DCFC; color:#666; font-size:14px; line-height:22px;}
.card .card-tab .tab-item .tab-link.active{border-color:#222; background-color:#222; color:#fff; font-weight:600;}

.icon-list{display:flex; margin-top:17px; flex-direction:column;gap:40px;}
.icon-list .list-link{display:flex; position:relative; width:100%; min-height:48px; padding-left:69px; background:url(../images/sub/ico_arrow.webp) no-repeat right top 11px / 24px; text-align:left; flex-direction:column;justify-content:center;/* padding-right:24px;*/}
.icon-list .list-link .list-img{position:absolute; top:-5px; left:0; width:56px; height:56px;}
.icon-list .list-link .list-img img{width:100%;}
.icon-list .list-link .list-title{color:#222; font-size:16px; font-weight:600; line-height:22px;}
.icon-list .list-link .list-text{margin-top:4px; color:#666; font-size:14px; line-height:20px; letter-spacing:-0.01em;}

.img-list-wrap{margin:12px -20px 0 -20px; padding:0 20px 24px 20px;}
.img-list-wrap + h3{margin-top:12px;}
.img-list{display:flex; white-space:nowrap; gap:12px;}
.img-list .list-item span{display:block; white-space:normal;}
.img-list .list-item .list-link{display:block; width:152px; padding-bottom:10px; background-color:#fff;}
.img-list .list-item .list-link .list-img{overflow:hidden;/* border-radius:16px;*/}
.img-list .list-item .list-link .list-img img{width:100%;}
.img-list .list-item .list-link .list-title{margin-top:12px; padding:0 11px; color:#222; font-size:14px; font-weight:600; line-height:22px;}
.img-list .list-item .list-link .list-text{margin-top:4px; padding:0 11px; color:#666; font-size:14px; line-height:20px;}

.icon-list2-wrap{margin:12px -20px 0 -20px; padding:0 20px 12px 20px;}
.icon-list2{display:flex; white-space:nowrap; gap:12px;}
.icon-list2 .list-item .list-link{display:block; position:relative; width:152px; height:154px; padding:16px; border-radius:16px; background-color:#fff; box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.08);}
.icon-list2 .list-item .list-link span{display:block; white-space:normal;}
.icon-list2 .list-item .list-link .list-img{position:relative; width:48px; height:48px; border-radius:50%; background-color:#f9fafb;}
.icon-list2 .list-item .list-link .list-img img{position:absolute; top:0; left:0; right:0; bottom:0; width:28px; margin:auto;}
.icon-list2 .list-item .list-link .list-title{overflow:hidden; margin-top:8px; color:#111827; font-size:16px; font-weight:600; text-overflow:ellipsis; line-height:22px; white-space:nowrap;}
.icon-list2 .list-item .list-link .list-text{display:-webkit-box; overflow:hidden; height:40px; margin-top:4px; color:#374151; font-size:14px; text-overflow:ellipsis; line-height:20px; -webkit-box-orient:vertical; -webkit-line-clamp:2;}

section.bg-white .card{background-color:#f3f4f6; box-shadow:none;}
section.bg-white .icon-list .list-link .list-img{background-color:#fff;}

#info{margin:12px 0 24px 0;}
#info .info-box{position:relative; padding:16px 40px 16px 70px; background-color:#fff;}
#info .info-profile{overflow:hidden; position:absolute; top:24px; left:20px; width:32px; border-radius:50%;}
#info .info-profile img{width:100%;}
#info .info-list{display:flex; gap:17px;}
#info .info-list li{position:relative; color:#222; font-size:16px; font-weight:500; line-height:24px;}
#info .info-list li + li:before{position:absolute; top:6px; left:-8px; width:1px; height:12px; background-color:#E6E6E6; content:'';}
#info .info-time{color:#666; font-size:14px; line-height:24px;}
#info .info-edit{position:absolute; top:0; right:20px; bottom:0; width:20px; height:20px; margin:auto 0; background:url(../images/sub/info_edit.webp) no-repeat center / 100%; font-size:0;}

#banner .swiper-slide a img{width:100%;}
#banner .swiper-controls{display:flex; padding:7px 0 13px 0; justify-content:center; align-items:center;}
#banner .swiper-controls .swiper-pagination{position:relative; top:auto; left:auto; bottom:auto; width:auto; margin-top:0; padding-bottom:1px;}
#banner .swiper-controls .swiper-pagination .swiper-pagination-bullet{opacity:1; width:7px; height:7px; background-color:#EBE7E4;}
#banner .swiper-controls .swiper-pagination .swiper-pagination-bullet-active{background-color:#222;}
#banner .swiper-controls .swiper-toggle-btn{width:24px; height:24px; background:url(../images/sub/ico_play.webp) no-repeat center / 100%; font-size:0;}
#banner .swiper-controls .swiper-toggle-btn.pause{background-image:url(../images/sub/ico_pause.webp);}

.nav{overflow:hidden; background-color:#F6F5F3;}
.main .nav{top:60px;}
.nav:before{position:absolute; left:50%; bottom:0; width:100vw; height:1px; background-color:#D5CFC9; content:''; transform:translateX(-50%);}
.nav .nav-list{display:flex; white-space:nowrap; gap:20px;}
.nav .nav-item .nav-link{position:relative; padding:0 4px; color:#666; font-size:16px; font-weight:500; line-height:44px; transition:color .25s ease-in-out;}
.nav .nav-item .nav-link:before{position:absolute; left:50%; bottom:0; width:0; height:2px; background-color:#222; content:''; transform:translateX(-50%); transition:width .25s ease-in-out;}
.nav .nav-item .nav-link.active{color:#222;}
.nav .nav-item .nav-link.active:before{width:100%;}

#my{padding-top:30px; padding-bottom:30px;}

#special{padding-top:30px; padding-bottom:30px;}

#saju{padding-top:30px; padding-bottom:30px; background-color:#EBE7E4;}

#tarot{padding-top:30px; padding-bottom:60px;}

/* sub */
.sub h5{margin-top:16px; color:#666; font-size:14px; line-height:22px;}
.sub main{padding-bottom:140px;background-color:#F6F5F3;}
.sub.tarot main{padding-bottom:0px !important;background-color:#F6F5F3;}
.sub.input main{padding-bottom:0px !important;background-color:#F6F5F3;}
.sub.cookie main{padding-bottom:50px !important;background-color:#F6F5F3;}

#form{padding-top:32px; background-color:#fff;}
#form form{height:100%;}
#form form fieldset{height:100%; overflow-x:hidden;overflow-y:auto;}
#form form .form-wrap{display:flex; margin-bottom:10px; flex-direction:column;gap:32px;}
#form form .form-wrap .form-box .form-label{margin-bottom:4px; color:#666; font-size:16px; font-weight:500; line-height:20px;}
#form form .form-wrap .form-box.sex .form-label{margin-bottom:8px;}
#form form .form-wrap .form-box .form-inp{display:flex; gap:8px 16px;flex-wrap:wrap;}
#form form .form-wrap .form-box .form-inp .form-inp-box{display:flex; width:100%; gap:8px;}
#form form .form-wrap .form-box.birth .form-inp .form-inp-box:nth-child(1){width:120px;}
#form form .form-wrap .form-box.birth .form-inp .form-inp-box:nth-child(2){width:calc(100% - 136px);}
#form form .form-wrap .form-box.birthTime .form-inp .form-inp-box .form-control{background:url(../images/sub/select_arrow.webp) no-repeat right center / 24px;}
#form form .form-btn-wrap{position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; padding:24px; background-color:#fff; box-shadow:0 0 40px rgba(0,0,0,.1);}
#form form .form-btn-wrap .form-bg{padding:16px; background-color:#F6F5F3;}
#form form .form-btn-wrap .form-text{margin-top:10px; color:#666;font-size: 1.3vh;line-height: 1.8vh;white-space:normal; word-break:break-all;}
#form form .form-btn-wrap .form-btn{margin-top:24px;}

#detail{min-height:calc(100vh - 60px);padding-top:24px;padding-bottom:10px;background-color:#F6F5F3;}
#detail .detail-list{display:flex; flex-direction:column;gap:32px;}
#detail h3{margin-top:0; font-size:20px; font-weight:600;}
#detail h3 + .detail-list{margin-top:36px;}
#detail h4{font-weight:500;}
#detail .detail-item p{margin-top:16px; font-size:14px; line-height:22px;}
#detail .detail-item h5 + p{margin-top:4px;}
#detail .detail-item .tag-list{display:flex; margin-top:24px; flex-wrap:wrap;gap:4px;}
#detail .detail-item .tag-list li{padding:3px 8px; background-color:#D4D8F0; color:#000046; font-size:12px; line-height:18px;}
#detail .detail-item .card-list{display:flex; margin-top:16px; padding:16px; background-color:#EBE7E4; flex-wrap:wrap;}
#detail .detail-item .card-list li{display:flex; width:100%; color:#666; font-size:14px; line-height:22px; gap:8px;}
#detail .detail-item .card-list li span{font-weight:500;}
#detail .detail-item .card-list.half li{width:50%;}
#detail .detail-item .card-comment{position:relative; margin-top:12px; padding:16px 36px; background-color:#fff; color:#666; font-size:14px; text-align:center; line-height:22px;}
#detail .detail-item .card-comment:before,
#detail .detail-item .card-comment:after{opacity:.7; position:absolute; top:16px; width:20px; height:20px; background:url(../images/sub/ico_comment.webp) no-repeat center / 100%; content:'';}
#detail .detail-item .card-comment:before{left:16px;}
#detail .detail-item .card-comment:after{right:16px; transform:rotate(180deg);}
#detail .detail-item .dot-list{display:flex; margin-top:12px; flex-direction:column;gap:4px;}
#detail .detail-item .dot-list li{position:relative; padding-left:8px; color:#666; font-size:14px; line-height:22px;}
#detail .detail-item .dot-list li:before{position:absolute; top:10px; left:0; width:2px; height:2px; border-radius:50%; background-color:#666; content:'';}
#detail .detail-list.type2{gap:20px;}
#detail h3 + .detail-list.type2{margin-top:16px;}
#detail .detail-list.type2 .detail-item{padding:16px; border-radius:16px; background-color:#eff6ff;}
#detail .detail-list.type2 .detail-item .tag-list li{border-color:#4b5563; background-color:#4b5563; color:#fff;}
#detail .detail-list.type2 .detail-item .card-list{background-color:#fff;}
#detail .detail-list.type2 .detail-item .card-comment{margin-top:8px; padding:0 20px;}
#detail .detail-list.type2 .detail-item .card-comment:before,
#detail .detail-list.type2 .detail-item .card-comment:after{top:0;}
#detail .detail-list.type2 .detail-item .card-comment:before{left:0;}
#detail .detail-list.type2 .detail-item .card-comment:after{right:0;}

#swiperOverlay{display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1100; justify-content:center; align-items:center;}
#swiperOverlay.active{display:flex;}

@media (min-width:481px){
    .wrapper .page{border-right:1px solid #eee; border-left:1px solid #eee;}
}