/* Mobile emergency overrides */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; }

  /* Generic container fixes */
  .container, .wrap, .inner, [class*="container"], [class*="wrap"], [class*="inner"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tailwind arbitrary width classes that often break mobile */
  [class*="w-\[1400px\]"], [class*="min-w-\[1400px\]"] { width: 100% !important; min-width: 0 !important; }
  [class*="w-\[1024px\]"], [class*="min-w-\[1024px\]"] { width: 100% !important; min-width: 0 !important; }
  [class*="w-\[820px\]"],  [class*="min-w-\[820px\]"]  { width: 100% !important; min-width: 0 !important; }

  /* Avoid fixed heights on mobile */
  [class*="h-\[600px\]"], [class*="h-\[654px\]"], [class*="h-\[540px\]"] {
    height: auto !important;
    min-height: 300px; /* keep sections visible */
  }

  /* Make grids/rows wrap */
  .flex, [class*="flex"] { flex-wrap: wrap !important; }
}

/* iOS Safari 100vh fix for full-screen sections */
@supports (height: 100dvh) {
  .full-screen, [class*="h-screen"] { min-height: 100dvh; }
}

/* ====== #about 섹션 모바일 레이아웃 핫픽스 ====== */
@media (max-width: 767px) {
  /* 섹션 전체 여백 줄이기 (상하 과한 공간 축소) */
  #about { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 기존 py-44 완화 */

  /* 카드 컨테이너: 박스가 너무 좁아지지 않도록 */
  #about .border-2 {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1rem !important;
  }

  /* 아이콘 + 텍스트 행: 좌우 패딩 줄이고 간격/정렬 보정 */
  #about .border-2 > .flex {
    padding: 16px !important;          /* px-24 → 16px */
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* 아이콘: 고정 폭만 차지 */
  #about .border-2 > .flex > img {
    flex: 0 0 auto !important;
    width: 24px !important;
    height: auto !important;
  }

  /* 텍스트: 한 글자씩 세로로 내려가는 현상 방지 */
  #about .border-2 h3 {
    display: block !important;
    flex: 1 1 auto !important;   /* 텍스트가 가로 공간을 확보하도록 */
    min-width: 0 !important;     /* flex 수축 허용(중요) */
    width: auto !important;
    padding-left: 12px !important;  /* px-16 완화 */
    padding-right: 0 !important;

    word-break: keep-all !important;   /* 한국어 단어 단위 줄바꿈 */
    overflow-wrap: anywhere;           /* 줄바꿈 여유 허용 */
    line-height: 1.65 !important;
    font-size: 1rem !important;        /* text-lg → 조금 줄여 가독성 개선 */
  }

  /* 배경 로고가 텍스트를 시각적으로 방해하면 모바일에서 숨김(선택) */
  #about > img[alt*="약속"] {
    display: none !important;
  }
}


