#sub-03 .mob-br { display: none; }
#sub-03 { width: 100%; box-sizing: border-box; }
#sub-03 .nps-wrap { max-width: 980px; margin: 0 auto; margin: 0 auto; }
#sub-03 .nps-label-wrap { padding: 140px 0 60px 75px; max-width: 230px; margin: 0 auto; }
#sub-03 .nps-label { font-size: 17px; font-weight: 700; color: #222222; letter-spacing: 0.05em; margin: 0 0 4px 0; }
#sub-03 .nps-label-line { width: 15px; height: 1px; background: #717171; margin: 8px 0 2px 0; }
#sub-03 .nps-author { font-size: 17px; color: #222222; margin: 0; letter-spacing: 0.02em; }
#sub-03 .title-wrap { grid-column: 1 / 3; grid-row: 2; text-align: center; padding: 0 0 5px 0; position: relative; z-index: 1; background: #fff; }
#sub-03 .title { text-align: left; font-size: 50px; font-weight: 700; color: #000000; line-height: 1.4; letter-spacing: -0.02em; margin: 0; }
#sub-03 .section-divider { border: none; border-top: 1px solid #222; margin: 30px 0; }
#sub-03 .nps-desc-wrap { text-align: right; padding: 0 0 60px 0; }
#sub-03 .nps-desc { max-width: 530px; font-size: 18px; color: #2215C9; line-height: 1.7; letter-spacing: 0.01em; margin: 0 0 0 auto; font-weight: 600; text-align: left;}
#sub-03 .nps-desc strong { font-weight: 700; }
#sub-03 .body-wrap { }
#sub-03 .thumb-section { padding: 0 0 100px; }

/* ====== 반응형 ====== */
@media (max-width: 768px) {
  #sub-03 .pc-br { display: none; }
  #sub-03 .mob-br { display: block; }
  #sub-03 .nps-label-wrap { padding: 60px 0 40px 0; }
  #sub-03 .nps-label { font-size: 16px;}
  #sub-03 .nps-author { font-size: 16px; }
  #sub-03 .title { font-size: 26px; font-weight: 500; }
  #sub-03 .nps-desc { font-size: 17px; font-weight: 500; max-width: 100%;}
  #sub-03 .nps-desc-wrap { text-align: left; padding: 20px 0 40px 0; }
  #sub-03 .section-divider { display: none; }
  #sub-03 .thumb-section { padding: 0 0 30px; }
}
 

 
/* ====== 키워드 다이어그램 ====== */
#sub-03 .keyword-diagram { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 130px 5px; padding: 20px 0 170px; align-items: center; justify-items: center; }
 
/* 센터 원 */
#sub-03 .keyword-center-wrap { grid-column: 2; grid-row: 1 / 4; position: relative; display: flex; align-items: center; justify-content: center; width: 365px; height: 365px;}
#sub-03 .keyword-center-ring { position: absolute; border-radius: 50%; background: linear-gradient(to bottom, #FFD3CC, #FF8EA8); pointer-events: none;}
#sub-03 .keyword-center-ring.ring--lg { width: 365px; height: 365px; opacity: 0.50;}
#sub-03 .keyword-center-ring.ring--md { width: 300px; height: 300px; opacity: 0.50;}

/* 앞쪽 버튼 (기존 keyword-center) */
#sub-03 .keyword-center { position: relative; z-index: 1; width: 236px; height: 236px; border-radius: 50%; background: linear-gradient(to bottom, #FFD3CC, #FF8EA8); /* radial → linear로 교체 */
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #000000; letter-spacing: -0.02em; cursor: pointer; box-shadow: 0 8px 30px rgba(230, 80, 110, 0.30); transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center; line-height: 1.4; border: none; outline: none;}
#sub-03 .keyword-center:hover { transform: scale(1.05); box-shadow: 0 12px 40px rgba(230, 80, 110, 0.40);}


