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

/*
// 이걸 적용하면 safari 주소표시줄은 사라지지 않지만, sticky-tabs 의 비정상적인 동작과 scroll 감지를 못한다는 단점이 있음
// 최신 웹사이트는 기본적으로 safari 주소표시줄이 사라지도록 설계되어있음(예시:네이버 모바일웹)
html,
body{
  height: 100%;
  overflow-x: hidden;
}
*/

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



/* 폰트 */
@font-face {
  font-family: "PhotoStudio";
  src: url("../fonts/PhotoStudio/PhotoStudioL.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PhotoStudio";
  src: url("../fonts/PhotoStudio/PhotoStudioM.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "PhotoStudio";
  src: url("../fonts/PhotoStudio/PhotoStudioB.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
font-face {
  font-family: "PhotoStudio";
  src: url("../fonts/PhotoStudio/PhotoStudioBB.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}


@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'),
}

@font-face {
    font-family: 'Minguk';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Minguk-Regular.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Minguk';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Minguk-Bold.woff') format('woff');
    font-weight: 800;
}

/* common */
body{color:#111827; font-size:14px; font-family:"Minguk", 'sans-serif'; overflow-x:hidden;background-color:#FFF8F7}
: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:#111827;}

main h2{font-size:25px; font-weight:400; line-height:35px;}
main h3{font-size:20px; 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;}

.sub main h4{font-size: 1.4em; font-weight:600; line-height:1.8em}

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

button{padding:0; border-width:0; background-color:transparent;}
.btn{font-size:15px;width:100%; margin:0; padding:13px 20px; border-radius:16px; font-weight:400;}
.btn-primary{border-color:#2563eb; background-color:#2563eb;}
.btn-secondary{border-color:#e5e7eb; background-color:#e5e7eb; color:#1f2937 !important;}
.btn.btn-primary:hover{border-color:#60a5fa; background-color:#60a5fa;}
.btn.btn-primary:active{border-color:#60a5fa; background-color:#60a5fa;}
.btn.btn-primary:disabled{border-color:#9ca3af; background-color:#9ca3af;}
.btn.btn-secondary:hover{border-color:#f3f4f6; background-color:#f3f4f6;}
.btn.btn-secondary:active{border-color:#f3f4f6; background-color:#f3f4f6;}
.btn.btn-secondary:disabled{border-color:#e5e7eb; background-color:#e5e7eb;}

.form-btn{margin-top:28px;}

/* layout */
.container{max-width:100%; padding:0 20px;}
.wrapper .side{display:none;}
.wrapper .page {max-width: 482px;margin: 0 auto;height: auto;min-height: 100vh;box-sizing: border-box;display: flex;flex-direction: column;border-left: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;}
#main.wrapper .page{background-color:#f9fafb;}
#main.wrapper .sub{background-color:#fff;}
section{overflow:hidden;}

/* header */
.main #header .navbar{--bs-navbar-padding-y:0;}
.sub #header .navbar{--bs-navbar-padding-y:0;border-bottom:1px solid #e5e7eb;}
#header .navbar .container{height:60px;}
#header .navbar h1{margin-bottom:0;margin: 0 auto;}
#header .navbar h1 span{display:block; color:#111827; font-size:25px; font-weight:800; 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:18px; 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:#4b5563; font-size:13px; 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:#4b5563; font-size:12px; line-height:16px; vertical-align:top;}
#footer .footer-info span + span{margin-left:12px;}

/* modal */
.modal .modal-dialog{width:271px; margin:20px auto;}
.modal .modal-content{border-radius:16px; color:#111827;}
.modal .modal-header{padding:18px 20px; border-bottom:0;}
.modal .modal-header .modal-title{font-size:18px;}
.modal .modal-header .btn-close{opacity:1;}
.modal .modal-body{padding:16px;}
.modal .modal-body .modal-list .list-item .list-link{display:flex; height:56px; padding:0 20px; color:#374151; font-size:16px; line-height:22px; align-items:center;}
.modal .modal-body .modal-list .list-item .list-link:hover{background-color:#eff6ff;}
.modal .modal-body .modal-form-list{display:flex; padding:0 20px; flex-wrap:wrap;gap:12px;}
.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:48px; padding:0 16px; border:1px solid #e5e7eb; border-radius:16px; background-color:#fff; color:#374151; font-size:16px; line-height:22px; cursor:pointer; align-items:center;}
.modal .modal-body .modal-form-list .list-item input:checked + label{border-color:#2563eb;}
.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-top:0; border-top:0; gap:8px;flex-wrap:nowrap;}
.modal .modal-footer .btn{padding-top:11px; padding-bottom:11px; border-radius:12px;}
.modal.modal-bottom .modal-dialog{position:absolute; left:0; right:0; bottom: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:24px 24px 0 0;}
.modal.modal-bottom .modal-body{padding:0 0 40px 0;}

/* main */
.page.main main{padding-top:20px;padding-bottom:5px;}
.page.sub main{padding-bottom:100px;}
section{position:relative;}

.icon-list {display: flex;flex-direction: column;gap: 16px;padding: 0;margin-top: 20px;list-style: none;}
.icon-list .card {margin: 0;padding: 18px 20px;border: 0;border-radius: 12px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);background-color: #fff;}
.icon-list .list-link {display: flex;position: relative;min-height: 56px;padding-left: 60px;flex-direction: column;justify-content: center;}
.icon-list .list-img {position: absolute;top: 50%;left: 0;width: 56px;height: 56px;background: #fff;transform: translateY(-50%);}
.icon-list .list-img img {position: absolute;top: 50%;left: 50%;width: 48px;height: auto;transform: translate(-50%, -50%);}
.icon-list .list-title {margin-top: 4px;margin-left:10px;color: #111827;font-size: 20px;word-break: break-all;letter-spacing: -0.5px;font-weight: 600;line-height: 25px;}
.icon-list .list-text {margin-left:10px;color: #8C8C8C;font-size: 16px;line-height: 20px;word-break: break-all;letter-spacing: -0.5px;}

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

#simli{padding-bottom:30px;}

/* sub */
.detail-item{padding:16px; border-radius:16px; background-color:#eff6ff;}

/* 심리테스트 하단 네비 */
.bottom-nav {position: fixed;left: 0; right: 0; bottom: 0;max-width: 480px;margin: 0 auto;background: #fff;border-top: 1px solid #DDD;box-shadow: 0 -2px 4px rgba(0,0,0,0.05);display: flex;flex-direction: column;padding: 0.75rem 1rem;z-index: 1000;}
.bottom-nav .page-info {flex: 1;text-align: center;margin-left: auto;}
.bottom-nav button {background: none;border: none;font-size: 1rem;font-weight: 500;}
.bottom-nav button:disabled {color: #CCC;}
.bottom-nav .btn-danger {background-color: #dc3545 !important;color: #fff !important;border: none !important;}
.bottom-nav .info-wrapper {margin-bottom: 0.5rem;}
.bottom-nav .infoText {margin: 0;font-size: 0.85rem;line-height: 1.4;color: #666;}

@media (min-width:1141px){
    /*.wrapper{padding-left:644px;}
    .wrapper .side{position:fixed;top:0;left:calc(50% - 562px);bottom:0;width:540px;align-items: baseline;display: flex;flex-direction: column;height: 100vh;justify-content: space-around;justify-items: center;flex-grow: 1;}
    .modal.modal-bottom .modal-dialog{left:644px;}
	.wrapper .page > main #dialogModal.modal {position: fixed !important;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) !important;}
	.bottom-nav{left:644px;}*/
}
@media (min-width:481px){
    .wrapper .page{border-right:1px solid #eee; border-left:1px solid #eee;}
}