/* home.php */
.homeWrap section .sc-title { margin-bottom: 2rem;}
.homeWrap section .sc-title .mainTitle{ font-size: 2rem; font-weight: 700;}
.homeWrap section + section { margin-top: 4rem;}
.homeWrap .sc-visual { background-color: #f2f2f2;}
.homeWrap .sc-visual .vis-banner { width: 100%; padding: 3rem 0;}
.homeWrap .sc-visual .container { display: flex;}
.homeWrap .sc-visual .text-area { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: baseline; justify-content: space-between;}
.homeWrap .sc-visual .text-area p { font-size: 1.8rem; font-weight: 400; line-height: 1.3; color: #666; margin-bottom: 0.8rem;}
.homeWrap .sc-visual .text-area h3 { font-size: 2.4rem; font-weight: 700; line-height: 1.3;}
.homeWrap .sc-visual .text-area .vis-btn { background-color: var(--brand-color); color: #fff; padding: 1rem 1.6rem; font-size: 1.6rem; font-weight: 300; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.8rem; margin-top: 2rem;}
.homeWrap .sc-visual .text-area .vis-btn span { width: 1rem; aspect-ratio: 1/1;  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(-45deg); display: inline-block;}
.homeWrap .sc-visual .img-wrap { width: 10rem; flex-shrink: 0; display: flex; align-items: end;}

.homeWrap .sc1 { margin-top: 3rem;}
.homeWrap .sc1 .sc-contents{ display: flex; flex-direction: column;}
.homeWrap .sc1 .content-box { width: 80%; background-color: #f2f2f2; position: relative; display: flex; justify-content: space-between; padding-right: 10rem;}
.homeWrap .sc1 .content-box:nth-child(odd) { margin-right: auto; border-radius:  0 2rem 2rem 0;}
.homeWrap .sc1 .content-box:nth-child(odd)::before { content: ''; position: absolute; top: 0; right: calc(100% - 1px); width: 100%; height: 100%; background-color: #f2f2f2;}
.homeWrap .sc1 .content-box:nth-child(even) {  margin-left: auto; border-radius:  2rem 0 0 2rem; padding-left: 2rem;}
.homeWrap .sc1 .content-box:nth-child(even)::before { content: ''; position: absolute; top: 0; left: calc(100% - 1px); width: 100%; height: 100%; background-color: #f2f2f2;}
.homeWrap .sc1 .content-box + .content-box { margin-top: 2rem;}
.homeWrap .sc1 .content-box .text-box { padding: 4rem 0;}
.homeWrap .sc1 .content-box .text-box p { font-size: 1.6rem; font-weight: 400; color: #666; line-height: 1.3; margin-bottom: 0.2rem;}
.homeWrap .sc1 .content-box .text-box h3 { font-size: 2.2rem; font-weight: 600; line-height: 1.3;}
.homeWrap .sc1 .content-box img { width: 8rem; position: absolute;}
.homeWrap .sc1 .content-box:nth-child(odd) img { top: 0; right: 2rem;}
.homeWrap .sc1 .content-box:nth-child(even) img { bottom: 0; right: 0;}

.homeWrap .sc-btn-area { display: flex; align-items: center; gap: 2rem;}
.homeWrap .sc-btn-area .content-box { flex: 1; min-width: 0; border-radius: 2rem; aspect-ratio: 1/1;  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.6rem; padding: 2rem;}
.homeWrap .sc-btn-area .content-box .img-wrap { width: 100%; height: 8rem; display: flex; align-items: flex-end; justify-content: center;}
.homeWrap .sc-btn-area .content-box h3 { font-size: 1.8rem; font-weight: 600; color: #333;}
.homeWrap .sc2 .sc-btn-area .content-box:nth-child(1) { background-color: #dbf2f5;}
.homeWrap .sc2 .sc-btn-area .content-box:nth-child(2) { background-color: #e6f0fd;}
.homeWrap .sc3 .sc-btn-area .content-box:nth-child(1) { background-color: #eeecff;}
.homeWrap .sc3 .sc-btn-area .content-box:nth-child(2) { background-color: #def7da;}

.homeWrap .sc2 .sc-btn-area .content-box:nth-child(1) img {height: 80%;}
.homeWrap .sc2 .sc-btn-area .content-box:nth-child(2) img {height: 80%;}
.homeWrap .sc3 .sc-btn-area .content-box:nth-child(1) img {height: 90%;}
.homeWrap .sc3 .sc-btn-area .content-box:nth-child(2) img {height: 100%;}

.homeWrap section:last-child { padding-bottom: 4rem;}



/* 서브페이지 공통 */
.subWrap main .container { background: linear-gradient(#eef7ff 0% , #fff 20% 100%); min-height: 100%;}
.subWrap .sub-title-wrap { padding: 4rem 0 3rem;}
.subWrap .sub-title-wrap .sub-headline { text-align: center; font-size: 2.2rem; font-weight: 700; line-height: 1.4;}
.subWrap .sub-title-wrap .sub-desc { text-align: center; font-size: 1.6rem; font-weight: 300; line-height: 1.4; color: #777; margin-top: 2rem;}
.subWrap .sub-contents .content-box { padding: 2rem; border-radius: 1rem; background-color: #f2f2f2;}
.subWrap .sub-contents .content-box + .content-box { margin-top: 3rem;}
.subWrap .sub-contents .content-box .img-wrap { margin-bottom: 1rem; height: 4rem; display: flex; align-items: end;}
.subWrap .sub-contents .content-box .img-wrap img { height: 100%;}
.subWrap .sub-contents .content-box .con-title { font-size: 2rem; font-weight: 700; line-height: 1.3;}
.subWrap .sub-contents .content-box .con-desc { margin-top: 1rem; font-size: 1.6rem; color: #777; line-height: 1.6; font-weight: 300;}

.subWrap .btm-btn-wrap { display: flex; align-items: center; position: sticky; bottom: 4rem; margin-top: 3rem;}
.subWrap .btm-btn-wrap .sub-btn { width: 100%;  border-radius: 1rem; background-color: var(--brand-color); display: flex; align-items: center; justify-content: center; padding: 1.8rem 0; font-size: 1.8rem; color: #fff; font-weight: 500; gap: 0.8rem;}
.subWrap .btm-btn-wrap .sub-btn img { height: 2.4rem;}


/* checkListWrap - 수정된 버전 */
.checkListWrap main .container { display: flex; flex-direction: column;}
.checkListWrap .sub-title-wrap { flex-shrink: 0;}
.checkListWrap .sub-contents { 
  flex: 1; 
  min-height: 0; 
  display: flex; 
  flex-direction: column;
  position: relative;
}

/* 모든 카드를 겹쳐서 배치 */
.checkListWrap .question-item { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 2rem; /* 기존 padding 유지 */
}

.checkListWrap .question-item.active { 
  position: relative; /* active일 때만 relative로 */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.checkListWrap .question-box { flex: 1; min-height: 0;}
.checkListWrap .question-item.active .question-box { animation: fadeIn 0.5s ease;}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkListWrap .question-item .question-number { color: #fff; font-size: 1.6rem; background-color: var(--brand-color); border-radius: 100px; padding: 0.6rem 2rem; display: inline-block;}
.checkListWrap .question-item .question-text { font-size: 2rem; line-height: 1.4; font-weight: 700; word-break: keep-all; margin-top: 1rem;}
.checkListWrap .question-item .answer-options { display: flex; align-items: center; gap: 1.6rem; margin-top: 4rem;}
.checkListWrap .question-item .answer-options button { flex: 1; min-width: 0; border-radius: 1rem; background-color: #f2f2f2; text-align: center; padding: 1.6rem 0; font-size: 1.6rem; border: 1px solid transparent;}
.checkListWrap .question-item .answer-options button.selected { background-color: #d4eaff; border: 1px solid var(--brand-color); color: var(--brand-color); font-weight: 600;}
.checkListWrap .question-item .navigation-buttons { display: flex; align-items: center; gap: 1.6rem; margin-top: 4rem; flex-shrink: 0;}
.checkListWrap .question-item .navigation-buttons .nav-btn { flex: 1; min-width: 0; border-radius: 1rem; padding: 1.8rem 0; text-align: center; font-size: 1.8rem; font-weight: 600;}
.checkListWrap .question-item .navigation-buttons .nav-btn.prev-btn { background-color: #adadad; color: #777;}
.checkListWrap .question-item .navigation-buttons .nav-btn.next-btn { background-color: var(--brand-color); color: #fff;}
.checkListWrap .question-item .navigation-buttons .nav-btn.submit-btn { background-color: var(--brand-color); color: #fff;}

/* 모달 */
.checkListWrap .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.checkListWrap .modal.show { display: flex; align-items: center; justify-content: center;}
.checkListWrap .modal-content { background-color: white; padding: 4rem 2rem; border-radius: 12px; max-width: 500px; width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.2); text-align: center; display: flex; flex-direction: column; align-items: center;}
.checkListWrap .modal-icon { width: 8rem; margin-bottom: 1rem; display: flex; align-items: end; justify-content: center;}
.checkListWrap .modal-headline { font-size: 2.2rem; font-weight: bold; color: #333; line-height: 1.4; font-weight: 700;}
.checkListWrap .modal-desc { font-size: 1.6rem; line-height: 1.4; color: #777; margin-top: 1rem; font-weight: 300;}
.checkListWrap .modal-buttons { display: flex; gap: 10px; margin-top: 4rem; width: 100%;}
.checkListWrap .modal-btn { flex: 1; padding: 1.6rem 0; border: none; border-radius: 8px; font-size: 1.8rem; cursor: pointer; font-weight: 400;}
.checkListWrap .modal-close { background-color: var(--brand-color); color: #fff;}

.checkListWrap .toast { position: fixed; top: 6rem; left: 50%; transform: translateX(-50%) translateY(-20px); background-color: rgba(0, 0, 0, 0.6); color: white; padding: 1.6rem 3rem; border-radius: 1.5rem; font-size: 1.6rem; font-weight: 500; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); white-space: nowrap; min-width: 200px; text-align: center; transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;}
.checkListWrap .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}