/* ===== #team 섹션 모바일 레이아웃 핫픽스 ===== */
@media (max-width: 767px) {
  /* 공통: 글이 한 글자씩 세로로 떨어지는 것 방지 */
  #team p { word-break: keep-all !important; overflow-wrap: anywhere; line-height: 1.65; font-size: 1rem; }

  /* ---------- 상단(밝은 배경) 카드 ---------- */
  /* 2열 → 1열 스택, 패딩/갭 축소 */
  #team > div:first-child .relative {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding-top: 2rem !important;
  }
  /* 왼쪽에 절대 배치된 프로필 이미지를 '흐름' 안으로 넣기 */
  #team > div:first-child .relative > .absolute {
    position: static !important;
    margin: 0 auto 8px !important;
    width: 220px !important; /* 필요 시 조절 */
    height: auto !important;
  }
  /* 텍스트 블럭: 전체 폭 사용 & 여백 정리 */
  #team > div:first-child .relative > .h-full.w-1\/3 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 24px !important;
  }
  #team > div:first-child h2 { font-size: 1.25rem !important; }
  #team > div:first-child .bg-\[\#314D36\].h-1 { height: 3px !important; }

  /* ---------- 하단(진한 배경) 카드 ---------- */
  /* 오타 보정: class="h-[654px]w-full"로 높이/너비가 꼬임 → 강제 리셋 */
  #team > div:nth-child(2) > .relative {
    height: auto !important;
    width: 100% !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  /* 내부 컨텐츠 2열 → 1열 (이미지 위, 텍스트 아래 or 그 반대 원하는 배치) */
  #team > div:nth-child(2) .flex.max-w-6xl {
    flex-direction: column-reverse !important; /* 이미지 위로 올리려면 'column'로 바꾸세요 */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding-top: 0 !important;
  }
  /* 텍스트 블럭 전체 폭 */
  #team > div:nth-child(2) .h-full.w-1\/3 {
    width: 100% !important;
    padding: 0 16px 24px !important;
  }
  #team > div:nth-child(2) h2 { font-size: 1.25rem !important; }
  #team > div:nth-child(2) .bg-\[\#E9E7DB\].h-1 { height: 3px !important; }

  /* 우측 이미지 컨테이너 축소 */
  #team > div:nth-child(2) .w-\[370px\],
  #team > div:nth-child(2) .w-\[370px\] img {
    width: 220px !important;   /* 필요 시 200~260px 사이로 조절 */
    height: auto !important;
  }
}

/* ===== 헤더(상단 메뉴바) 모바일 보정 ===== */
@media (max-width: 767px) {
  /* 헤더 래퍼: 높이 자동 + 내부 여백 확보 + 배경 유지 */
  .sticky.top-0 {
    height: auto !important;
    padding: 8px 12px !important;
    background: #314D36 !important;
    z-index: 100 !important;
  }
  /* 내부 컨테이너: 전체폭 사용, 좌우 패딩/간격 축소 */
  .sticky.top-0 > .flex {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 8px !important;
    gap: 8px !important;
  }
  /* 로고 크기 축소 */
  .sticky.top-0 img[alt="이로운치과의원"] {
    width: 140px !important;
    height: auto !important;
  }
  /* 메뉴 리스트: 줄바꿈 허용, 가운데 정렬, 글자 크기 축소 */
  .sticky.top-0 > .flex > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    column-gap: 12px !important;
    justify-content: center !important;
    font-size: 0.95rem !important; /* text-lg → 살짝 축소 */
    width: 100% !important;
  }
}

