/* checklist_wrap */
.checklist_wrap { background-color: #f4f5f9; min-height: 100vh; position: relative; padding-bottom: 8rem;}
.checklist_wrap main .inner {padding-bottom: 60px; padding-top: 40px;}
.checklist_wrap .checklist_tabs { background-color: #fff; padding-top: 40px; display: flex; align-items: center; border-bottom: 1px solid #eaeaea; position: sticky; top: 100px; z-index: 11;}
.checklist_wrap .checklist_tab { flex: 1; min-width: 0; padding-bottom: 30px; font-size: 32px; text-align: center;}
.checklist_wrap .checklist_tab.active { border-bottom: 2px solid #111;}
.checklist_wrap .checklist_tab.active span { position: relative;  font-weight: 600;}
.checklist_wrap .checklist_tab.active span::after { content:''; position: absolute; top:-8px; right: -10px; width: 1rem; aspect-ratio: 1/1; background-color: #ff0000; border-radius: 100%; }

.checklist_wrap .checklist_panels { position: relative; }
.checklist_wrap .checklist_panel { display: none;}
.checklist_wrap .checklist_panel .checklist_item .checklist_title { background-color: #fff; box-shadow: var(--box-shadow); border-radius: var(--border-radius); cursor: pointer;}

.checklist_wrap .checklist_panel .checklist_item .checklist_detail { padding: 40px 30px; border-radius: var(--border-radius); display: none;}
.checklist_wrap .checklist_panel .checklist_item .detail_list {  flex-direction: column; gap: 30px; display: flex; margin-top: 20px;}
.checklist_wrap .checklist_panel .checklist_item .detail_con {  max-height: 50vh; overflow-y: scroll;}
.checklist_wrap .checklist_panel .checklist_item .detail_item { background-color: #f4f5f9; border-radius: var(--border-radius); padding: 30px 26px; display: flex; align-items: center; gap: 28px; }
.checklist_wrap .checklist_panel .checklist_item .detail_item .input_wrap { flex-shrink: 0; position: relative; width: 36px; aspect-ratio: 1/1;}
.checklist_wrap .checklist_panel .checklist_item .detail_item .input_wrap input[type="checkbox"]{ position: absolute; width: 100%; aspect-ratio: 1/1; opacity: 0; }
.checklist_wrap .checklist_panel .checklist_item .detail_item .input_wrap i { width: 100%; aspect-ratio: 1/1; background: url("../../img/icon_check02_off.png") no-repeat center/ cover; cursor: pointer; display: block;}
.checklist_wrap .checklist_panel .checklist_item .detail_item .input_wrap input[type="checkbox"]:checked + i { background: url("../../img/icon_check02_on.png");}

.checklist_wrap .checklist_panel .checklist_item .detail_item .text_wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.3;}
.checklist_wrap .checklist_panel .checklist_item .detail_item .text_wrap h4 { font-size: 30px; font-weight: 500; }
.checklist_wrap .checklist_panel .checklist_item .detail_item .text_wrap p { font-size: 26px; color: #757575; margin-top: 10px; line-height: 1.3;}

.checklist_wrap .checklist_panel .checklist_item.open .checklist_detail {display: block;}

  /* 기초 체크리스트 */
.checklist_wrap #tab-basic .checklist_list { display: flex; flex-direction: column; gap: 3rem;}
.checklist_wrap #tab-basic .checklist_item { background: #fff; border-radius: var(--border-radius);}
.checklist_wrap #tab-basic .checklist_item .checklist_title {  display: flex;  justify-content:space-between; align-items: flex-start; padding: 20px 30px; cursor: pointer;}
.checklist_wrap #tab-basic .checklist_title .title_wrap {display: flex; align-items: center;}
.checklist_wrap #tab-basic .checklist_title .title_wrap span { font-size: 26px; color: #757575; margin-left: 10px; font-weight: 500;}
.checklist_wrap #tab-basic .checklist_item .checklist_title .title_wrap h3 {font-size: 30px; font-weight: 600; margin-left: 20px; letter-spacing: 0px;}
.checklist_wrap #tab-basic .checklist_item .checklist_title img.arrow { transform: translateY(20px);}
.checklist_wrap #tab-basic .checklist_item.open .checklist_title img.arrow { transform: rotate(180deg) translateY(-20px);}
.checklist_wrap #tab-basic .checklist_item .detail_list { margin-top: 0;}

  /* 심화 체크리스트 */
.checklist_wrap #tab-advanced .checklist_total_progress { background-color: #fff; width: 100%; border-bottom: 1px solid #eaeaea; padding: 47px 0;}
.checklist_wrap #tab-advanced .checklist_total_progress .inner { padding-top: 0; padding-bottom: 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 24px; flex-shrink: 0; font-size: 24px;}
.checklist_wrap #tab-advanced .checklist_total_progress .text_wrap{ display: flex; align-items: center; gap: 5px;}
.checklist_wrap #tab-advanced .checklist_total_progress .text_wrap h5 {font-size: 32px; font-weight: 600;}
.checklist_wrap #tab-advanced .checklist_total_progress .progress_bar {width: 100%; height: 16px; border-radius: 10px; background-color: #f4f5f9; overflow: hidden;}
.checklist_wrap #tab-advanced .checklist_total_progress .progress_fill { background-color: var(--main-color); height: 100%; border-radius: 10px;}
.checklist_wrap #tab-advanced .checklist_total_progress span {color: #757575; font-size: 26px; font-weight: 500;}
.checklist_wrap #tab-advanced .checklist_total_progress span.percent.inProgress { color: inherit;}
.checklist_wrap #tab-advanced .checklist_total_progress span.percent.complete { color: var(--main-color);}

.checklist_wrap #tab-advanced .checklist_item .checklist_detail { background-color: #fff; border: 1px solid #eee; box-shadow: var(--box-shadow);}
.checklist_wrap #tab-advanced .checklist_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px 30px;}
.checklist_wrap #tab-advanced .checklist_item .checklist_title{ padding:38px 30px 30px; height: 240px; display: flex; flex-direction: column;}
.checklist_wrap #tab-advanced .checklist_item .title_wrap { display: flex;  flex: 1; min-height: 0; align-items: self-start;}
.checklist_wrap #tab-advanced .checklist_item .title_wrap h3 { flex: 1; min-width: 0; font-size: 30px; font-weight: 600; padding-right: 14px; line-height: 1.5; letter-spacing: 0px;  display: -webkit-box; 
 -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.checklist_wrap #tab-advanced .checklist_item .title_wrap h3 span { font-size: 24px; color: #757575;}
.checklist_wrap #tab-advanced .checklist_item .title_wrap img { transform: translateY(4px);}
.checklist_wrap #tab-advanced .checklist_item .status_wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; flex-shrink: 0; font-size: 24px;}
.checklist_wrap #tab-advanced .checklist_item .status_wrap .progress_bar {width: 100%; height: 8px; border-radius: 10px; background-color: #f4f5f9; overflow: hidden;}
.checklist_wrap #tab-advanced .checklist_item .status_wrap .progress_fill { background-color: var(--main-color); height: 100%; border-radius: 10px;}
.checklist_wrap #tab-advanced .checklist_item .status_wrap span {color: #757575; font-size: 26px; padding-right: 7px;}
.checklist_wrap #tab-advanced .checklist_item .status_wrap span.percent.inProgress { color: inherit;}
.checklist_wrap #tab-advanced .checklist_item .status_wrap span.percent.complete { color: var(--main-color);}
.checklist_wrap #tab-advanced .checklist_detail { position: fixed; top: calc(199px + (100vh - 199px) / 2); left: 50%; transform: translate(-50%, -50%); width: calc(720px - 64px); z-index: 999;}
.checklist_wrap #tab-advanced .checklist_detail .checklist_header { padding-bottom: 20px; border-bottom: 1px solid #ededed;}
.checklist_wrap #tab-advanced .checklist_detail .title_wrap{ display: flex; align-items: self-start; justify-content: space-between; margin-bottom: 30px;}
.checklist_wrap #tab-advanced .checklist_detail .title_wrap h4 { font-size: 32px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;}
.checklist_wrap #tab-advanced .checklist_detail .title_wrap button { flex-shrink: 0; transform: translateY(6px);}
.checklist_wrap #tab-advanced .checklist_detail .title_wrap .status_wrap { margin-top: 30px;}


.checklist_wrap .detail_bg {display: none; width: 100%; max-width: 720px; height: calc(100% - 199px); background-color: #111; opacity: 0.5; position: fixed; top: 0; left: 50%; z-index: 10; margin-top: 199px; transform: translateX(-50%);}
.checklist_wrap .detail_bg.open{ display: block;}


.checklist_wrap .checklist_panel.active { display: block;}