#sub-04 .mob-br { display: none; }
#sub-04 { padding:0; width: 100%; box-sizing: border-box; }
#sub-04 .nps-wrap { }
#sub-04 .nps-wrap-inner { max-width: 1080px; margin: 0 auto; padding: 0 50px; }
#sub-04 .nps-label-wrap { padding: 140px 0 60px 85px; max-width: 260px; margin: 0 auto; }
#sub-04 .nps-label { font-size: 17px; font-weight: 700; color: #222222; letter-spacing: 0.05em; margin: 0 0 4px 0; }
#sub-04 .nps-label-line { width: 15px; height: 1px; background: #717171; margin: 8px 0 2px 0; }
#sub-04 .nps-author { font-size: 17px; color: #222222; margin: 0; letter-spacing: 0.02em; }
#sub-04 .badge { display: inline-block; background: #FF8EA8; color: #fff; font-size: 19px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
#sub-04 .title-wrap { grid-column: 1 / 3; grid-row: 2; text-align: left; padding: 0 50px 5px 50px;  position: relative; z-index: 1; background: #fff; }
#sub-04 .title { text-align: left; font-size: 50px; font-weight: 700; color: #000000; line-height: 1.4; letter-spacing: -0.02em; margin: 0; }
#sub-04 .section-divider { border: none; border-top: 1px solid #222; margin: 30px auto; width: calc(100% - 100px); max-width: 980px; }
#sub-04 .nps-desc-wrap { text-align: right; margin-bottom: 60px;}
#sub-04 .nps-desc { max-width: 530px; font-size: 18px; color: #FF8EA8; line-height: 1.7; letter-spacing: 0.01em; margin: 0 0 0 auto; font-weight: 500; text-align: left;}
#sub-04 .nps-desc strong { font-weight: 700; }
#sub-04 .body-wrap { }

#sub-04 .thumb-section { padding: 130px 50px 100px; }

/* ====== 반응형 ====== */
@media (max-width: 768px) {
  #sub-04 .pc-br { display: none; }
  #sub-04 .mob-br { display: block; }
  #sub-08 .nps-label-wrap { margin: 70px auto 20px; }
  #sub-04 .nps-label { font-size: 16px;}
  #sub-04 .nps-author { font-size: 16px; }
  #sub-04 .title { font-size: 26px; font-weight: 500; margin-bottom: 30px;  }
  #sub-04 .nps-desc { font-size: 17px; font-weight: 500; max-width: 100%;}
  #sub-04 .nps-desc-wrap { text-align: left; padding: 20px 0 40px 0; }
  #sub-04 .section-divider { display: none; }
  #sub-04 .nps-wrap-inner { padding: 0 20px;}
  #sub-04 .title-wrap { padding: 10px 20px 5px 20px; }
  #sub-04 .nps-label-wrap { padding: 60px 20px 30px 20px !important; max-width: 250px; margin: 0 auto; }
}
 
#sub-04 .check-wrap { margin: 0 auto 50px ; }
#sub-04 .check-title { text-align: center; font-size: 25px; font-weight: 600; color: #222; margin-bottom: 20px; }
#sub-04 .check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#sub-04 .check-card { background: #FFE4EA; border-radius: 20px; padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; }
#sub-04 .check-icon { width: 28px; height: 28px; background: url('../img/sub/04/check.png') no-repeat center / contain; display: block; position: absolute; top: 20px; left: 20px; }
#sub-04 .check-card img { width: auto; height: 82px; object-fit: contain; align-self: center; }
#sub-04 .check-card hr { width: 100%; border: none; border-top: 1px solid #000000; margin: 0; }
#sub-04 .check-card p { font-size: 18px; line-height: 1.4; text-align: center; width: 100%; }
#sub-04 .check-card small { font-size: 12px; }


@media (max-width: 768px) {
  #sub-04 .check-title { font-size: 21px; }
  #sub-04 .check-grid { grid-template-columns: 1fr; }
  #sub-04 .check-card { align-items: center; text-align: center; }
  #sub-04 .badge { font-size: 16px; margin-bottom: 20px; padding: 6px 8px; font-weight: 500;}
}

#sub-04 .content-section { display: flex; flex-direction: column; gap: 70px; margin-bottom: 100px; }
#sub-04 .content-item { display: flex;  gap: clamp(30px, 3vw, 80px); align-items: flex-start; }
#sub-04 .content-left { flex: 0 0 clamp(300px, 37vw, 420px); }
#sub-04 .content-right { flex: 1; }