/* ===== 히어로(첫 화면) 모바일 보정 ===== */
@media (max-width: 767px) {
  /* 헤더 바로 다음에 오는 배경 히어로 컨테이너 선택 */
  .sticky.top-0 + div > .flex.flex-col.justify-center.items-center {
    /* iOS 100vh 문제 완화: 고정 높이 대신 최소 높이 */
    min-height: 75vh !important;
    height: auto !important;
    padding: 24px 16px 32px !important;
    background-position: center !important;
    background-size: cover !important;
    background-blend-mode: overlay !important;
  }

  /* 히어로 텍스트 박스: 애니메이션 미실행 대비(가시화) + 폭 제한 */
  .sticky.top-0 + div > .flex.flex-col.justify-center.items-center > div {
    opacity: 1 !important;
    transform: none !important;
    max-width: 680px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 부제목, 본문, 제목 크기/행간 조정 */
  .sticky.top-0 + div p {
    word-break: keep-all !important;
    overflow-wrap: anywhere;
    line-height: 1.7 !important;
    font-size: 1rem !important; /* text-xl / text-lg → 1rem */
  }
  .sticky.top-0 + div h1 {
    margin-top: 12px !important;
    font-size: 1.75rem !important;  /* text-4xl → 다운스케일 */
    line-height: 1.35 !important;
    word-break: keep-all !important;
  }
}


/* ===== #feature 섹션 모바일 레이아웃 보정 ===== */
@media (max-width: 767px) {
  /* 공통 타이포/줄바꿈 */
  #feature h2, #feature p { word-break: keep-all; overflow-wrap: anywhere; }
  #feature h2 { line-height: 1.35; }
  #feature p  { line-height: 1.7; }

  /* 큰 섹션 여백(py-44) 완화 */
  #feature > div { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* 섹션 타이틀 영역 */
  #feature h3.text-\[\#E9E7DB\].text-lg { font-size: 0.95rem !important; padding: 6px 12px !important; }
  #feature h2.text-4xl { font-size: 1.6rem !important; margin-top: 0.75rem !important; }

  /* --- 블록 01: 이미지 2장 그리드 → 1열 스택 --- */
  #feature .grid.grid-cols-2 { 
    grid-template-columns: 1fr !important; 
    gap: 12px !important; 
    margin-top: 12px !important;
  }
  /* 터치 디바이스에서 hover scale 과한 확대 방지 */
  #feature .image-container img { transform: none !important; }
  #feature .image-container { border-radius: 14px !important; overflow: hidden !important; }
  #feature p.text-\[\#314D36\].text-xl { font-size: 1rem !important; }

  /* “01 / 02 / 03” 넘버 & 소제목 크기 조정 */
  #feature p.font-extrabold.text-4xl { font-size: 1.5rem !important; margin-top: 1.25rem !important; }
  #feature h2.text-3xl { font-size: 1.35rem !important; }

  /* --- 블록 02: 좌우 2열 → 세로 스택 --- */
  #feature .bg-\[\#F5F4F1\] .flex.justify-between { 
    flex-direction: column !important; 
    gap: 16px !important; 
    align-items: center !important;
  }
  #feature .bg-\[\#F5F4F1\] img[alt="이로운치과의 특징1"] {
    width: 100% !important; height: auto !important; max-width: 520px !important; border-radius: 12px;
  }
  #feature .bg-\[\#F5F4F1\] p.text-xl { font-size: 1rem !important; margin-top: 1rem !important; }

  /* 파트너 로고 영역: 2줄 플렉스 → 랩/타일 */
  #feature .bg-\[\#F5F4F1\] .flex.gap-10.flex-col { gap: 12px !important; }
  #feature .bg-\[\#F5F4F1\] .flex.gap-14.justify-center.items-center {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }
  #feature .bg-\[\#F5F4F1\] .flex.gap-14.justify-center.items-center img {
    width: 92px !important; height: auto !important;
    opacity: 0.95;
  }

  /* --- 블록 03: 제목/본문 좌우 → 세로 스택, 이미지 박스 풀폭 --- */
  #feature .bg-white .flex.flex-col .flex.mt-6.justify-between {
    flex-direction: column !important; gap: 12px !important; align-items: stretch !important;
  }
  #feature .bg-white .flex.flex-col .flex.mt-6 p.text-xl { font-size: 1rem !important; }
  #feature .bg-white .relative.flex.h-\[365px\] {
    height: 220px !important;                /* 너무 높은 히어로 축소 */
    border-radius: 14px !important;
  }
  #feature .bg-white .px-20.py-11.mt-24 {
    padding: 16px !important;
    margin-top: 20px !important;
    border-radius: 14px !important;
  }
  /* 썸네일 그리드: 2→2 유지, 매우 좁을 때 1열 */
  @media (max-width: 420px) {
    #feature .bg-white .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: 1fr !important; }
  }
  @media (min-width: 421px) and (max-width: 767px) {
    #feature .bg-white .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  }
  #feature .bg-white .grid img { width: 100% !important; height: auto !important; }

  /* 문장 강조/정보 버튼 행 간격 보정 */
  #feature .flex.gap-4.mt-14, 
  #feature .flex.gap-4.mt-24 { gap: 8px !important; margin-top: 14px !important; }
  #feature .flex.gap-4.mt-24 + .grid { margin-top: 14px !important; }
}

