html {
  scroll-behavior: smooth;
}

:root {
  --primary: #007acc;
  --text: #333;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Sans KR',sans-serif; color:var(--text); line-height:1.6; }
.container { width:90%; max-width:1200px; margin:0 auto; }

/* header */
header {
  position:fixed; top:0; left:0; width:100%;
  background:#fff; box-shadow:0 1px 5px rgba(0,0,0,0.1); z-index:1000;
}
header .container {
  display:flex; align-items:center; justify-content:space-between; padding:1rem 0;
}

nav ul { display:flex; gap:2rem; }
nav a {
  color:#444; font-weight:500; padding:0.5rem;
  transition: color .2s;
}
nav a:hover,
nav a.active { color:var(--primary); }

/* slider */
.slider { margin-top:138px; position:relative; overflow:hidden; height:60vh; min-height:400px; }
.slides { display:flex; transition:transform .5s ease; height:100%; }
.slide {
  position:relative; min-width:100%; height:100%;
  background-size:cover; background-position:center;
}
.slide::before {
  content:''; position:absolute; inset:0;
  background:var(--dark-overlay); z-index:1;
}
.caption {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:2;
  text-align:center; color:#fff;
}
.caption h2 { font-size:2.5rem; margin-bottom:.5rem; }
.caption p { font-size:1.2rem; margin-bottom:1rem; }
.caption .btn {
  display:inline-block; padding:.75rem 1.5rem;
  background:var(--primary); color:#fff; border-radius:4px;
  font-weight:500; transition:background .2s;
}
.caption .btn:hover { background:#005fa3; }
.slider-nav {
  position:absolute; inset:0; display:flex;
  justify-content:space-between; align-items:center; z-index:3;
}
.slider-nav button {
  background:rgba(255,255,255,0.7); border:none;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  font-size:1.2rem;
}

/* sections 공통 */
.section { padding:0; }
.section-title {
  text-align:center; font-size:1.5rem; margin-bottom:2rem;
  color:var(--primary); letter-spacing:1px;
}

/* doctors */
.doctor-list {
  display:flex; gap:2rem; justify-content:center; flex-wrap:wrap;
}
.doctor {
  flex:1 1 250px; text-align:center;
}
.doctor img {
  width:180px; height:180px; border-radius:50%; object-fit:cover;
}
.doctor h4 { margin-top:1rem; font-size:1.25rem; }

/* treatments */
.cards { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.card {
  position:relative; width:300px; cursor:pointer;
  overflow:hidden; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.card img { width:100%; display:block; }
.card h4 {
  position:absolute; bottom:1rem; left:1rem; color:#fff;
  z-index:2; text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.card::before {
  content:''; position:absolute; inset:0;
  background:var(--dark-overlay); z-index:1;
}

/* popup */
.popup {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:none; align-items:center; justify-content:center;
  padding:1rem; z-index:1001;
}
.popup .popup-content {
  background:#fff; border-radius:8px; max-width:500px; width:100%;
  padding:2rem; position:relative;
}
.popup .close {
  position:absolute; top:.5rem; right:.5rem;
  background:none; border:none; font-size:1.5rem; cursor:pointer;
}

/* rehab */
.rehab-content {
  display:flex; gap:2rem; align-items:center; flex-wrap:wrap;
}
.rehab-content img { flex:1 1 300px; width:100%; border-radius:8px; }
.rehab-content div { flex:1 1 300px; }

/* tests */
.tests .test-item {
  display:flex; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap;
}
.tests img { width:250px; border-radius:8px; flex-shrink:0; }

/* gallery */
.gallery-slider {
  position:relative; overflow:hidden;
}
.gallery-slider .imgs {
  display:flex; transition:transform .5s ease;
}
.gallery-slider img {
  width:100%; max-width:380px; margin:0 .5rem; border-radius:8px;
}
.gallery-slider button {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.5); color:#fff; border:none;
  width:35px; height:35px; border-radius:50%; cursor:pointer;
}
.gallery-slider .prev { left:1rem; }
.gallery-slider .next { right:1rem; }

/* hours */
.hours table {
  margin:0 auto; border-collapse:collapse;
}
.hours th, .hours td {
  padding:.75rem 1.5rem; border:1px solid #ddd;
}
.hours th { background:#f7f7f7; }

/* contact */
.contact .map img { width:100%; border-radius:8px; }
.contact .address { text-align:center; margin-top:1rem; }
.contact p { margin:.25rem 0; }

/* footer */
<footer>footer { background:#222; color:#aaa; text-align:center; padding:1rem 0; font-size:.85rem; }

/* responsive */
@media(max-width:768px) {
  nav ul { gap:1rem; }
  .caption h2 { font-size:2rem; }
  .cards, .doctor-list { flex-direction:column; align-items:center; }
}
/* 로고 가운데 정렬 */
.logo {
  margin: 0 auto;
}


/* Header 수정: 로고 상단 중앙, 메뉴 하단 중앙 */
header {
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,0.1);
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;
}
.logo-container {
  text-align:center;
  padding:1rem 0;
}

.main-nav {
  text-align:center;
  border-top:1px solid #eee;
}
.main-nav ul {
  display:inline-flex;
  gap: calc(1.5rem + 10px);
  padding:0.75rem 0;
  list-style:none;
  margin:0;
}
.main-nav li a {
  color: #414141;
  font-size: 18px;
  font-weight: 500;
  padding: 0.5rem;
  transition: color .2s;
}
.main-nav li a:hover,
.main-nav li a.active {
  color: #003f81;
}

/* 기존 nav ul, nav a 규칙은 main-nav 하위만 적용되도록 변경 */


/* Hover underline animation */
.main-nav li a {
  position: relative;
  text-decoration: none; /* remove any default underline */
}
.main-nav li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #003f81;
  transition: all 0.3s ease;
}
.main-nav li a:hover::after {
  left: 0;
  width: 100%;
}


/* Hamburger menu styles */
.hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1rem;
}
.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background: #414141;
  transition: all .3s ease;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Responsive: mobile menu */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 999;
  }
  .main-nav.open {
    display: block;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
  }
  .main-nav li a {
    display: block;
    padding: 0.75rem 1rem;
  }
}



  .main-nav ul li:first-child a {
    border-top: none; /* 첫 항목 위쪽 라인 제거 */
  }
  .main-nav ul li:last-child a {
    border-bottom: none; /* 마지막 항목 아래쪽 라인 제거 */
  }
}


