/* common */
section .sc-title { margin-bottom:  1rem; display: flex; align-items: center; justify-content: space-between;}
section .sc-title .mainTitle { font-size: 2rem; font-weight: 700; line-height: 1.4;}

.alertMessage { color: #999; font-size: 1.8rem; font-weight: 300; margin-top: 8rem; text-align: center;}
.btn-disabled { background-color: #ededed !important; color: #aaa !important;}
.btn-s1 { background-color: var(--brand-color); color: #fff;  border-radius: 0.8rem; display: block; padding: 1.6rem 2rem; width: 100%; font-size: 1.6rem; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between;} 
.btn-s1 img { width: 2rem;}
.bottom-button { margin-top: 4rem;}


/* home.php */
.homeWrap .container { display: flex; flex-direction: column; gap: 2rem;}

.homeWrap .sc-banner a {background-color: var(--brand-color); border-radius: 0.8rem; display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; box-sizing: border-box; gap: 1.6rem;}
.homeWrap .sc-banner .text_wrap { flex: 1; min-width: 0;}
.homeWrap .sc-banner .text_wrap p {  color: #fff; font-size: 1.4rem; font-weight: 300; margin-bottom: 0.6rem;}
.homeWrap .sc-banner .text_wrap h2 { color: #fff; font-size: 2rem; font-weight: 600;}
.homeWrap .sc-banner img { flex-shrink: 0; width: 8rem;}
.homeWrap .sc1 { background-color: #f4f4f4; border-radius: 0.8rem; padding: 2rem;}
.homeWrap .sc1 .sc-title { display: flex; align-items: center; justify-content: space-between;}
.homeWrap .sc1 .sc-title .text_wrap { flex: 1; min-width: 0;}
.homeWrap .sc1 .sc-title img { flex-shrink: 0; width: 10rem;}
.homeWrap .sc1 .list_wrap { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 3rem;}
.homeWrap .sc1 .list-item { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;}
.homeWrap .sc1 .list-item .text_wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1rem;}
.homeWrap .sc1 .list-item .text_wrap img { width: 3rem; aspect-ratio: 1/1;}
.homeWrap .sc1 .list-item .text_wrap h4 { font-size: 1.7rem; font-weight: 600;}
.homeWrap .sc1 .list-item .arrow { width: 1rem;}
.homeWrap .sc1 .list-item .arrow img { width: 100%;}

.homeWrap .sc-menu { display: flex; align-items: center; gap: 2rem;}
.homeWrap .sc-menu .menu-item { flex: 1; min-width: 0; background-color: var(--brand-color); border-radius: 0.8rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
.homeWrap .sc-menu .menu-item .text_box { width: 100%;}
.homeWrap .sc-menu .menu-item .text_box p { font-size: 1.8rem; font-weight: 600; line-height: 1.3; color: #fff; text-align: center;}
.homeWrap .sc-menu .menu-item img { height:68px;}




/* subpage */
.subpage-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 2rem;}

.subpage-list { display: flex; flex-direction: column; gap: 1.8rem;}
.subpage-list .list-item { background-color: #f4f5f7; border-radius: 1rem; padding: 2.4rem 1.8rem;}
.subpage-list .list-item .item-title { font-size: 1.6rem; font-weight: 600;}
.subpage-list .list-item .item-desc { font-size: 1.4rem; color: #999; line-height: 1.4; margin-top: 1rem;}
.subpage-list .list-item .item-desc strong{ font-size: inherit; margin-bottom: 4px; display: inline-block; color: #444; line-height: 1.3;}



/* sub.php */
.subWrap .contents_area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3rem;}
.subWrap .content_item h5 { color: var(--brand-color); position: relative; display: flex; align-items: center; font-size: 1.8rem; font-weight: 600;}
.subWrap .content_item h5::before { content:'◈'; color:var(--brand-color); font-size: 1.8rem; margin-right: 0.4rem;}
.subWrap .content_item .text_con { font-size: 1.5rem; color: #666; line-height: 1.5; margin-top: 2rem;}
.subWrap .content_item pre { font-size: 1.5rem; color: #666; line-height: 1.5; margin-top: 2rem; white-space: pre-wrap; }
.subWrap .content_item pre strong { font-size: 1.6rem; }
.subWrap .content_item pre .box { white-space: normal; }
.subWrap .content_item pre .box button { background-color: #f4f4f4; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2rem; border-radius: 0.8rem; font-size: 1.6rem; cursor: pointer; }
.subWrap .content_item pre .box button img { width: 2rem; }
.subWrap .content_item pre .box .text_box { font-size: 1.5rem; line-height: 1.5; color: #999; margin-top: 1rem; display: none; padding: 0 1.6rem;}
.subWrap .content_item pre .box.active .text_box { display: block; }
.subWrap .content_item pre .box.active button img { transform: rotate(180deg);}


/* sub2.php */
.sub2Wrap .contents_area { flex: 1; min-height: 0; display: grid; grid-template-columns: 100%; grid-auto-rows: 8rem; gap: 2rem; align-content: start;}
.sub2Wrap .content_item { background-color: #f4f4f4; padding: 1.6rem; border-radius: 0.8rem; min-height: 6rem; display: flex; align-items: center; justify-content: center;  width: 100%;  box-sizing: border-box;}
.sub2Wrap .content_item h5 { text-align: center; font-size: 1.6rem; line-height: 1.4; width: 100%; word-break: keep-all;}

/* sub2_detail.php */
.sub2DetailWrap .contents_area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3rem;}
.sub2DetailWrap .content_item h5 { background-color: #f4f4f4; padding: 1.6rem; border-radius: 0.8rem; min-height: 6rem; display: flex; align-items: center; justify-content: center;  width: 100%;  box-sizing: border-box; text-align: center; font-size: 1.6rem; line-height: 1.4; width: 100%; word-break: keep-all;}
.sub2DetailWrap .content_item pre { font-size: 1.5rem; color: #666; line-height: 1.5; margin-top: 2rem; white-space: pre-wrap; }


/* self_test.php */
.selfTestWrap .contents_area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4rem;}
.selfTestWrap .testlist .list-item { display: flex; flex-direction: column;  align-items: center;}
.selfTestWrap .testlist .test_category { background: #606060; color: #fff; font-size: 1.6rem; border-radius: 100px; padding: 0.8rem 1.6rem; display: inline-block; }
.selfTestWrap .testlist .question {text-align: center; line-height: 1.3; font-size: 2.4rem; color: #404040; margin-top: 2rem; font-weight: 600;}
.selfTestWrap .testlist .button-group {display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 4rem;}
.selfTestWrap .testlist .button-group .btn { border-radius: 1rem; border: 1px solid transparent; background-image: url(../img/icon-1.png); background-position: center; background-repeat: no-repeat; background-size: 4rem; background-color: #f4f4f4; width: 12rem; height: 14rem;}
.selfTestWrap .testlist .button-group .btn.active { background-color: #ffeee9; border: 1px solid var(--brand-color);}
.selfTestWrap .testlist .button-group .btn#btnYes { background-image: url(../img/icon-1.png);}
.selfTestWrap .testlist .button-group .btn#btnNo { background-image: url(../img/icon-2.png);}
.selfTestWrap .testlist .button-group .btn#btnYes.active { background-image: url(../img/icon-3.png);}
.selfTestWrap .testlist .button-group .btn#btnNo.active { background-image: url(../img/icon-4.png);}
.selfTestWrap .bottom-button-group button { width: 100%; background: #606060; color: #fff; text-align: center; padding: 1.6rem; font-size: 1.8rem; border-radius: 1rem;}

#test_modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center;}
#test_modal .test_modal_wrap { background: #fff; border-radius: 1rem; width: 90%; max-width: 480px; overflow: hidden; padding: 3.6rem 2.4rem;}
#test_modal .modal_body { text-align: center;}
#test_modal .modal_body img { width: 6rem; aspect-ratio: 1/1; object-fit: contain; margin: 0 auto 1.8rem;}
#test_modal .modal_body h5 { font-size: 2rem; font-weight: 700; margin-bottom: 0.6rem;}
#test_modal .modal_body p { font-size: 1.6rem; color: #999; line-height: 1.4;}
#test_modal .modal_btn { margin-top: 4rem;}
#test_modal .modal_btn button { width: 100%; padding: 1.6rem; border-radius: 0.8rem; font-size: 1.6rem; font-weight: 400; color: #fff; cursor: pointer; background: #606060;}