/* ===== 치료 과정 섹션(배경 + 그리드) 모바일 보정 ===== */
@media (max-width: 767px) {
  /* 섹션 상하 여백(py-44) 완화 */
  section[style*="bgProcess"], section[style*="/bgProcess.png"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* 섹션 제목/부제 */
  section[style*="bgProcess"] h3.text-\[\#E9E7DB\].text-lg {
    font-size: 0.95rem !important;
    padding: 6px 12px !important;
  }
  section[style*="bgProcess"] h2.text-4xl {
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    margin-top: 0.75rem !important;
    text-align: center !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 프로세스 카드 그리드: 4→2→1 단계 반응형  */
  section[style*="bgProcess"] .mt-28.grid {
    margin-top: 1.5rem !important;
    gap: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* 아주 좁은 화면(≤420px)에서는 1열 */
  @media (max-width: 420px) {
    section[style*="bgProcess"] .mt-28.grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* 카드 박스 스타일 & 배지 크기 축소 */
  section[style*="bgProcess"] .bg-\[\#E9E7DB\].p-1.shadow.rounded-lg {
    border-radius: 14px !important;
    padding: 6px !important;
  }
  section[style*="bgProcess"] .absolute.bg-\[\#E9E7DB\].w-11.h-11 {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
    border-top-left-radius: 10px !important;
    border-bottom-right-radius: 16px !important;
  }

  /* 카드 이미지: 가로폭에 자연 반응 */
  section[style*="bgProcess"] img[alt="implant"] {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
  }

  /* 카드 캡션(CT, Oral Scanner 등) */
  section[style*="bgProcess"] h3.text-xl {
    margin-top: 10px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    word-break: keep-all;
  }

  /* 협업 문구 */
  section[style*="bgProcess"] > .relative > h3.text-xl.text-center {
    margin-top: 1.75rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 0 8px !important;
  }

  /* 인용 카드(유튜브 링크 포함) */
  section[style*="bgProcess"] .mt-16.py-14.px-20.w-full.flex.flex-col.items-center {
    padding: 16px !important;
    border-radius: 14px !important;
    margin-top: 18px !important;
    gap: 10px !important;
  }
  section[style*="bgProcess"] .mt-16 .text-xl {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  section[style*="bgProcess"] .mt-16 a {
    gap: 8px !important;
  }
  section[style*="bgProcess"] .mt-16 svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
  }
}

/* 고해상도 모바일(768~959px)에서 살짝 넉넉히 3열 */
@media (min-width: 768px) and (max-width: 959px) {
  section[style*="bgProcess"] .mt-28.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* ===== #price 섹션 모바일 보정 ===== */
@media (max-width: 767px) {
  #price { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* 바깥 카드: 좌우 2열 → 세로 스택 */
  #price .mt-14.flex.w-full {
    flex-direction: column-reverse !important;  /* 상단엔 이미지, 아래에 텍스트가 더 시원함. 원하면 column으로 */
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* 이미지 박스: 풀폭 반응형 */
  #price .mt-14.flex.w-full > .flex.w-5\/12 {
    width: 100% !important;
    max-height: 260px;              /* 너무 길면 축소 */
  }
  #price .mt-14.flex.w-full > .flex.w-5\/12 img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    display: block;
  }

  /* 텍스트 박스: 풀폭 + 여백 다듬기 */
  #price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 {
    width: 100% !important;
    padding: 18px 16px !important;     /* py-14 px-12 축소 */
    gap: 10px !important;
  }

  /* 서문 문단의 'w-1/2' 때문에 좁아지는 문제 해제 */
  #price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 > .w-1\/2 {
    width: 100% !important;
  }

  #price h2.text-4xl { font-size: 1.6rem !important; line-height: 1.35 !important; text-align: center; }
  #price h3.mb-6, #price p, #price li { word-break: keep-all; overflow-wrap: anywhere; }
  #price .text-xl { font-size: 1rem !important; line-height: 1.65 !important; }

  /* 체크리스트 가독성 */
  #price .border-t-2, #price .border-y-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
  #price .border-y-2 { border-top-width: 2px !important; border-bottom-width: 2px !important; }

  /* 가격 표시: 제목 대비 크기 재조정 */
  #price h3.text-5xl {
    font-size: 1.9rem !important; line-height: 1.25 !important; margin-top: 16px !important;
  }
  #price h3.text-5xl span.text-sm { display: block; margin-top: 6px; font-size: .8rem !important; opacity: .9; }
}