/* 키워드 버블 공통 */
#sub-03 .keyword-bubble { display: flex; text-align: left; align-items: center;  padding: 12px 16px 12px 30px; border-radius: 50px; border: none; cursor: pointer; font-size: 21px; font-weight: 700; color: #000000; letter-spacing: -0.01em; width: 100%; max-width: 300px; white-space: nowrap; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,0.10); transition: transform 0.18s ease, box-shadow 0.18s ease; outline: none; min-width: 300px; }
#sub-03 .keyword-bubble:hover {  box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
#sub-03 .kw-icons { display: flex; align-items: center; gap: 7px; flex-shrink: 0; justify-content: end;}
#sub-03 .kw-icons img { width: 50px; height: 50px; object-fit: contain; }
#sub-03 .keyword-bubble span { flex: 1; text-align: center; }
 
/* 버블 색상 */
#sub-03 .kw-late     { background: linear-gradient(120deg, #ffdcca, #ff92a8);  grid-column:1;  grid-row: 1; justify-self: end; transform: translateX(50px);}
#sub-03 .kw-strategy {
   background: linear-gradient(
    120deg,
    rgba(255, 243, 168, 0.9) 0%,
    rgba(167, 255, 132, 0.85) 47%,
    rgba(118, 237, 255, 0.95) 95%); grid-column: 3; grid-row: 1; justify-self: start; transform: translateX(-50px); }
#sub-03 .kw-max5     { background: linear-gradient(120deg, #ebe2ff, #da56ff); grid-column: 1; grid-row: 2; transform: translateX(-40px);}
#sub-03 .kw-rate     {  
    background: linear-gradient(
    120deg,
    #C9FFA8 0%,
    #97f8ff 47%,
    #5a81ff 95%);  
    grid-column: 3; grid-row: 2;  transform: translateX(40px);}
#sub-03 .kw-work     { background: linear-gradient(120deg, #cfffdd, #8cd078); grid-column: 1; grid-row: 3; transform: translateX(-50px);}
#sub-03 .kw-check    { background: linear-gradient(120deg, #FFDED2, #FF8EA8); grid-column: 3; grid-row: 3; justify-self: start; transform: translateX(-50px); }
 
#sub-03 .kw-work-wrap { position: relative; grid-column: 1; grid-row: 3; display: flex; align-items: center; width: 100%; max-width: 260px; justify-self: end;  transform: translateX(20px);}
#sub-03 .kw-work-wrap .kw-work { grid-column: unset; grid-row: unset; }
#sub-03 .kw-work-extra { position: absolute; right: -75px; width: 70px; height: 70px; object-fit: contain;}

@media (max-width: 1280px) {
  /* #sub-03 .keyword-bubble { min-width: 0;}
  #sub-03 .kw-work { min-width: 300px !important;} */
    #sub-03 .keyword-center-wrap { width: 280px; height: 280px; margin-bottom:20px; }
  #sub-03 .keyword-center-ring.ring--lg { width: 280px; height: 280px; }
  #sub-03 .keyword-center-ring.ring--md { width: 230px; height: 230px; }
  #sub-03 .keyword-center { width: 180px; height: 180px; font-size: 32px; }
  #sub-03 .keyword-diagram { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 20px 0 100px; }
  #sub-03 .keyword-bubble { transform: translateX(0px) !important; max-width: 100%; width: 100%; font-size: 21px; padding: 14px 18px 14px 22px; }
  #sub-03 .kw-late, #sub-03 .kw-strategy, #sub-03 .kw-max5, #sub-03 .kw-rate, #sub-03 .kw-work, #sub-03 .kw-check { grid-column: unset; grid-row: unset; }
  #sub-03 .kw-work-wrap { max-width: 100%;  transform: translateX(0px); }
  #sub-03 .kw-work-extra { display:none; right: -20px; width: 50px; height: 50px; }

}

/* ====== 반응형: 모바일 ====== */
@media (max-width: 768px) {
  #sub-03 .keyword-diagram { padding: 20px 0 60px; }
}
 
/* ====== 모달 오버레이 ====== */
#sub-03 .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.50); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
#sub-03 .modal-overlay.is-open { opacity: 1; pointer-events: all; }
 
/* 모달 카드 공통 */
#sub-03 .modal-card { position: relative; background: #fff; border-radius: 50px; padding: 30px 0; width: 100%; max-width: 430px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.20); transform: translateY(16px) scale(0.97); transition: transform 0.25s ease; border: 1px solid #000000; min-height: 470px; scrollbar-width: none; -ms-overflow-style: none;}
#sub-03 .modal-card::-webkit-scrollbar { display: none; }
#sub-03 .modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); }
 