/* 모바일 메뉴: 가운데 하나 라인 추가 및 왼쪽 정렬 */
@media (max-width: 768px) {
  .main-nav {
    text-align: left !important;
  }
  .main-nav ul li a {
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: left;
  }
  .main-nav ul li:last-child a {
    border-bottom: none;
  }
}


/* 모바일 뷰: 애니메이션 밑줄 비활성화 및 메뉴 왼쪽 정렬 */
@media (max-width: 768px) {
  .main-nav {
    text-align: left !important;
  }
  .main-nav ul {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }
  .main-nav li a {
    position: static !important;
    border: none !important;
    padding: 0.75rem 1rem !important;
  }
  .main-nav li a::after {
    display: none !important;
    content: none !important;
  }
}

/* 모바일 메뉴: 메뉴 아이템 사이 전체 너비 회색 라인 */
@media (max-width: 768px) {
  .main-nav ul {
    width: 100%;
  }
  .main-nav ul li a {
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
  }
  .main-nav ul li:last-child a {
    border-bottom: none;
  }
}


/* 모바일 메뉴: 메뉴 아이템 사이 전체 너비 회색 구분선 (border-bottom 방식) */
@media (max-width: 768px) {
  .main-nav ul {
    display: flex !important;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  .main-nav ul li {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
  }
  .main-nav ul li:last-child {
    border-bottom: none;
  }
  .main-nav ul li a {
    display: block !important;
    width: 100%;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    border: none !important;
    position: static !important;
  }
}


/* 모바일 메뉴 폰트 사이즈 16px */
@media (max-width: 768px) {
  .main-nav ul li a {
    font-size: 16px !important;
  }
}

/* 모바일 헤더 수정: 햄버거 버튼과 로고를 같은 줄에 배치 */
.header-left {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media (max-width: 768px) {
  .hamburger {
    display: block;
    margin-right: 0.5rem;
  }
  /* Hide default container if any, align header as flex */
  header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height:70px;
  }
}


/* 모바일 헤더: 로고 중앙 배치, 버튼과 아이콘 위치 조정 */
@media (max-width: 768px) {
  header {
    position: relative !important;
  }
  .logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .hamburger {
    position: absolute !important;
    left: 1rem !important;
  }
  .phone-icon {
    position: absolute !important;
    right: 1rem !important;
  }
}


/* 모바일 헤더: 전화기 아이콘 보이기 및 오른쪽 고정 */
.phone-icon {
  display: none;
}
.phone-icon img {
  width: 24px;
  height: auto;
}
@media (max-width: 768px) {
  .phone-icon {
    display: block !important;
    position: absolute !important;
    right: 1rem !important;
  }
}


/* 슬라이드 배너 높이 조정: PC 800px, 모바일 500px */
.slider {
  height: 800px !important;
  min-height: 800px !important;
}
@media (max-width: 768px) {
  .slider {
    height: 500px !important;
    min-height: 500px !important;
    margin-top: 0px;    
  }
}


/* 슬라이드 텍스트 및 버튼 숨김 */
.caption { display: none !important; }


/* 슬라이더 네비게이션: 버튼을 양쪽에서 여백 주기 */
.slider-nav {
  padding: 0 30px !important;
}


/* Doctors Section */
.doctors-section {
  position: relative;
  text-align: center;
  padding: 6rem 0;
  background: url('../images/doctors-bg.jpg') center/cover no-repeat;
}
.doctors-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
}
.doctors-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.sub-title {
  color: #007acc;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.main-title {
  font-size: 2rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 3rem;
}
.main-title span {
  display: block;
  color: #004c99;
  font-size: 2.5rem;
  margin-top: 0.5rem;
}
.doctor-list {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.doctor-profile {
  position: relative;
  flex: 1 1 250px;
}
.doctor-profile img {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.info-bubble {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.9);
  padding: 1rem 2rem;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}
.info-bubble strong {
  display: block;
  font-size: 1.25rem;
  color: #333;
}
.info-bubble span {
  display: block;
  color: #007acc;
  margin-top: 0.25rem;
}
@media (max-width: 768px) {
  .doctors-section {
    padding: 4rem 0 6rem;
  }
  .doctor-list {
    gap: 2rem;
  }
  .doctor-profile img {
    max-width: 200px;
  }
  .info-bubble {
    bottom: -20px;
    padding: 0.75rem 1.5rem;
  }
}


/* 모바일에서 의료진 2명 한 줄에 나열 (Grid 적용) */
@media (max-width: 768px) {
  .doctor-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 0;
  }
  .doctor-profile {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
}


/* Logo responsive width overrides */
header .logo img,
.logo-container .logo img {
  width: 327px !important;
  height: auto !important;
}
@media (max-width: 768px) {
  header .logo img,
  .logo-container .logo img {
    width: 200px !important;
    height: auto !important;
  }
}