/* ===== #price 이미지 겹침 해결 ===== */

/* 1) 기본: 텍스트가 항상 위 레이어 */
#price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 {
  position: relative !important;
  z-index: 2 !important;
}

/* 이미지 컨테이너는 아래 레이어 + 터치 방해 금지 */
#price .mt-14.flex.w-full > .flex.w-5\/12 {
  position: relative !important;
  z-index: 1 !important;
}
#price .mt-14.flex.w-full > .flex.w-5\/12 img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: none;                 /* 터치/스크롤 방해 방지 */
}

/* 2) 모바일: 이미지 완전 숨김 (가장 깔끔) */
@media (max-width: 767px) {
  #price .mt-14.flex.w-full { 
    flex-direction: column !important;  /* 텍스트-이미지 순서 꼬임 방지 */
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  #price .mt-14.flex.w-full > .flex.w-5\/12 {
    display: none !important;           /* 이미지 제거 */
  }

  #price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 {
    width: 100% !important;
    padding: 18px 16px !important;      /* 여백 정리 */
  }
}

/* 3) 중간 화면(태블릿): 이미지 키우지 않고 안전하게 붙이기 */
@media (min-width: 768px) and (max-width: 1023px) {
  #price .mt-14.flex.w-full > .flex.w-5\/12 {
    width: 40% !important;              /* 5/12 ≈ 41.7% → 살짝 축소 */
    max-height: 280px !important;       /* 너무 커지지 않게 */
    overflow: hidden !important;
  }
  #price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 {
    width: 60% !important;
    padding: 24px !important;
  }
}

/* 4) 데스크톱: 혹시라도 겹침 보이면 대비책 */
@media (min-width: 1024px) {
  /* 텍스트쪽 배경은 불투명 → 겹쳐 보여도 텍스트 가독성 확보 */
  #price .mt-14.flex.w-full > .flex.flex-col.w-7\/12 {
    background: #314D36 !important; /* 원래 배경색 유지 */
  }
}

/* ================================
   Gallery: 이로운치과 둘러보기
   ================================ */
@media (max-width: 767px) {
  /* 섹션 타이틀 크기/행간 */
  section.bg-white h2.text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    padding: 0 12px !important;
  }

  /* 메인 슬라이드 높이 축소 (h-[600px] → 48vh 정도) */
  ._2ILZE ._L8X8r .relative.w-full.h-\[600px\] {
    height: 48vh !important;
    min-height: 220px !important;
    max-height: 360px !important;
    border-radius: 14px !important;
  }
  ._2ILZE ._L8X8r img.object-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 썸네일 스트립: 한 줄 스크롤 + 간격 축소 + 패딩 제거 */
  ._2c50p { flex-basis: auto !important; }
  ._2c50p ._-LJ2W {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  ._2c50p ._-cAh3 {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    border-radius: 10px !important;
  }
  ._2c50p ._-cAh3 .w-full.h-full.rounded-2xl.p-10 {
    padding: 0 !important;
    border-radius: 10px !important;
  }
  ._2c50p img.w-full.h-full.rounded-2xl.object-cover {
    border-radius: 10px !important;
  }

  /* 좌우 화살표 버튼 크기/터치 영역 축소 */
  ._3lwW_ svg { width: 36px !important; height: 36px !important; }
  ._3lwW_ ._ZTBlf { padding: 4px !important; }

  /* 불필요한 컨트롤(자동재생/최대화)이 과하면 숨김 선택 */
  /* ._3lwW_._lhmht, ._3lwW_._1oKnM { display:none !important; } */
}

/* 태블릿에서 메인 슬라이드 조금 넉넉하게 */
@media (min-width:768px) and (max-width:1023px) {
  ._2ILZE ._L8X8r .relative.w-full.h-\[600px\] {
    height: 56vh !important;
    max-height: 440px !important;
  }
}