/* 모달 닫기 버튼 */
#sub-03 .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,0.08); cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #555; transition: background 0.15s; }
#sub-03 .modal-close:hover { background: rgba(0,0,0,0.15); }
 
/* 모달 헤더 아이콘 */
#sub-03 .modal-icon { display: block; width: 90px; height: 90px; object-fit: contain; margin-left: auto; margin-right: 30px; }
 
/* 모달 텍스트 요소 */
#sub-03 .modal-tag { font-size: 13px; font-weight: 400; color: #222222; letter-spacing: -0.3px; margin: 0 0 8px 0; }
#sub-03 .modal-title { font-size: 24px; font-weight: 600; color: #222222; margin: 0 0 6px 0; letter-spacing: -0.02em; }
#sub-03 .modal-subtitle { font-size: 22px; font-weight: 600; color: #222222; margin: 20px 0 8px 0; letter-spacing: -0.01em; }
#sub-03 .modal-body { font-size: 17px; color: #222222; line-height: 1.7; margin: 0; }
#sub-03 .modal-divider { height: 1px; background:#000000 ; margin: 20px 0; border: none; }
 

/* 색상별 모달 카드 배경 */
#sub-03 .modal-card.bg-center { background: linear-gradient(160deg, #ffefef 15%, #ffb2c5 90%); padding: 50px 0 30px; }
#sub-03 .modal-card.bg-pink { background: linear-gradient(120deg, #ffefef 0%, #d0798f 100%); }
#sub-03 .modal-card.bg-green01 { 
    background: linear-gradient(
    120deg,
    #faffd5 0%,
    #ccffa5 45%,
    #76d2f9 95%); 
 }
#sub-03 .modal-card.bg-green02 {
  background: linear-gradient(
    90deg,
    #b1ebc3 20%,
    #86c772 95%); 
}
#sub-03 .modal-card.bg-blue {  
  background: linear-gradient(
    120deg,
    #C9FFB1 0%,
    #b1faff 35%,
    #7d9cff 80%);  
  } 
#sub-03 .modal-card.bg-purple { 
    background: linear-gradient(
    120deg,
    #cbc3e0 15%,
    #b056ca 80%);
}
#sub-03 .modal-card.bg-sky { background-color: #B5EEFE ; padding: 50px 0 40px; max-width: 450px !important;} 
#sub-03 .modal-card.bg-sky .modal-img { border-radius: 30px; margin: 20px 0; width: 100%; }
#sub-03 .modal-card.bg-blue .modal-body { color: #2a4060; }
#sub-03 .modal-card.bg-blue .modal-tag { color: #4070a0; }
#sub-03 .modal-card .modal-inner{ padding: 0 50px;}

/* 체크포인트 리스트 */
#sub-03 .modal-checklist { list-style: none; padding: 0; margin: 14px 0 0 0; }
#sub-03 .modal-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; line-height: 1.75; margin-bottom: 12px; letter-spacing: -0.5px; }
#sub-03 .modal-checklist li::before { content: ''; flex-shrink: 0; width: 26px; height: 23px; border-radius: 4px; background-image: url("../img/sub/03/check.png");background-size: contain; background-position: center; background-repeat: no-repeat; margin-top: 5px; }
#sub-03 .modal-notice { background: #FFFFFF; border-radius: 10px; padding: 12px 15px; font-size: 17px; line-height: 1.6; margin: 30px 0 0 0; font-weight: 600;  text-align: center; letter-spacing: -0.5px;}
 
/* 연기연금 센터 모달 */
#sub-03 .modal-card.bg-center .modal-accent { display: inline-block; background: linear-gradient(120deg, #ffb8c4, #f07090); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; }
#sub-03 .modal-card.bg-center .modal-title { color: #222; font-size: 24px; }
#sub-03 .modal-card.bg-center .modal-body { color: #555; }
 
/* 체크포인트 모달 안내 텍스트 */
#sub-03 .modal-important-title { font-size: 17px; font-weight: 800; color: #1a4a6a; margin: 0 0 8px 0; letter-spacing: -0.02em; }
#sub-03 .modal-important-body { font-size: 18px; line-height: 1.7; margin: 5px 0 20px 0; }
 
/* ====== 반응형 모달 ====== */
@media (max-width: 768px) {
  #sub-03 .modal-card { min-height: 0px;}
}