/* ===== base ===== */
.kneeoa{
  font-family: "Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  color:#111;
  background:#fff;
}
.kneeoa img{ display:block; width:100%; height:100%; object-fit:cover; }
.kneeoa-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== 1) hero ===== */
.kneeoa-hero{
  max-width: 980px;
  margin: 0 auto;
  padding: 46px 20px 18px;
  text-align:center;
}

/* small green label */
.kneeoa-hero__kicker{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  margin-bottom: 16px;
}
.kneeoa-hero__kickerText{
  font-size: 20px;        /* ✅ 제목 제외 텍스트 17px */
  font-weight: 600;
  color:#58b674;
  letter-spacing:-0.02em;
}
.kneeoa-hero__kickerBar{
  width: 2px;
  height: 18px;
  background:#58b674;
  opacity: 0.9;
}

/* title row with long lines */
.kneeoa-hero__titleRow{
  display:flex;
  align-items:center;
  gap: 18px;
  justify-content:center;
}
.kneeoa-hero__line{
  height: 2px;
  background:#2b2b2b;
  flex: 1 1 auto;
  opacity: 0.35;
}
.kneeoa-hero__title{
  margin: 0;
  font-size: 40px;        /* ✅ 큰 제목 40px */
  font-weight: 800;       /* ✅ 굵기 통일 */
  letter-spacing:-0.02em;
}

/* ===== 2) intro grid ===== */
.kneeoa-intro{
  padding: 22px 0 36px;
}
.kneeoa-intro__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items:center;
}
.kneeoa-intro__img{
  height: 350px;
  background:#f3f3f3;
  overflow:hidden;
}
.kneeoa-intro__text p{
  margin: 0 0 16px;
  font-size: 17px;        /* ✅ 본문 17px */
  line-height: 1.75;
  color:#333;
  letter-spacing:-0.01em;
}
.kneeoa-intro__text p:last-child{ margin-bottom:0; }

/* ===== 3) band ===== */
.kneeoa-band{
  background:#666;        /* 스샷의 진회색 느낌 */
  color:#fff;
  padding: 100px 20px;

  position: relative;
  overflow: hidden;
  background-image: url("../img/degenerative-knee-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kneeoa-band::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
}

.kneeoa-band__inner{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
    position: relative; /* ✅ 글씨가 오버레이 위로 올라오게 */
  z-index: 1;
}

.kneeoa-band__title{
  margin: 0 0 12px;
  font-size: 40px;        /* ✅ 큰 제목 40px */
  font-weight: 800;
  letter-spacing:-0.02em;
}
.kneeoa-band__desc{
  margin: 0;
  font-size: 17px;        /* ✅ 본문 17px */
  line-height: 1.75;
  opacity: 0.95;
}

/* ===== 4) cure ===== */
.kneeoa-cure{
  padding: 78px 20px 90px;
}
.kneeoa-cure__head{
  position:relative;
  max-width: 980px;
  margin: 0 auto 18px;
  text-align:center;
}
.kneeoa-cure__watermark{
  position:absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  font-size: 120px;
  font-weight: 900;
  color: rgba(0,0,0,0.06);
  letter-spacing: 0.03em;
  user-select:none;
  pointer-events:none;
}
.kneeoa-cure__title{
  margin: 0;
  font-size: 40px;        /* ✅ 큰 제목 40px */
  font-weight: 800;       /* ✅ '치료' 글자 전체 굵기 통일 (료만 굵어짐 방지) */
  letter-spacing:-0.02em;
}
.kneeoa-cure__sub{
  margin: 10px 0 0;
  font-size: 17px;        /* ✅ 본문 17px */
  color:#333;
}

/* steps box */
.kneeoa-stepsBox{
  max-width: 1200px;
  margin: 26px auto 0;
  background:#fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 28px 18px;
  background-color: #fbfbf3;
}

/* 4 + 3 layout */
.kneeoa-steps{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 16px;
}

/* center 2nd row(3 items) like screenshot */
.kneeoa-step:nth-child(5){ grid-column: 1 / span 1; }
.kneeoa-step:nth-child(6){ grid-column: 2 / span 1; }
.kneeoa-step:nth-child(7){ grid-column: 3 / span 1; }

.kneeoa-step{
  text-align:center;
  position:relative;
  padding: 0 10px;
}

/* arrows (desktop 4-col only, first row only) */
.kneeoa-step:not(:nth-child(4)):not(:nth-child(7))::after{
  content:"";
  position:absolute;
  right: -8px;
  top: 52px;
  width: 16px;
  height: 1px;
  background:#d7d7d7;
}
.kneeoa-step:not(:nth-child(4)):not(:nth-child(7))::before{
  content:"";
  position:absolute;
  right: -4px;
  top: 48px;
  width: 0; height: 0;
  border-left: 6px solid #d7d7d7;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* circle */
.kneeoa-step__circle{
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background:#fff;
  border: 1px solid #dedede;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.kneeoa-step__badge{
  position:absolute;
  top: -8px;
  right: 6px;
  background:#58b674;
  color:#fff;
  font-weight: 900;
  font-size: 14px;        /* ✅ 본문 규칙과 무관(배지) - 가독성용 */
  padding: 5px 8px;
  border-radius: 999px;
}

.kneeoa-step__icon{
  width: 40px !important;
  height: 40px !important;
  object-fit:contain;
}

/* texts */
.kneeoa-step__name{
  font-size: 17px;        /* ✅ 제목 제외 텍스트 17px */
  font-weight: 800;
  margin-bottom: 10px;
}
.kneeoa-step__desc{
  font-size: 17px;        /* ✅ 본문 17px */
  line-height: 1.65;
  color:#444;
}

/* ===== responsive ===== */
@media (max-width: 1024px){
  .kneeoa-intro__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .kneeoa-intro__img{ height: 210px; }

  .kneeoa-steps{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }

  /* 2열에서는 가운데 정렬/화살표 제거 */
  .kneeoa-step::before,
  .kneeoa-step::after{
    content:none !important;
  }
  .kneeoa-step:nth-child(5),
  .kneeoa-step:nth-child(6),
  .kneeoa-step:nth-child(7){
    grid-column: auto;
  }
}

@media (max-width: 560px){
  .kneeoa-hero__title{ font-size: 32px; }
  .kneeoa-band__title{ font-size: 32px; }
  .kneeoa-cure__title{ font-size: 32px; }

  .kneeoa-steps{
    grid-template-columns: 1fr;
  }
}