/* ================================
   Contact: 오시는 길(지도 + 정보카드)
   ================================ */
@media (max-width: 767px) {
  #contact { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* 타이틀 */
  #contact h2.text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    padding: 0 12px !important;
  }

  /* 지도 높이: 화면에 맞게 */
  #map { height: 300px !important; }

  /* 5칸 그리드 → 2칸/1칸 반응형 */
  #contact .grid.grid-cols-1.lg\:grid-cols-5 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
    padding: 0 8px !important;
  }
  @media (max-width: 420px) {
    #contact .grid.grid-cols-1.lg\:grid-cols-5 { grid-template-columns: 1fr !important; }
  }

  /* 카드 내 타이포 & 정렬 보정 */
  #contact h3.text-xl { font-size: 1.05rem !important; }
  #contact p.text-md { font-size: 0.95rem !important; line-height: 1.65 !important; }
  #contact .flex.flex-col.justify-start.items-center,
  #contact .flex.flex-col.justify-between.items-center {
    padding: 10px 6px !important;
    background: #fff !important;
    border-radius: 12px !important;
  }
  #contact svg { width: 22px !important; height: 22px !important; }

  /* 주소 문구 줄바꿈 부드럽게 */
  #contact p.text-center, #contact p.text-right {
    text-align: center !important;
    word-break: keep-all; overflow-wrap: anywhere;
  }

  /* 네이버톡톡/블로그 카드: 터치 영역 확대 */
  #contact a.items-center.flex.flex-col { padding: 10px 6px !important; }
}

/* ================================
   Footer
   ================================ */
@media (max-width: 767px) {
  footer { padding-top: 24px !important; padding-bottom: 18px !important; }
  footer .container.max-w-6xl {
    padding: 0 12px !important;
    text-align: center !important;
  }
  footer .gap-3.flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  footer img[alt="이로운치과"] {
    width: 140px !important; height: auto !important; margin-top: 12px !important;
  }
  footer p { line-height: 1.65 !important; }
}

/* ===== 비급여항목안내 팝업: 전역 보정 ===== */

/* 오버레이: 화면 꽉 채우고 가운데 정렬 유지 */
body > div[style*="position: fixed"][style*="inset: 0"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important; /* 가장자리 여백 */
  z-index: 1000 !important;
}