#sub-04 .step-num { background-color: #FFE4EA; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #222; font-size: 26px; font-weight: 700; color: #222; margin-bottom: 16px; line-height: 30px; }
#sub-04 .step-num span { padding-bottom:2px;}
#sub-04 .content-title { font-size: 24px; font-weight: 700; line-height: 1.6; }
#sub-04 .content-desc { font-size: 18px; line-height: 1.9; margin-bottom: 30px; }

#sub-04 .quiz-box hr { border: none; border-top: 1px solid #e0e0e0; margin: 0; }
#sub-04 .quiz-item input[type="checkbox"] { display: none; }
#sub-04 .quiz-box { background: #f7f7f7; border-radius: 20px; padding: 8px 20px; }
#sub-04 .quiz-box hr { border: none; border-top: 0.5px solid #000000; margin: 0; }
#sub-04 .quiz-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; cursor: pointer; }
#sub-04 .quiz-circle { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #222222; flex-shrink: 0; position: relative; transition: border-color 0.2s, background-color 0.2s; }
#sub-04 .quiz-item input:checked + .quiz-circle { border-color: #FF8FA3; background-color: #FF8FA3; }
#sub-04 .quiz-item input:checked + .quiz-circle::after { content: ''; position: absolute; top: 45%; left: 50%; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: translate(-50%, -50%) rotate(45deg); }
#sub-04 .quiz-text { font-size: 18px; }
#sub-04 .note-title { font-size: 21px; font-weight: 700; margin-bottom: 40px; }
#sub-04 .note-desc { font-size: 18px; line-height: 1.8; padding-bottom:20px; }
#sub-04 .note-highlight { color: #F692D0; font-weight: 500;}

@media (max-width: 768px) {
  #sub-04 .check-grid { grid-template-columns: 1fr; }
  #sub-04 .check-card { align-items: center; text-align: center; min-height: 230px; }
  #sub-04 .content-item { flex-direction: column; gap: 24px; }
  #sub-04 .content-left { flex: none; width: 100%; }
  #sub-04 .content-section { gap:25px; margin-bottom: 40px;}
  #sub-04 .content-title { font-size: 21px; }
  #sub-04 .content-desc { font-size: 16px; }
  #sub-04 .quiz-text { font-size: 15px; }
  #sub-04 .step-num { margin-bottom: 10px; }
  #sub-04 .note-title { font-size: 20px; margin-bottom: 5px; }
  #sub-04 .note-desc { font-size: 16px; line-height: 1.7; }
}
 
#sub-04 .outro-wrap { background-color: #FFE4EA;  text-align: center; padding: 100px 50px 100px; }
#sub-04 .outro-text { margin-bottom: 40px; }
#sub-04 .outro-title { font-size: 25px; font-weight: 700; }
#sub-04 .outro-sub { font-size: 18px; line-height: 1.7; }

#sub-04 .outro-video { max-width: 350px; margin: 0 auto 60px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 15px 15px 0px -2px #000; position: relative;}
#sub-04 .outro-video iframe { width: 100%; height: 101%; display: block; }
#sub-04 .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
#sub-04 .play-btn { width: 140px; height: 140px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 80px; padding-left: 5px; }

#sub-04 .outro-note { max-width: 950px; margin: 0 auto; position: relative; }
#sub-04 .memo-top { width: 100%; display: block; }
#sub-04 .memo-bottom { width: 100%; display: block; }
#sub-04 .memo-content { background: url('../img/sub/04/memo-pc-middle.png') repeat-y center top / 100%; padding: 0 50px 0; text-align: center; }
#sub-04 .note-clip { display: none; }

@media (max-width: 768px) {
  #sub-04 .outro-wrap { padding: 70px 40px 60px; }
  #sub-04 .outro-title { font-size: 21px; margin-bottom: 10px; }
  #sub-04 .outro-text { margin-bottom: 70px; }
  #sub-04 .outro-sub { font-size: 16px; }
  #sub-04 .outro-video { max-width: 100%; }
  #sub-04 .memo-top { content: url('../img/sub/04/memo-mob-top.png'); }
  #sub-04 .memo-bottom { content: url('../img/sub/04/memo-mob-bottom.png'); }
  #sub-04 .memo-content { background: url('../img/sub/04/memo-mob-middle.png') repeat-y center top / 100%; padding: 0px 20px 0px; }
  #sub-04 .thumb-section { padding: 70px 20px 30px; }
  #sub-04 .play-btn { width: 115px; height: 115px; font-size: 50px; }
}