/* 공통 UI 보정 — 헤더 예약 버튼과 우측 세로 퀵메뉴, 하단 상담바, 본문 제목 정렬 */

/* 1. 헤더 예약 버튼을 우측 세로 퀵메뉴(폭 74px · 우측 28px) 왼쪽으로 12px 띄운다 */
@media (min-width:1000px){
  .head_wrap .dn-nav-right .head-cta-btn{margin-right:max(0px,calc(98px - 1vw))}
  body.hani-home .head_wrap .dn-nav-right .head-cta-btn{margin-right:max(0px,calc(86px - 5vw))}
}

/* 2. 좁은 PC 폭에서 하단 상담바 입력칸이 줄어들게 해 접수 버튼이 화면 안에 남는다 */
@media (min-width:761px) and (max-width:1099px){
  html body #hcb.hcb{padding-left:16px !important;padding-right:16px !important;gap:8px}
  html body #hcb .hcb__f{gap:8px}
  html body #hcb .hcb__in--name,
  html body #hcb .hcb__in--tel,
  html body #hcb .hcb__sel--method,
  html body #hcb .hcb__sel--area{flex-shrink:1;min-width:58px}
  html body #hcb .hcb__in{padding-left:8px;padding-right:8px}
}

/* 3. 가운데 정렬로 지정된 이식 구역 제목은 가운데로 둔다 */
html body #main .legacy-content h2.tac,
html body #main .legacy-content h3.tac,
html body #main .legacy-content h4.tac{text-align:center !important}

/* 4. 포인트 구역 — 좌측 제목·우측 목록 2단은 981px 이상에서 유지하고 그 아래에서만 세로로 쌓는다 */
@media (min-width:981px){
  html body .legacy-content #patella_0104 .patella_0104_box .flex-box{flex-direction:row}
  html body .legacy-content #patella_0104 .patella_0104_box .flex-box > div.image-box{width:44%}
  html body .legacy-content #patella_0104 .patella_0104_box .flex-box > div.text-box{width:auto;flex:1 1 0;min-width:0}
  html body .legacy-content #patella_0104 .patella_0104_box .image-box .sticky{width:85%}
  /* 좌측 제목이 목록을 따라 내려오도록 — 바깥 래퍼가 스크롤 영역을 만들지 않게 한다 */
  html body .content_wrap:has(#patella_0104){overflow:clip}
}

/* 5. 포인트 구역 본문이 우측 세로 퀵메뉴(우측 102px 점유) 아래로 들어가지 않게 오른쪽 여백을 둔다.
      컨테이너 최대폭 1530px 은 그대로 — 화면이 넓어 바깥 여백이 생기면 그만큼 줄어든다 */
@media (min-width:761px){
  html body .legacy-content #patella_0104 .patella_0104_box > .w1500{
    padding-right:max(15px,calc(114px - max(0px,(100vw - 1530px) / 2)));
  }
  html body .legacy-content #patella_0104 .patella_0104_box .text-box{min-width:0;overflow-wrap:anywhere}
}

/* 6. 이식 구역 공통 컨테이너 — 좌우 여백을 우측 퀵메뉴 점유 폭에 맞춰 내용이 그 아래로 들어가지 않게 한다 */
@media (min-width:1000px){
  html body .legacy-content .w1600{padding-left:max(15px,calc(114px - max(0px,(100vw - 1600px) / 2)));padding-right:max(15px,calc(114px - max(0px,(100vw - 1600px) / 2)))}
  html body .legacy-content .w1500{padding-left:max(15px,calc(114px - max(0px,(100vw - 1530px) / 2)));padding-right:max(15px,calc(114px - max(0px,(100vw - 1530px) / 2)))}
  html body .legacy-content .w1400{padding-left:max(15px,calc(114px - max(0px,(100vw - 1430px) / 2)));padding-right:max(15px,calc(114px - max(0px,(100vw - 1430px) / 2)))}
  html body .legacy-content .w1200{padding-left:max(15px,calc(114px - max(0px,(100vw - 1230px) / 2)));padding-right:max(15px,calc(114px - max(0px,(100vw - 1230px) / 2)))}
  html body .legacy-content :is(.w1600,.w1500,.w1400,.w1200) :is(.w1600,.w1500,.w1400,.w1200){padding-left:15px;padding-right:15px}
}

/* 7. 포인트 구역 목록 — 사진 옆 설명이 폭이 모자라도 사진 아래로 떨어지지 않고 옆에서 줄바꿈된다 */
@media (min-width:981px){
  html body .legacy-content #patella_0104 .patella_0104_box .text-box ul li{display:flex;align-items:center}
  html body .legacy-content #patella_0104 .patella_0104_box .text-box ul li > .sticy_img{flex:0 1 auto;min-width:0}
  html body .legacy-content #patella_0104 .patella_0104_box .text-box ul li > .sticy_txt{flex:1 1 0;min-width:180px;top:0;word-break:keep-all}
}