/* 내부: 배경 오버레이 레이어 */
body > div[style*="position: fixed"][style*="inset: 0"] > .fixed.inset-0.bg-black {
  position: static !important;                  /* 중첩 fixed 해제 */
  background: rgba(0,0,0,.5) !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 팝업 박스 */
body > div[style*="position: fixed"][style*="inset: 0"] .bg-white.p-5.overflow-y-auto.relative {
  width: 100% !important;
  max-width: 720px !important;
  max-height: 80vh !important;
  border-radius: 16px !important;
  overflow: hidden !important;        /* 모서리 둥글게 유지 */
  display: flex !important;
  flex-direction: column !important;
}

/* 헤더(타이틀 + 닫기버튼) */
body > div[style*="position: fixed"][style*="inset: 0"] .text-center.mb-5.text-2xl {
  position: sticky !important;
  top: 0;
  background: #fff;
  margin: 0 !important;
  padding: 14px 48px 12px !important;
  font-size: 1.15rem !important;
  border-bottom: 1px solid #eee;
  z-index: 2;
}

/* 닫기 버튼 위치/크기 */
body > div[style*="position: fixed"][style*="inset: 0"] .text-center.mb-5.text-2xl .absolute.right-10 {
  right: 12px !important;
  top: 10px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: #314D36 !important;
}

/* 스크롤 영역: 표가 길어도 헤더는 고정 */
body > div[style*="position: fixed"][style*="inset: 0"] .container.mx-auto {
  overflow: auto !important;
  padding: 0 12px 16px !important;
  max-height: calc(80vh - 54px) !important; /* 타이틀 높이 제외 */
}

/* 표 기본 스타일 */
body > div[style*="position: fixed"][style*="inset: 0"] table.w-full {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.95rem !important;
}
body > div[style*="position: fixed"][style*="inset: 0"] thead th {
  position: sticky; top: 0;
  background: #314D36 !important;
  color: #fff !important;
  z-index: 1;
}
body > div[style*="position: fixed"][style*="inset: 0"] th,
body > div[style*="position: fixed"][style*="inset: 0"] td {
  border: 1px solid #e5e5e5 !important;
  padding: 10px 8px !important;
  line-height: 1.5 !important;
  word-break: keep-all; overflow-wrap: anywhere;
  text-align: center;
}

/* 모바일 세로 카드형(가독성↑) */
@media (max-width: 767px) {
  body > div[style*="position: fixed"][style*="inset: 0"] .bg-white.p-5.overflow-y-auto.relative {
    max-width: 96vw !important;
    max-height: 86vh !important;
    border-radius: 14px !important;
  }

  /* 테이블을 카드 리스트처럼 보이게 (thead 숨기고 각 셀에 라벨) */
  body > div[style*="position: fixed"][style*="inset: 0"] thead { display: none !important; }
  body > div[style*="position: fixed"][style*="inset: 0"] table, 
  body > div[style*="position: fixed"][style*="inset: 0"] tbody, 
  body > div[style*="position: fixed"][style*="inset: 0"] tr, 
  body > div[style*="position: fixed"][style*="inset: 0"] td {
    display: block !important;
    width: 100% !important;
  }
  body > div[style*="position: fixed"][style*="inset: 0"] tbody tr {
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
    background: #fff;
  }
  /* 라벨링: 첫 번째/두 번째/세 번째 셀에 가짜 헤더 */
  body > div[style*="position: fixed"][style*="inset: 0"] tbody td:nth-child(1)::before { content: '분류'; }
  body > div[style*="position: fixed"][style*="inset: 0"] tbody td:nth-child(2)::before { content: '항목'; }
  body > div[style*="position: fixed"][style*="inset: 0"] tbody td:nth-child(3)::before { content: '비용'; }
  body > div[style*="position: fixed"][style*="inset: 0"] tbody td::before {
    display: inline-block; min-width: 64px; font-weight: 700; color: #314D36; margin-right: 8px;
    text-align: left;
  }
  body > div[style*="position: fixed"][style*="inset: 0"] tbody td {
    border: 0 !important;
    padding: 6px 4px !important;
    text-align: left !important;
    font-size: 0.95rem !important;
  }
}

/* ===== 비급여항목안내 팝업 - 공통 보정 ===== */

/* 겹치는 fixed 오버레이를 하나처럼 동작시키기 */
.fixed.inset-0.bg-black.bg-opacity-50.z-50.flex.justify-center.items-center {
  padding: 16px !important;                 /* 가장자리 숨쉬기 */
}

/* 실제 팝업 박스 */
.fixed.inset-0.bg-black.bg-opacity-50.z-50 .w-4\/5.max-w-3xl.bg-white.p-5.overflow-y-auto.relative {
  width: 100% !important;
  max-width: 720px !important;
  max-height: 90dvh !important;            /* 뷰포트 높이 기준 */
  border-radius: 16px !important;
  overflow: auto !important;                /* 여기서 세로 스크롤 */
  display: flex; flex-direction: column;
}

/* 타이틀 + 닫기 버튼 */
.fixed.inset-0.bg-black.bg-opacity-50.z-50 .text-center.mb-5.text-2xl {
  position: sticky; top: 0; z-index: 2;
  background: #fff; margin: 0 !important;
  padding: 14px 48px 12px !important;
  font-size: 1.15rem !important;
  border-bottom: 1px solid #eee;
}
.fixed.inset-0.bg-black.bg-opacity-50.z-50 .text-center.mb-5.text-2xl .absolute.right-10 {
  right: 12px !important; top: 10px !important;
  padding: 6px 10px !important; border-radius: 8px !important;
  background: #314D36 !important; color: #fff !important;
}

/* 내부 컨테이너: 표 스크롤 영역 */
.fixed.inset-0.bg-black.bg-opacity-50.z-50 .container.mx-auto {
  overflow: auto !important;
  padding: 0 12px 16px !important;
  max-height: calc(90dvh - 54px) !important;   /* 타이틀 제외 */
}

/* 표: 가독성 */
.fixed.inset-0.bg-black.bg-opacity-50.z-50 table.w-full {
  width: 100%; border-collapse: collapse !important;
  table-layout: fixed;                         /* 셀 폭 균등 */
  font-size: 0.95rem !important;
}
.fixed.inset-0.bg-black.bg-opacity-50.z-50 thead th {
  position: sticky; top: 0; z-index: 1;
  background: #314D36 !important; color: #fff !important;
}
.fixed.inset-0.bg-black.bg-opacity-50.z-50 th,
.fixed.inset-0.bg-black.bg-opacity-50.z-50 td {
  border: 1px solid #e5e5e5 !important;
  padding: 10px 8px !important; line-height: 1.5 !important;
  word-break: keep-all; overflow-wrap: anywhere;
  text-align: center;
}

/* 모바일: 박스 크기/표 동작 최적화 */
@media (max-width: 767px) {
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .w-4\/5.max-w-3xl.bg-white.p-5.overflow-y-auto.relative {
    max-width: 96vw !important;
    max-height: 86vh !important;
    border-radius: 14px !important;
  }
  /* 너무 좁을 때는 가로 스크롤 허용(표 레이아웃 유지) */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .container.mx-auto {
    overflow: auto hidden !important; /* 세로 우선, 가로는 필요 시 */
  }
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 table.w-full {
    min-width: 520px;                 /* 헤더/열이 무너지지 않게 최소폭 */
  }
}

/* ===== 모달(비급여 항목 안내) 세로 스크롤 복구 패치 ===== */
@media (max-width: 767px) {
  /* 스크롤은 '하얀 상자'에서 담당 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .w-4\/5.max-w-3xl.bg-white.p-5.overflow-y-auto.relative {
    max-height: 86vh !important;
    overflow-y: auto !important;           /* ← 세로 스크롤 켜기 */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;     /* iOS 부드러운 스크롤 */
    overscroll-behavior: contain;          /* 바깥 스크롤로 새지 않게 */
  }

  /* 내부 래퍼는 스크롤 막지 않도록 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .container.mx-auto {
    max-height: unset !important;
    overflow: visible !important;          /* ← 여기서는 스크롤 끔 */
  }

  /* 표가 폭을 초과하면 가로 스크롤은 상자에서 처리 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 table.w-full {
    min-width: 520px !important;
  }
}

/* ===== 모달(비급여 항목 안내) 최종 스크롤 패치 ===== */
@media (max-width: 767px) {
  /* 스크롤 담당: '하얀 상자' 하나에서 x,y 모두 처리 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .w-4\/5.max-w-3xl.bg-white.p-5.overflow-y-auto.relative {
    max-height: 86vh !important;
    overflow-y: auto !important;     /* 세로 스크롤 */
    overflow-x: auto !important;     /* 가로 스크롤 (← 핵심) */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 내부 래퍼는 스크롤 막지 않게 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 .container.mx-auto {
    max-height: unset !important;
    overflow: visible !important;
    padding-bottom: 12px !important;  /* 하단 여유 */
  }

  /* 표가 컨테이너보다 넓게 잡히도록 최소폭 확보 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 table.w-full {
    min-width: 560px !important;      /* 필요하면 520~640px로 조절 */
    table-layout: fixed !important;
  }

  /* sticky 헤더가 컨테이너 스크롤에 붙도록 유지 */
  .fixed.inset-0.bg-black.bg-opacity-50.z-50 thead th {
    position: sticky; top: 0; z-index: 1;
  }
}