@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   IGPartners - Clinic Reservation System
   Language Selection Screen Stylesheet (Dark Theme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & Variables (수정하기 쉽도록 변수화)
   -------------------------------------------------------------------------- */
:root {
  /* [디자인 시스템] 전역 스크롤바 세련된 다크 스타일링 */
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.4) rgba(6, 9, 19, 0.6);

  /* Color Palette */
  --bg-main: #060913;
  /* 베이스 딥 다크 네이비 */
  --bg-surface: #0c1020;
  /* 카드 및 섹션 표면 색상 */
  --bg-glow: rgba(99, 102, 241, 0.12);
  /* 백그라운드 오로라 빛 */

  --text-primary: #f3f4f6;
  /* 메인 텍스트 (화이트에 가까운 회색) */
  --text-secondary: #9ca3af;
  /* 보조 설명용 텍스트 (연회색) */

  /* Brand Accent Colors */
  --accent-blue: #3b82f6;
  /* 포인트 블루 */
  --accent-indigo: #6366f1;
  /* 포인트 인디고 */
  --accent-purple: #8b5cf6;
  /* 포인트 퍼플 */


  /* Glassmorphism settings */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(99, 102, 241, 0.4);

  /* Fonts */
  --font-display: 'Outfit', 'Noto Sans KR', sans-serif;

  /* Animations */
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Global Styles
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-display);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  position: relative;
}

/* [디자인 시스템] Webkit 브라우저용 세련된 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 8px; /* 세로 스크롤바 폭 */
  height: 8px; /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-track {
  background: rgba(6, 9, 19, 0.6); /* 딥 다크 배경 반투명 처리 */
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.3) 0%, rgba(99, 102, 241, 0.3) 100%); /* 네온 시안 & 인디고 그라데이션 */
  border: 1px solid rgba(6, 9, 19, 0.8);
  border-radius: 8px;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.6) 0%, rgba(99, 102, 241, 0.6) 100%); /* 호버 시 네온 강화 */
}

/* --------------------------------------------------------------------------
   3. Aesthetic Backdrops (백그라운드 빛 퍼짐 데코레이션)
   -------------------------------------------------------------------------- */
.bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.aurora-1 {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(6, 9, 19, 0) 70%);
  filter: blur(40px);
}

.aurora-2 {
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, rgba(6, 9, 19, 0) 70%);
  filter: blur(60px);
}

/* --------------------------------------------------------------------------
   4. Layout Container
   -------------------------------------------------------------------------- */
.container {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 100%; /* 부모 flex 컨테이너(body) 너비를 강제로 뚫고 늘어나지 못하도록 최대 크기를 100%로 보증합니다. */
  min-width: 0; /* flex 아이템으로서 수축이 원활하게 작동하도록 기본 min-content 제약을 해제합니다. */
  box-sizing: border-box; /* 패딩 영역이 너비 계산에 포함되어 레이아웃이 깨지지 않도록 방지합니다. */
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header Section */
.header {
  text-align: center;
  margin-bottom: 4rem;
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 1.8rem;
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 100px;
  color: var(--bg-main);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  white-space: nowrap;
}

.brand-logo {
  height: 0.9em;
  width: auto;
  display: block;
}

.title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 1.15rem;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   5. Grid Grid-template (4열 반응형 그리드)
   -------------------------------------------------------------------------- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   6. Language Card Component (Glassmorphism & Micro-animations)
   -------------------------------------------------------------------------- */
.lang-card {
  background: #1e254a;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

/* Hover 효과 시 내부 은은한 카드 그라데이션 빛 생성 */
.lang-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: var(--transition-smooth);
}

/* 국기 이미지 */
.flag-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  z-index: 2;
}

.flag {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: var(--transition-smooth);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 국기 위에 은은한 그라데이션 반사광 입히기 */
.flag-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* 언어명 텍스트 */
.lang-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
}

.lang-native {
  color: var(--text-primary);
  font-size: 1.45rem;
  font-weight: 700;
  transition: var(--transition-smooth);
}

.lang-ko {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-weight: 400;
  transition: var(--transition-smooth);
}

/* --------------------------------------------------------------------------
   7. Card Interactions (Hover & Click)
   -------------------------------------------------------------------------- */
.lang-card:hover {
  transform: translateY(-8px);
  background: #2b3361;
  border-color: #6366f1;
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.25);
}

.lang-card:hover::before {
  opacity: 1;
}

.lang-card:hover .flag {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 12px 25px rgba(99, 102, 241, 0.3);
}

.lang-card:hover .lang-native {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.lang-card:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   8. Keyframes Animations
   -------------------------------------------------------------------------- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   9. Media Queries (반응형 중단점 - 4열 -> 3열 -> 2열)
   -------------------------------------------------------------------------- */

/* 중형 화면 (태블릿 가로 / 소형 데스크톱): 3열 */
@media (max-width: 1024px) {
  .brand-badge {
    font-size: 2.2rem;
    padding: 0.45rem 1.5rem;
    gap: 1rem;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .title {
    font-size: 2.5rem;
  }
}

/* 태블릿 세로 및 소형 태블릿: 2열 */
@media (max-width: 768px) {
  .brand-badge {
    font-size: 1.6rem;
    padding: 0.35rem 1.2rem;
    gap: 0.8rem;
  }

  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .lang-card {
    padding: 2.25rem 1rem;
    border-radius: 20px;
  }

  .flag {
    width: 56px;
    height: 42px;
  }

  .title {
    font-size: 2.2rem;
  }

  .subtitle {
    font-size: 1rem;
  }
}

/* 초소형 모바일 화면: 2열 유지하지만 좀 더 타이트하게 */
@media (max-width: 480px) {
  .brand-badge {
    font-size: 0.95rem;
    padding: 0.25rem 0.8rem;
    gap: 0.4rem;
  }

  .container {
    padding: 2rem 0;
  }

  .header {
    margin-bottom: 2.5rem;
  }

  .title {
    font-size: 1.8rem;
  }

  .subtitle {
    font-size: 0.9rem;
    word-break: keep-all;
  }

  .lang-native {
    font-size: 1rem;
  }

  .lang-ko {
    font-size: 0.75rem;
  }

  .flag {
    width: 48px;
    height: 36px;
  }
}

/* ==========================================================================
   10. Clinic Selection Page Styles
   ========================================================================== */

/* 3열 병원 그리드 */
.clinic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

/* 병원 글래스모피즘 카드 (3px 보더 세팅으로 레이아웃 흔들림 방지) */
.clinic-card {
  background: #111632;
  border: 3px solid rgba(255, 255, 255, 0.05);
  /* 기본 보더 굵기를 3px로 설정 */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.clinic-card:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.55);
  /* 3배 두꺼워진 테두리 하이라이트 적용 */
  background: #2b3361;
  /* 언어선택 카드의 호버 배경 밝기와 통일 */
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.25);
}

/* 이미지 영역 및 줌 애니메이션 */
.clinic-img-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.clinic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.clinic-card:hover .clinic-img {
  transform: scale(1.08);
}

/* 카드 콘텐츠 영역 */
.clinic-content {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.clinic-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* 진료 과목 태그 배지 */
.clinic-depts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dept-badge {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  font-weight: 400;
}

/* 병원 소개글 */
.clinic-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  word-break: keep-all;
}

/* 주소 및 아이콘 */
.clinic-address {
  font-size: 0.85rem;
  color: #8a8f9c;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.clinic-address-link:hover .clinic-address {
  color: #a5b4fc;
  text-decoration: underline;
}

.address-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 예약하기 버튼 */
.clinic-select-btn {
  display: block;
  width: 100%;
  padding: 0.9rem;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-blue) 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
  text-decoration: none;
}

.clinic-select-btn:hover {
  background: linear-gradient(135deg, #7477f3 0%, #4f8ff7 100%);
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

/* 9. Media Queries 확장 (반응형 병원 그리드 조율) */
@media (max-width: 1024px) {
  .clinic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .clinic-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .clinic-img-wrapper {
    height: 180px;
  }
}

/* 언어선택 돌아가기 버튼 (그라데이션 및 3D 호버 디자인) */
.back-to-lang {
  position: absolute;
  left: 0;
  top: 16.4rem;
  /* 'Vui lòng chọn bệnh viện...' 부제목 라인과 수직 정렬 라인 맞춤 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.2rem;
  /* 1.5배 가량 넉넉한 크기로 스케일업 */
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-blue) 100%);
  border: none;
  border-radius: 100px;
  color: #ffffff;
  font-size: 1.3rem;
  /* 1.5배 가량 큰 폰트로 스케일업 */
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-smooth);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}

.back-to-lang:hover {
  background: linear-gradient(135deg, #7477f3 0%, #4f8ff7 100%);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.55);
  transform: translateY(-3px);
  color: #ffffff;
}

@media (max-width: 768px) {
  .back-to-lang {
    position: static;
    margin-top: 1rem;
    margin-bottom: 2rem;
    align-self: flex-start;
  }
}

/* ==========================================================================
   11. Reservation Form Page Styles (예약 입력 폼 스타일)
   ========================================================================== */

.selected-clinic-badge {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.6rem 1.5rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 100px;
  color: #a5b4fc;
  font-size: 1.1rem;
  font-weight: 600;
}

#clinic-name-text {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.form-container {
  width: 100%;
  max-width: 800px;
  background: #111632;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  opacity: 0;
}

.reservation-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-group label .required {
  color: #ef4444;
}

/* 폼 인풋 기본 디자인 (Glassmorphism + Dark) */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  background: #181d3a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  color: #ffffff;
  font-family: var(--font-display);
  outline: none;
  transition: var(--transition-smooth);
  width: 100%;
}

.form-group textarea {
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: #1c2244;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-indigo);
  background: #1c2244;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}

/* 성별 셀렉트 커스텀 스타일링 대비 */
.form-group select option {
  background: #111632;
  color: #ffffff;
}

/* 개인정보 수집 동의 커스텀 체크박스 */
.form-agreement {
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-left: 2.25rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  user-select: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #181d3a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  transition: var(--transition-smooth);
}

.checkbox-container:hover input~.checkmark {
  border-color: var(--accent-indigo);
}

.checkbox-container input:checked~.checkmark {
  background-color: var(--accent-indigo);
  border-color: var(--accent-indigo);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked~.checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.agreement-text .required {
  color: #ef4444;
}

/* 버튼 액션 스타일 */
.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: none;
  outline: none;
  flex: 1;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-blue) 100%);
  color: #ffffff;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #7477f3 0%, #4f8ff7 100%);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
  filter: brightness(1.25);
}

.btn-primary:disabled {
  background: #3b3f5c;
  color: #8a8f9c;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 243, 255, 0.3);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #00f3ff;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

@media (max-width: 640px) {
  .form-container {
    padding: 1.75rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: span 1;
  }

  .form-actions {
    flex-direction: column-reverse;
  }
}

/* date input 관련 커스텀 스타일링 (yyyy-mm-dd 표시 및 달력 아이콘 흰색 변경) */
.form-group input[type="date"] {
  position: relative;
}

/* Chrome, Edge 등 Webkit 브라우저용 달력 아이콘 색상 흰색 변경 */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100%);
  cursor: pointer;
}

/* 기본 '연도-월-일' 글자 투명화하여 가려둠 */
.form-group input[type="date"]::-webkit-datetime-edit-text,
.form-group input[type="date"]::-webkit-datetime-edit-month-field,
.form-group input[type="date"]::-webkit-datetime-edit-day-field,
.form-group input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

/* 포커스를 받았거나 유효한 값이 입력되면 원래 흰색으로 표시 */
.form-group input[type="date"]:focus::-webkit-datetime-edit-text,
.form-group input[type="date"]:focus::-webkit-datetime-edit-month-field,
.form-group input[type="date"]:focus::-webkit-datetime-edit-day-field,
.form-group input[type="date"]:focus::-webkit-datetime-edit-year-field,
.form-group input[type="date"]:valid::-webkit-datetime-edit-text,
.form-group input[type="date"]:valid::-webkit-datetime-edit-month-field,
.form-group input[type="date"]:valid::-webkit-datetime-edit-day-field,
.form-group input[type="date"]:valid::-webkit-datetime-edit-year-field {
  color: #ffffff;
}

/* yyyy-mm-dd 영문 텍스트 플레이스홀더를 가상 요소로 띄움 */
.form-group input[type="date"]::before {
  content: "yyyy-mm-dd";
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: var(--font-display);
}

/* 포커스를 받거나 유효한 값이 입력되면 가상 플레이스홀더를 가림 */
.form-group input[type="date"]:focus::before,
.form-group input[type="date"]:valid::before {
  display: none;
}

/* ==========================================================================
   12. Admin Dashboard Styles (관리자 대시보드 스타일)
   ========================================================================== */

.admin-tab-content {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* 내부 대형 테이블이 탭 콘텐츠 레이아웃 영역을 강제로 늘리는 flex 팽창 버그를 해결하여 수축을 보장합니다. */
  box-sizing: border-box;
}

.admin-container {
  max-width: 1400px;
  width: 95%;
  max-width: 95%; /* 뷰포트 대비 최대 너비 95%를 초과하여 flex 아이템이 강제 팽창하지 않도록 방지합니다. */
  min-width: 0; /* 수축이 올바르게 작용하도록 최소 너비 제약을 해제합니다. */
  box-sizing: border-box; /* 크기 계산 시 패딩과 보더를 통합합니다. */
}

/* 대시보드 통계 카드 */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 2.5rem;
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

.stat-card {
  background: #111632;
  border: 2px solid rgba(0, 243, 255, 0.3);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  filter: brightness(1.2);
  border-color: rgba(0, 243, 255, 0.6);
}

/* 통계 카드 왼쪽 컬러 바 지시자 */
.stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: var(--accent-indigo);
}

.stat-card.pending::before {
  background-color: #f59e0b;
  /* 주황색 */
}

.stat-card.confirmed::before {
  background-color: #10b981;
  /* 녹색 */
}

.stat-card.cancelled::before {
  background-color: #ef4444;
  /* 빨간색 */
}

.stat-title {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: #ffffff;
}

/* 선택언어별 예약수 통계 타일 그리드 */
.admin-lang-stats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 2.5rem;
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
  opacity: 0;
}

.lang-stat-tile {
  background: rgba(12, 16, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.8rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: var(--transition-smooth);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang-stat-tile:hover {
  transform: translateY(-2px);
  background: rgba(12, 16, 32, 0.85);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  border-color: currentColor !important;
}

.lang-tile-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.lang-tile-value {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
}

.lang-tile-value small {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
}

/* 1024px 이하 해상도 (태블릿) */
@media (max-width: 1200px) {
  .admin-lang-stats {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .admin-lang-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .admin-lang-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}

/* 대시보드 메인 영역 */
.admin-main {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* 자식 요소(테이블)의 최소 너비가 부모 flex 컨테이너 너비를 강제로 팽창시키는 버그를 원천적으로 방지합니다. */
  overflow: hidden; /* 영역을 벗어나는 요소가 있을 경우 스크롤 유도를 위해 경계를 차단합니다. */
  background: #111632;
  border: 2px solid rgba(0, 243, 255, 0.4);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  opacity: 0;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 243, 255, 0.2);
  padding-bottom: 1rem;
}

.table-controls h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-refresh:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-refresh svg {
  transition: transform 0.6s ease;
}

.btn-refresh:hover svg {
  transform: rotate(180deg);
}

/* 관리 테이블 반응형 */
.table-responsive {
  display: block; /* 블록 속성을 강제로 명시하여 테이블 크기에 관계없이 부모 너비(100%) 이하로 확실하게 수축되도록 보장합니다. */
  width: 100%;
  max-width: 100%; /* 부모 너비를 절대 초과하지 못하도록 제한합니다. */
  overflow-x: auto; /* 내부 테이블이 100% 너비를 넘어갈 경우에 한해서 정상적으로 가로 스크롤바를 생성합니다. */
  -webkit-overflow-scrolling: touch; /* 모바일 및 태블릿 스크롤 촉감 최적화 */
}

.admin-table {
  width: 100%;
  min-width: 1300px; /* 창 크기를 강제로 줄였을 때 텍스트나 버튼이 잘리는 현상을 막기 위해 최소 너비를 지정하여 가로 스크롤을 유도합니다. */
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid rgba(0, 243, 255, 0.25);
  vertical-align: middle;
}

.admin-table th {
  background-color: rgba(0, 243, 255, 0.05);
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.admin-table tbody tr {
  transition: var(--transition-smooth);
}

.admin-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
  filter: brightness(1.15);
}

/* 테이블 각 컬럼 너비 조정 대비 및 스타일 */
.col-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}

.table-clinic-name {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 6px;
  color: #a5b4fc;
  font-weight: 600;
}

.col-id {
  min-width: 150px;
}

.id-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
  width: fit-content;
}

.id-badge.alien {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.id-badge.passport {
  background: rgba(139, 92, 246, 0.15);
  color: #c7d2fe;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.id-badge.visa {
  /* 비자 뱃지는 초록색 계열로 은은한 광원 효과를 부여합니다. */
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.col-dob,
.col-res-date,
.col-phone,
.col-address,
.col-symptoms,
.col-name,
.col-visa-type,
.col-visa-expiry {
  white-space: nowrap;
}

.col-address,
.col-symptoms {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.font-bold {
  font-weight: 700;
}

.text-accent {
  color: #818cf8;
}

/* 상태 배지 */
.badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-confirmed {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* 액션 버튼 관리 */
.action-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
}

.btn-action {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.btn-action.confirm {
  background-color: #10b981;
  color: #ffffff;
}

.btn-action.confirm:hover {
  background-color: #059669;
  filter: brightness(1.25);
}

.btn-action.cancel {
  background-color: #ef4444;
  color: #ffffff;
}

.btn-action.cancel:hover {
  background-color: #dc2626;
  filter: brightness(1.25);
}

.btn-action.pending {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(0, 243, 255, 0.3);
}

.btn-action.pending:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: #00f3ff;
}

.btn-action.delete {
  background-color: transparent;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-action.delete:hover {
  background-color: rgba(239, 68, 68, 0.2);
  filter: brightness(1.2);
}

/* 로딩, 에러, 공백 행 처리 */
.table-loading,
.table-empty,
.table-error {
  text-align: center;
  padding: 3rem !important;
  color: var(--text-secondary);
  font-size: 1rem;
}

.table-error {
  color: #f87171;
}

/* 미디어 쿼리 조율 */
@media (max-width: 1024px) {
  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-main {
    padding: 1rem;
  }

  .table-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ==========================================================================
   13. Top Navigation & Google Auth Styles (상단 로그인 영역 스타일)
   ========================================================================== */

.auth-bar {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 인증 관련 버튼 공통 */
.btn-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  outline: none;
  font-family: var(--font-display);
}

/* 로그인 버튼 (Indigo/Blue Gradient) */
.btn-auth.login {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-blue) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
}

.btn-auth.login:hover {
  background: linear-gradient(135deg, #7477f3 0%, #4f8ff7 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
}

.btn-auth.login:active {
  transform: translateY(-1px);
}

/* 사용자 정보 노출 영역 (로그인 완료 시) */
.auth-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(17, 22, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 프로필 사진 */
.user-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #111632;
}

/* 닉네임 */
.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 로그아웃 버튼 (Flat/Dark) */
.btn-auth.logout {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.btn-auth.logout:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  transform: none;
}

/* 태블릿 및 모바일 화면 최적화 (1024px 이하에서 수직 배치하여 겹침 방지) */
@media (max-width: 1024px) {
  .auth-bar {
    position: static;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .btn-auth {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }

  .auth-user {
    padding: 0.35rem 0.4rem 0.35rem 0.8rem;
  }

  .user-photo {
    width: 28px;
    height: 28px;
  }
}

/* 선택언어 뱃지 스타일 */
.lang-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 50px;
  color: #a5b4fc;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ----------------------------------
   12. Admin Tabs & Role Management (관리자 탭 및 등급 관리 추가)
   ---------------------------------- */

.admin-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 243, 255, 0.2);
  padding-bottom: 0.8rem;
}

.tab-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 243, 255, 0.3);
  color: var(--text-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-btn:hover {
  background: rgba(0, 243, 255, 0.15);
  border-color: #00f3ff;
  color: #00f3ff;
}

.tab-btn.active {
  background: #00f3ff;
  border-color: #00f3ff;
  color: #111632;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
}

/* 등급 변경 영역 */
.role-control-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.select-role {
  background: #111632;
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: #ffffff;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.select-role:hover {
  border-color: #00f3ff;
  background: #1c2244;
}

.select-role:focus {
  border-color: #00f3ff;
}



.select-role:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}

/* 역할 라벨 뱃지 */
.role-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.role-badge.super_admin {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.role-badge.admin {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.role-badge.partner {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.role-badge.vip {
  background: rgba(139, 92, 246, 0.15);
  color: #c7d2fe;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.role-badge.user {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-badge.admin_user {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.role-badge.top_manager {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.role-badge.res_manager {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.3);
}

.role-badge.general {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.3);
}

/* 병원 관리 레이아웃 및 폼 스타일 */
.admin-clinic-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
}

.clinic-form-section,
.clinic-list-section {
  background: #111632;
  border: 2px solid rgba(0, 243, 255, 0.4);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.clinic-list-section {
  min-width: 0; /* [레이아웃 버그 수정] Grid 컨테이너 내부에서 자식 너비가 부풀어 오르는 현상 방지하여 가로스크롤 정상 유도 */
}

.admin-clinic-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-clinic-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-clinic-form .form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e5e7eb;
}

.admin-clinic-form .form-group label .required {
  color: #ef4444;
}

.admin-clinic-form .form-group input,
.admin-clinic-form .form-group textarea {
  background: #181d3a;
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: #ffffff;
  outline: none;
  transition: var(--transition-smooth);
}

.admin-clinic-form .form-group input:hover,
.admin-clinic-form .form-group textarea:hover {
  border-color: rgba(0, 243, 255, 0.6);
  background: #1c2244;
}

.admin-clinic-form .form-group input:focus,
.admin-clinic-form .form-group textarea:focus {
  border-color: #00f3ff;
  background: #1c2244;
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

@media (max-width: 1024px) {
  .admin-clinic-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   14. Admin Dashboard Responsive Extensions (추가 관리자 반응형 확장)
   ========================================================================== */

/* 1024px 이하 해상도 (태블릿 및 모바일) */
@media (max-width: 1024px) {
  .admin-table {
    min-width: auto !important; /* 모바일 카드뷰 변환 시에는 가로 스크롤 최소 너비 제한을 해제하여 카드 영역이 화면 가로폭에 딱 맞도록 유연하게 설정합니다. */
  }

  /* 예약 상세 목록 테이블 반응형 카드 뷰 전환 */
  #content-reservations .admin-table,
  #content-reservations .admin-table thead,
  #content-reservations .admin-table tbody,
  #content-reservations .admin-table tr,
  #content-reservations .admin-table td {
    display: block;
  }

  #content-reservations .admin-table thead {
    display: none; /* 헤더 숨김 */
  }

  #content-reservations .admin-table tr {
    margin-bottom: 1.5rem;
    border: 2px solid rgba(0, 243, 255, 0.2);
    border-radius: 16px;
    background: rgba(17, 22, 50, 0.85);
    padding: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
  }

  #content-reservations .admin-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.5);
    transform: translateY(-2px);
  }

  #content-reservations .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.8rem 0.5rem;
    text-align: right;
    white-space: normal;
  }

  #content-reservations .admin-table td:last-child {
    border-bottom: none;
    padding-top: 1.25rem;
    justify-content: center;
  }

  #content-reservations .admin-table td.table-loading,
  #content-reservations .admin-table td.table-empty,
  #content-reservations .admin-table td.table-error {
    display: block;
    text-align: center;
    border: none;
    padding: 3rem 0;
  }

  /* 각 td 항목의 라벨을 ::before로 노출 */
  #reservation-list td::before {
    font-weight: 700;
    color: #a5b4fc;
    text-align: left;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  /* 모바일 대시보드 각 td의 컬럼 제목 라벨 적용 (신규 컬럼 비자타입 및 체류만료일 추가) */
  #reservation-list td.col-lang::before { content: "선택언어"; }
  #reservation-list td.col-name::before { content: "이 름"; }
  #reservation-list td.col-clinic::before { content: "선택 병원"; }
  #reservation-list td.col-gender::before { content: "성 별"; }
  #reservation-list td.col-visa-type::before { content: "비자타입"; }
  #reservation-list td.col-dob::before { content: "생년월일"; }
  #reservation-list td.col-id::before { content: "신원정보(외국인등록번호)"; }
  #reservation-list td.col-visa-expiry::before { content: "체류만료일"; }
  #reservation-list td.col-phone::before { content: "연락처"; }
  #reservation-list td.col-date::before { content: "접수시간"; }
  #reservation-list td.col-res-date::before { content: "예약 희망일"; }
  #reservation-list td.col-address::before { content: "주 소"; }
  #reservation-list td.col-symptoms::before { content: "증 상"; }
  #reservation-list td.col-status::before { content: "상 태"; }
  #reservation-list td.col-actions::before { content: "예약 상태 관리"; }

  /* 주소나 증상 등 긴 텍스트는 모바일에서 우측 정렬 및 단어 줄바꿈 처리 */
  #reservation-list td.col-address,
  #reservation-list td.col-symptoms {
    word-break: break-all;
    max-width: 65%;
  }

  /* 상태관리 버튼 영역 스타일 */
  .action-wrapper {
    justify-content: center;
    width: 100%;
  }
}

/* 768px 이하 해상도 (소형 태블릿 및 모바일) */
@media (max-width: 768px) {
  /* 회원 등급 관리 및 병원 목록 테이블 반응형 카드 뷰 전환 */
  #content-users .admin-table,
  #content-users .admin-table thead,
  #content-users .admin-table tbody,
  #content-users .admin-table tr,
  #content-users .admin-table td,
  #content-clinics .clinic-list-section .admin-table,
  #content-clinics .clinic-list-section .admin-table thead,
  #content-clinics .clinic-list-section .admin-table tbody,
  #content-clinics .clinic-list-section .admin-table tr,
  #content-clinics .clinic-list-section .admin-table td {
    display: block;
  }

  #content-users .admin-table thead,
  #content-clinics .clinic-list-section .admin-table thead {
    display: none;
  }

  #content-users .admin-table tr,
  #content-clinics .clinic-list-section .admin-table tr {
    margin-bottom: 1.5rem;
    border: 2px solid rgba(0, 243, 255, 0.2);
    border-radius: 16px;
    background: rgba(17, 22, 50, 0.85);
    padding: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
  }

  #content-users .admin-table tr:hover,
  #content-clinics .clinic-list-section .admin-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.5);
    transform: translateY(-2px);
  }

  #content-users .admin-table td,
  #content-clinics .clinic-list-section .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.8rem 0.5rem;
    text-align: right;
    white-space: normal;
  }

  #content-users .admin-table td:last-child,
  #content-clinics .clinic-list-section .admin-table td:last-child {
    border-bottom: none;
    padding-top: 1.25rem;
    justify-content: center;
  }

  #content-users .admin-table td.table-loading,
  #content-users .admin-table td.table-empty,
  #content-clinics .clinic-list-section .admin-table td.table-loading,
  #content-clinics .clinic-list-section .admin-table td.table-empty {
    display: block;
    text-align: center;
    border: none;
    padding: 3rem 0;
  }

  /* [모바일 등급 관리 테이블 전용 프리미엄 디자인 고도화] */
  #content-users .admin-table tr {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 243, 255, 0.18) !important; /* 더 섬세하고 프리미엄한 얇은 실선 */
    border-radius: 16px !important;
    background: rgba(15, 21, 46, 0.95) !important; /* 조금 더 짙은 불투명 네이비 배경 */
    padding: 1.25rem 0 !important; /* [라인 끝단 정렬] 좌우 패딩을 0으로 리셋하여 자식 td의 구분선이 양 끝에 닿게 함 (기존: 1.5rem) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* [두 줄 정렬 및 가로선 양끝 확장] td의 flex-direction을 column으로 설정하여 컬럼 위, 내용 아래 두 줄 레이아웃 구축 */
  #content-users .admin-table td {
    display: flex !important;
    flex-direction: column !important; /* 컬럼 라벨(위)과 데이터 내용(아래)의 세로 정렬 구조 */
    align-items: flex-start !important; /* 왼쪽 정렬 보장 */
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; /* [구분선 명도 조정] 좀 더 밝고 뚜렷한 흰색 구분선 적용 */
    padding: 0.85rem 1.25rem !important; /* [여백 튜닝] td에 좌우 패딩을 주어 글자가 카드 경계선에서 자연스럽게 안으로 들어가게 배치 */
    font-size: 0.92rem !important;
  }

  /* 등급 키와 표시이름 등 텍스트 중심 셀의 스타일 정밀 튜닝 */
  #content-users .admin-table td:nth-child(1) {
    color: #a5b4fc !important; /* 화사하고 시인성 높은 인디고 텍스트 */
    font-weight: 700 !important;
  }

  /* 마지막 버튼 영역 셀의 수직(column) 정렬 구조 유지 및 구분선 제거 */
  #content-users .admin-table td:last-child {
    border-bottom: none !important; /* 마지막 구분선 제거 */
    padding-top: 1.25rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* 수정/삭제 버튼 컨테이너가 두 번째 줄(아래)에서 가로로 깔끔하게 정렬되도록 스타일 정의 */
  #content-users .admin-table td:last-child > div {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 왼쪽으로 가지런히 정렬 */
    width: 100% !important;
    margin: 0.45rem 0 0 0 !important; /* 상단 라벨과의 정돈된 간격 확보 */
  }

  /* 시스템 등급 문구나 삭제 버튼의 세로 찌러짐을 방지하고 깔끔하게 고정 */
  #content-users .admin-table td:last-child span,
  #content-users .admin-table td:last-child button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* [스위치 모바일 찌러짐 원천 차단] */
  .switch-container {
    flex-shrink: 0 !important; /* flex 부모 안에서 스위치 비율이 강제 축소되어 찌러지는 현상 영구 차단 */
  }

  /* [모바일 전용 라벨 정의] 가상 요소를 활용해 첫 번째 줄에 컬럼명을 텍스트 잘림 없이 명확하게 노출 */
  #content-users .admin-table td::before {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 0.45rem !important; /* 컬럼 라벨과 아래 데이터 내용 간의 자연스러운 행 간격 */
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.45) !important; /* 은은하고 단정한 톤 */
    font-weight: 600 !important;
  }

  /* 각 td의 1대1 한글 컬럼 라벨 바인딩 */
  #content-users .admin-table td:nth-child(1)::before {
    content: "등급 식별 키" !important;
  }
  #content-users .admin-table td:nth-child(2)::before {
    content: "표시 이름" !important;
  }
  #content-users .admin-table td:nth-child(3)::before {
    content: "관리자 메뉴 권한" !important;
  }
  #content-users .admin-table td:nth-child(4)::before {
    content: "예약내역 조회 권한" !important;
  }
  #content-users .admin-table td:nth-child(5)::before {
    content: "병원 목록 관리 권한" !important;
  }
  #content-users .admin-table td:nth-child(6)::before {
    content: "등급 종류 관리 권한" !important;
  }
  #content-users .admin-table td:nth-child(7)::before {
    content: "가입회원 리스트 권한" !important;
  }
  #content-users .admin-table td:nth-child(8)::before {
    content: "작업 동작" !important;
  }

  /* 회원 목록 라벨 ::before 설정 */
  #user-list td::before {
    font-weight: 700;
    color: #a5b4fc;
    text-align: left;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  #user-list td:nth-child(1)::before { content: "이름"; }
  #user-list td:nth-child(2)::before { content: "이메일"; }
  #user-list td:nth-child(3)::before { content: "가입일"; }
  #user-list td:nth-child(4)::before { content: "현재 등급"; }
  #user-list td:nth-child(5)::before { content: "등급 관리"; }

  /* 병원 목록 라벨 ::before 설정 */
  #admin-clinic-list td::before {
    font-weight: 700;
    color: #a5b4fc;
    text-align: left;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  #admin-clinic-list td:nth-child(1)::before { content: "사진"; }
  #admin-clinic-list td:nth-child(2)::before { content: "병원이름"; }
  #admin-clinic-list td:nth-child(3)::before { content: "진료과목"; }
  #admin-clinic-list td:nth-child(4)::before { content: "주소"; }
  #admin-clinic-list td:nth-child(5)::before { content: "관리"; }
  
  /* 병원 리스트 이미지 모바일 크기 조정 */
  #admin-clinic-list img {
    width: 60px !important;
    height: 42px !important;
  }
}

/* 640px 이하 해상도 (모바일 전용 최적화) */
@media (max-width: 640px) {
  /* 통계 카드 2열 배치로 정보 밀도 향상 */
  .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  .stat-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .stat-title {
    font-size: 0.8rem !important;
  }
  
  .stat-value {
    font-size: 1.6rem !important;
  }

  /* 관리 탭 리스트 세로 정렬 및 터치 크기 최적화 */
  .admin-tabs {
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
    width: 100%;
  }

  .tab-btn {
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    font-size: 0.9rem;
  }

  /* 테이블 상단 컨트롤 가로 정렬 고수 (세로 비대화 방지) */
  .table-controls {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .table-controls h2 {
    font-size: 1.05rem !important;
  }

  .btn-refresh {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  /* 병원 등록 폼 내부 인풋 요소 */
  .admin-clinic-form .form-group input,
  .admin-clinic-form .form-group textarea {
    padding: 0.7rem 0.8rem;
    font-size: 0.9rem;
  }
  
  /* 회원 등급 관리 드롭다운 */
  .role-control-wrapper {
    width: 100%;
    justify-content: flex-end;
  }
  
  .select-role {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }
}

/* ==========================================================================
   15. User My-Reservations Page Specific Styles (사용자 예약내역 전용 스타일)
   ========================================================================== */

/* 예약내역 서브 버튼 스타일 (유저 정보 뱃지 내부 장착) */
.btn-auth-sub {
  text-decoration: none;
  color: #a5b4fc;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.25rem;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.btn-auth-sub:hover {
  background: rgba(99, 102, 241, 0.25) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

/* 태블릿 및 모바일 화면에서 auth-user 뱃지 내부 폰트/간격 조율 */
@media (max-width: 768px) {
  .auth-user {
    padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    gap: 0.5rem;
  }
  .btn-auth-sub {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.25rem;
  }
  .user-name {
    font-size: 0.8rem;
    max-width: 90px;
  }
}

/* 1024px 이하 해상도 예약내역 테이블 반응형 뷰 연동 */
@media (max-width: 1024px) {
  #content-my-reservations .admin-table,
  #content-my-reservations .admin-table thead,
  #content-my-reservations .admin-table tbody,
  #content-my-reservations .admin-table tr,
  #content-my-reservations .admin-table td {
    display: block;
  }

  #content-my-reservations .admin-table thead {
    display: none;
  }

  #content-my-reservations .admin-table tr {
    margin-bottom: 1.5rem;
    border: 2px solid rgba(0, 243, 255, 0.2);
    border-radius: 16px;
    background: rgba(17, 22, 50, 0.85);
    padding: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition-smooth);
  }

  #content-my-reservations .admin-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.5);
    transform: translateY(-2px);
  }

  #content-my-reservations .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.8rem 0.5rem;
    text-align: right;
    white-space: normal;
  }

  #content-my-reservations .admin-table td:last-child {
    border-bottom: none;
    padding-top: 1.25rem;
    justify-content: center;
  }

  #content-my-reservations .admin-table td.table-loading,
  #content-my-reservations .admin-table td.table-empty,
  #content-my-reservations .admin-table td.table-error {
    display: block;
    text-align: center;
    border: none;
    padding: 3rem 0;
  }

  #my-reservation-list td::before {
    font-weight: 700;
    color: #a5b4fc;
    text-align: left;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  /* 모바일 내 예약내역 각 td의 컬럼 제목 라벨 적용 (신규 컬럼 비자타입 및 체류만료일 추가) */
  #my-reservation-list td.col-lang::before { content: "선택언어"; }
  #my-reservation-list td.col-name::before { content: "이 름"; }
  #my-reservation-list td.col-clinic::before { content: "선택 병원"; }
  #my-reservation-list td.col-gender::before { content: "성 별"; }
  #my-reservation-list td.col-visa-type::before { content: "비자타입"; }
  #my-reservation-list td.col-dob::before { content: "생년월일"; }
  #my-reservation-list td.col-id::before { content: "신원정보(외국인등록번호)"; }
  #my-reservation-list td.col-visa-expiry::before { content: "체류만료일"; }
  #my-reservation-list td.col-phone::before { content: "연락처"; }
  #my-reservation-list td.col-date::before { content: "접수시간"; }
  #my-reservation-list td.col-res-date::before { content: "예약 희망일"; }
  #my-reservation-list td.col-address::before { content: "주 소"; }
  #my-reservation-list td.col-symptoms::before { content: "증 상"; }
  #my-reservation-list td.col-status::before { content: "상 태"; }
  #my-reservation-list td.col-actions::before { content: "예약 관리"; }

  #my-reservation-list td.col-address,
  #my-reservation-list td.col-symptoms {
    word-break: break-all;
    max-width: 65%;
  }
}

/* ==========================================================================
   16. Modal Dialog System (글래스모피즘 모달 디자인 시스템)
   ========================================================================== */

/* 모달 뒷배경 백드롭 (어두운 블러 처리) */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 12, 30, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out;
}

/* 모달 콘텐츠 카드 */
.modal-content {
  background: rgba(17, 22, 50, 0.95);
  border: 1px solid rgba(0, 243, 255, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 243, 255, 0.1);
  border-radius: 24px;
  width: 90%;
  max-width: 650px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 모달 헤더 */
.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* 닫기 X 버튼 */
.modal-close-x {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: var(--transition-smooth);
}
.modal-close-x:hover {
  color: #00f3ff;
  transform: rotate(90deg);
}

/* 모달 내부 바디 (스크롤 가능) */
.modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  /* 커스텀 스크롤바 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 243, 255, 0.2) rgba(255, 255, 255, 0.02);
}
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 243, 255, 0.2);
  border-radius: 10px;
}

/* 개인정보 내용 영역 */
.privacy-section {
  margin-bottom: 2rem;
}
.privacy-section:last-child {
  margin-bottom: 0;
}
.privacy-section h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #00f3ff;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.privacy-section p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.privacy-list li {
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.privacy-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.privacy-list strong {
  display: block;
  font-size: 0.95rem;
  color: #a5b4fc;
  margin-bottom: 0.4rem;
}
.privacy-list span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* 모달 한글 부연 설명 */
.desc-ko {
  display: block;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* 모달 푸터 */
.modal-footer {
  padding: 1.2rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

/* 애니메이션 키프레임 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 모달이 활성화되었을 때 body 스크롤 차단용 클래스 */
body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   7. 공통 상단 네비게이션 바 (Common Navigation Bar) 스타일 정의
   ========================================================================== */

/* 네비게이션 바 기본 스타일 (밝고 부드러운 글래스모피즘 효과 및 프리미엄 폰트 교체) */
.common-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: rgba(22, 31, 64, 0.55); /* 좀 더 밝고 부드러운 다크블루 톤 반투명 배경 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.45); /* 조금 더 밝고 선명한 형광 인디고 블루 실선 */
  display: flex;
  align-items: center;
  transition: var(--transition-smooth);
  font-family: 'Plus Jakarta Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; /* 부드럽고 세련된 프리미엄 서체 적용 */
}

/* 스크롤하여 내려갔을 때 변화할 디자인 (더 묵직하고 은은한 네온 글로우 테두리) */
.common-navbar.navbar-scrolled {
  height: 70px;
  background: rgba(22, 31, 64, 0.85); /* 묵직하면서 투명감을 유지하는 스크롤 배경 */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.1);
  border-bottom: 1px solid rgba(139, 92, 246, 0.6); /* 밝고 신비로운 형광 퍼플 네온 실선 */
}

/* 중앙 정렬용 내부 컨테이너 (여백 가용 확보를 위한 gap 추가) */
.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem; /* 요소들 간의 겹침 방지용 안전 여백 설정 */
}

/* 브랜드 로고 링크 (폰트 크기 확대: 1.5rem -> 1.75rem, 강제 축소 방지) */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 1.75rem; /* 브랜드 로고 폰트 확대 */
  letter-spacing: -0.5px;
  transition: var(--transition-smooth);
  white-space: nowrap; /* 글씨 줄바꿈 방지 */
  flex-shrink: 0; /* 우측 영역 공간에 밀려 찌부러지는 것 차단 */
}

.nav-brand:hover {
  opacity: 0.9;
}

.nav-logo {
  height: 36px; /* 로고 이미지 높이도 폰트 확대에 맞춰 32px -> 36px로 최적화 */
  width: auto;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
}

.nav-brand-text {
  background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 중앙 네비게이션 메뉴 목록 (글자 확대로 인한 좁은 영역 대응 마진 튜닝 및 축소 방지) */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 1.5rem; /* 글자가 커짐에 따라 반응형 대응을 위해 자간 간격 소폭 최적화 */
  align-items: center;
  margin: 0;
  padding: 0;
  transition: var(--transition-smooth);
  flex-shrink: 0; /* 강제 축소 방지 */
}

/* 메뉴 링크 스타일 (폰트 크기 확대: 0.95rem -> 1.1rem, 줄바꿈 금지) */
.nav-link {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 1.1rem; /* 메뉴 링크 폰트 확대 */
  font-weight: 600; /* 가독성을 위해 굵기를 500 -> 600으로 보완 */
  transition: var(--transition-smooth);
  position: relative;
  padding: 0.5rem 0;
  white-space: nowrap; /* 글자 줄바꿈 강제 차단 */
}

/* 호버 시 폰트 컬러 변경 및 하단 라인 효과 */
.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-indigo), var(--accent-purple));
  transition: var(--transition-smooth);
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 진료 예약 강조용 버튼 링크 스타일 (줄바꿈 방지) */
.btn-nav-booking {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 0.5rem 1.25rem !important;
  border-radius: 100px;
  color: #a5b4fc !important;
  white-space: nowrap; /* 줄바꿈 금지 */
}

.btn-nav-booking:hover {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  border-color: transparent;
}

.btn-nav-booking::after {
  display: none !important; /* 언더라인 비활성화 */
}

/* 우측 로그인/로그아웃/뱃지 영역 (축소 방지) */
.nav-auth-area {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 강제 축소 방지 */
}

/* 로그인하지 않은 기본 상태 버튼 (브랜드 로고 비례에 맞춰 컴팩트하게 축소) */
.btn-nav-login {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%);
  color: #ffffff;
  border: none;
  padding: 0.45rem 1.1rem; /* 세로/가로 패딩 축소 */
  border-radius: 10px; /* 더 단정한 라운드 */
  font-size: 0.85rem; /* 글자 크기 축소 */
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transition: var(--transition-smooth);
  white-space: nowrap; /* 줄바꿈 금지 */
}

.btn-nav-login:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.35);
}

.btn-nav-login:active {
  transform: translateY(0);
}

/* 로그인 유저 정보 뱃지 래퍼 (축소 방지, 갭 축소) */
.auth-user-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* 버튼 간격 소폭 긴밀하게 축소 */
  flex-shrink: 0; /* 강제 축소 방지 */
}

/* 프로필 이미지와 이름이 포함된 둥근 캡슐 (세로 높이 대폭 슬림화) */
.user-capsule {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.75rem 0.3rem 0.3rem; /* 상하좌우 여백 긴밀화 */
  border-radius: 100px;
  transition: var(--transition-smooth);
  white-space: nowrap; /* 줄바꿈 금지 */
  flex-shrink: 0;
}

.user-avatar {
  width: 24px; /* 아바타 크기 축소: 28px -> 24px */
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

.user-nickname {
  font-size: 0.8rem; /* 닉네임 크기 소폭 축소 */
  color: var(--text-primary);
  font-weight: 600;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 네비게이션 우측 상태 제어 액션 버튼들 (컴팩트 튜닝) */
.btn-nav-action {
  text-decoration: none;
  font-size: 0.8rem; /* 폰트 축소 */
  font-weight: 600;
  padding: 0.35rem 0.75rem; /* 세로/가로 패딩 축소로 브랜드 로고와 높이 균형 일치 */
  border-radius: 8px; /* 아담한 라운드 */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: var(--transition-smooth);
  white-space: nowrap; /* 줄바꿈 금지 */
  flex-shrink: 0; /* 강제 축소 방지 */
}

/* 예약내역 서브 버튼 */
.btn-my-res {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.btn-my-res:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 관리자 뱃지/버튼 */
.btn-admin {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.2);
}

.btn-admin:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(236, 72, 153, 0.35);
}

/* 로그아웃 텍스트형 링크 버튼 (아담한 텍스트 링크로 보완) */
.btn-nav-logout {
  background: transparent;
  border: none;
  color: #f43f5e;
  cursor: pointer;
  font-size: 0.8rem; /* 폰트 축소 */
  font-weight: 600;
  padding: 0.35rem 0.5rem; /* 패딩 축소 */
  transition: var(--transition-smooth);
}

.btn-nav-logout:hover {
  color: #fda4af;
  text-decoration: underline;
}

/* 신규 추가: 모바일 전용 상단 퀵 메뉴바 기본 상태 비노출 처리 (데스크톱에서는 보이지 않음) */
.nav-mobile-quick {
  display: none;
}

/* 모바일 화면 햄버거 토글 버튼 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.nav-toggle .bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 10px;
  transition: var(--transition-smooth);
}

/* 햄버거 활성화 애니메이션 */
.nav-toggle.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   8. 홈페이지(랜딩페이지) 리네이밍 및 전용 레이아웃 스타일
   ========================================================================== */

/* 랜딩페이지용 바디 기본화 */
body.home-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  overflow-y: auto;
}

/* 웰컴 히어로 섹션 (웅장한 다크 오로라) */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 4rem;
  overflow: hidden;
}

/* 히어로 내부 빛 확산 */
.hero-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.08) 40%, rgba(6, 9, 19, 0) 70%);
  filter: blur(50px);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-tag {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 100px;
  color: #a5b4fc;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 4.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -2px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #ffffff 30%, #a5b4fc 60%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 3rem;
  word-break: keep-all;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 메인 예약 액션 큰 버튼 */
.btn-hero-primary {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1.1rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
  transition: var(--transition-smooth);
}

.btn-hero-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.5);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1.1rem 2.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition-smooth);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 웹사이트 일반 소개 공통 레이아웃 */
.content-section {
  padding: 8rem 2rem;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.section-container {
  width: 100%;
  max-width: 1100px;
}

.section-header {
  text-align: center;
  margin-bottom: 5rem;
}

.section-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-indigo);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 1.25rem;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 300;
  word-break: keep-all;
}

/* 회사소개 (About) 그리드 그리드 */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-text h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
}

.about-text p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  word-break: keep-all;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

.about-stat-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  border-radius: 16px;
}

.stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #a5b4fc 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-lbl {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 소개 일러스트 대안 카드 */
.about-card-deco {
  position: relative;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.about-card-deco::before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(6, 9, 19, 0) 70%);
  filter: blur(20px);
  animation: pulse 6s infinite alternate;
}

.about-deco-content {
  z-index: 2;
  text-align: center;
}

.about-deco-logo {
  height: 80px;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.5));
}

.about-deco-title {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #ffffff;
}

/* 제공 서비스 (Services) 카드 레이아웃 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 3rem 2rem;
  transition: var(--transition-smooth);
  position: relative;
}

.service-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  font-size: 1.75rem;
  margin-bottom: 2rem;
  transition: var(--transition-smooth);
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%);
  color: #ffffff;
  transform: scale(1.1);
}

.service-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 300;
  word-break: keep-all;
}

/* 협력 회사 (Partners) 로고 그리드 */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.partner-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: var(--transition-smooth);
  height: 140px;
}

.partner-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.03);
}

.partner-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.partner-type {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 공통 하단 푸터 (Footer) */
.global-footer {
  background: #04060d;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3rem;
}

.footer-brand {
  max-width: 320px;
}

.footer-logo-txt {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
  display: block;
}

.footer-brand-desc {
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 4rem;
}

.footer-link-group h4 {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-link-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link-group a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.footer-link-group a:hover {
  color: #ffffff;
}

.footer-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}


/* ==========================================================================
   9. 반응형 미디어 쿼리 (Responsive Styles)
   ========================================================================== */

@media (max-width: 991px) {
  .hero-title {
    font-size: 3.5rem;
  }
  
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .about-card-deco {
    height: 300px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  /* ==========================================================================
     모바일 및 태블릿 통합 대응 (1024px 이하)
     ========================================================================== */

  /* 모바일 화면 가로 공간을 최대한 활용하기 위해 전체 컨테이너 여백 및 간격 축소 */
  .nav-container {
    padding: 0 1rem; /* 좌우 여백을 2rem에서 1rem으로 줄여 공간 확보 */
    gap: 0.5rem; /* 아이템 간 간격을 1.5rem에서 0.5rem으로 줄여 겹침 방지 */
  }

  /* 로고 텍스트 크기와 이미지 높이를 모바일 화면에 알맞게 축소하여 가로 공간 확보 */
  .nav-brand {
    font-size: 1.35rem; /* 1.75rem에서 1.35rem으로 축소 */
    gap: 0.5rem; /* 로고 이미지와 글자 사이 간격 축소 */
  }

  .nav-logo {
    height: 28px; /* 36px에서 28px로 축소 */
  }

  /* 햄버거 토글 단추 노출 */
  .nav-toggle {
    display: flex;
  }


  /* 신규 추가: 모바일 및 태블릿(1024px 이하) 환경에서 상단 퀵 메뉴 바 활성화 및 정렬 여백 최적화 */
  .nav-mobile-quick {
    display: flex;
    align-items: center;
    gap: 0.35rem; /* 아이콘 개수 증가에 맞춰 간격을 0.6rem -> 0.35rem으로 조밀하게 튜닝 */
    margin-left: auto;
    margin-right: 0.6rem; /* 햄버거 버튼과의 간격 최적화 */
    z-index: 1000;
    
    /* 가로 슬라이드 스크롤 기능 활성화 및 미려한 제어 */
    overflow-x: auto; /* 가로 스크롤 가능하도록 설정 */
    white-space: nowrap; /* 아이템들이 줄바꿈되지 않고 가로 한 줄로 유지되도록 보장 */
    -webkit-overflow-scrolling: touch; /* iOS 모바일 터치 스크롤 시 튕기듯 부드럽게 감속 스크롤 지원 */
    flex-wrap: nowrap; /* flex 컨테이너 내부 래핑 금지 */
    min-width: 0; /* flex 내부에서 유연하게 줄어들어 overflow-x가 실제로 동작하도록 최소너비 해제 */
    
    /* 깔끔한 디자인 유지를 위해 스크롤바 노출 차단 */
    -ms-overflow-style: none;  /* IE 및 Edge 브라우저에서 스크롤바 숨김 */
    scrollbar-width: none;  /* Firefox 브라우저에서 스크롤바 숨김 */
  }

  /* 크롬, 사파리, 오페라 브라우저용 스크롤바 노출 방지 스타일 정의 */
  .nav-mobile-quick::-webkit-scrollbar {
    display: none; /* 스크롤바 영역을 보이지 않게 처리 */
  }

  /* 신규 추가: 퀵 바로가기 아이콘 버튼 디자인 (아이콘 증가로 인해 크기를 36px -> 30px로 콤팩트 튜닝) */
  .quick-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem; /* 아이콘 배율에 맞춰 폰트 크기 소폭 축소 */
    transition: var(--transition-smooth);
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0; /* 가로 공간이 협소할 때 아이콘 원형 형태가 찌그러지지 않도록 차단 */
  }

  /* 신규 추가: 모바일 퀵 버튼 호버/활성화 시 브랜드 테마 네온 글로우 테두리 및 배경 반사 효과 */
  .quick-icon-btn:hover,
  .quick-icon-btn.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    color: #ffffff;
  }

  /* 세로형 슬라이딩 서랍 메뉴 디자인 정의 (가로 사이즈를 브랜드 로고 비례인 260px로 축소하고 우측 슬라이드로 최적화) */
  .nav-menu {
    position: fixed;
    top: 80px;
    right: -260px; /* 기존 left: -100% 대신 우측 숨김 상태로 레이아웃 이동 */
    left: auto; /* 좌측 정렬 초기화 */
    width: 260px; /* 브랜드 로고 가로 영역 비례에 맞춰 컴팩트하게 260px로 고정 */
    height: calc(100vh - 80px);
    background: rgba(12, 16, 32, 0.96); /* 일관된 프리미엄 다크 네이비 투명 광택 배경 적용 */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    flex-direction: column;
    padding: 1.5rem 1.25rem; /* [메뉴 간격 최적화] 세로 패딩 축소로 한눈에 들어오게 조정 (기존: 2.5rem 1.5rem) */
    gap: 0.75rem; /* [메뉴 간격 최적화] 자식 요소 간의 수직 여백을 조밀하게 조정 (기존: 1.25rem) */
    align-items: center; /* 메뉴 및 모든 구성 요소를 가로 정중앙 정렬 */
    border-left: 1px solid rgba(99, 102, 241, 0.25); /* 프리미엄 우측 드로어 경계 실선 추가 */
    border-top: none;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto; /* 스크롤 활성화 */
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.45); /* 서랍장 입체감을 높이기 위한 부유 그림자 추가 */
  }

  /* 스크롤 시 서랍 상단 위치 조율 */
  .common-navbar.navbar-scrolled .nav-menu {
    top: 70px;
    height: calc(100vh - 70px);
  }

  /* 햄버거 클릭 시 우측에서 등장하는 활성화 클래스 */
  .nav-menu.active {
    right: 0;
    left: auto;
  }

  /* [디자인 일관성 적용] 서랍 내부 메뉴 링크를 하단 예약내역 버튼과 동일한 뱃지/버튼 스타일로 구현 */
  .nav-link {
    font-size: 0.9rem; /* [폰트 통일] 뱃지 버튼 크기와 통일하기 위해 크기 축소 (기존: 1.15rem) */
    width: 100%;
    max-width: 180px; /* [너비 고정] 다른 모든 버튼들과 가로폭을 일치시켜 대칭 균형 형성 (기존: 100%) */
    margin: 0 auto; /* 중앙 정렬 보장 */
    box-sizing: border-box;
    text-align: center; /* 메뉴 텍스트 정중앙 배치 */
    padding: 0.6rem 1rem; /* [버튼 패딩] 뱃지 버튼과 높이감을 동일하게 맞춤 (기존: 0.6rem 0) */
    background: rgba(255, 255, 255, 0.04); /* [배경 통일] 하단 예약내역 버튼과 동일한 반투명 다크 그레이 배경 */
    border: 1px solid rgba(255, 255, 255, 0.08); /* [보더 통일] 하단 예약내역 버튼과 동일한 테두리 */
    border-radius: 10px; /* [라운드 통일] 둥근 모서리 통일 (기존: border-bottom) */
    color: var(--text-secondary);
    display: inline-block;
    transition: var(--transition-smooth);
  }

  /* [디자인 일관성 적용] 서랍 내부 메뉴 링크 활성화/호버 시 디자인 */
  .nav-link:hover,
  .nav-link.active {
    background: rgba(255, 255, 255, 0.08); /* [호버 효과] 하단 예약내역 버튼의 호버 배경과 일치 */
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2); /* [테두리 강조] 호버 시 은은한 백색 테두리 노출 */
  }

  .nav-link::after {
    display: none; /* 모바일 모드에선 하단 밑줄 장식 비활성화 */
  }

  /* [디자인 일관성 적용] 예약 및 의료통역 버튼을 하단 관리자 버튼과 일치하는 강조형 그라데이션 뱃지로 수정 */
  .btn-nav-booking {
    display: inline-block; /* [레이아웃 버그 수정] inline-block 속성을 부여하여 가로폭(width) 설정 활성화 및 상하 공간 침범 방지 */
    width: 100%;
    max-width: 180px; /* 로고 사이즈에 맞춰 180px로 한계 설정 */
    text-align: center;
    border-radius: 10px !important; /* [라운드 통일] 모서리 통일 */
    padding: 0.6rem 1rem !important; /* [패딩 통일] 일반 메뉴 버튼들과 높이 일관성 매칭 (기존: 0.7rem) */
    margin: 0 auto; /* [간격 평준화] 추가 마진을 제거하여 드로어 공통 gap(0.75rem)에 의해 모든 메뉴 간격이 동일하게 일치되도록 수정 */
    box-sizing: border-box;
    border-bottom: none !important; /* [미관 개선] 일반 메뉴의 얇은 하단 경계선이 보더 버튼 아래 중복으로 비치지 않도록 강제 제거 */
    /* [스타일 일관성] 관리자 버튼과 비견되는 인디고-퍼플 프리미엄 그라데이션 뱃지 적용 */
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-purple) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.9rem; /* [폰트 통일] 다른 버튼들과 통일 */
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25); /* 입체적인 뱃지 느낌을 위한 그림자 */
  }

  /* [디자인 일관성 적용] 예약 및 의료통역 버튼 호버 시 스타일 */
  .btn-nav-booking:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
  }

  /* 서랍 내 삽입되는 동적 로그인 영역 컨테이너 (가운데 정렬) */
  .nav-auth-area {
    margin-left: 0;
    margin-top: 1.25rem; /* [간격 최적화] 로그인 영역 이전 여백 축소 (기존: 2rem) */
    padding-top: 1.25rem; /* [간격 최적화] 안쪽 상단 패딩 축소 (기존: 2rem) */
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* 구분 실선 추가 */
    width: 100%;
    display: flex;
    justify-content: center; /* 로고 너비에 맞춰 정중앙 정렬 */
  }

  /* 로그인 유저 뱃지 세로 배열 정의 (가로 폭 고정 제한 및 중앙 배치 - 로고 사이즈에 맞춰 180px로 대폭 축소) */
  .auth-user-badge {
    flex-direction: column;
    align-items: center; /* 로고와 균형을 위해 세로 정중앙 배치 */
    width: 100%;
    max-width: 180px; /* 로고의 실질 가로 너비 비율에 맞춰 최대 크기를 180px로 대폭 축소 */
    margin: 0 auto;
    gap: 0.5rem; /* [간격 최적화] 세로 정렬 시 버튼 간 간격을 콤팩트하게 튜닝 (기존: 0.6rem) */
  }

  /* 프로필 캡슐 가로폭 제한 정렬 */
  .user-capsule {
    width: 100%;
    justify-content: center; /* 캡슐 내부 이름 정중앙 정렬 */
    padding: 0.4rem 0.8rem; /* [간격 최적화] 안쪽 패딩 조율로 콤팩트화 (기존: 0.5rem 1rem) */
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    border-radius: 10px; /* [라운드 통일] 10px로 다른 버튼들과 완벽히 일치 (기존: 12px) */
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .user-avatar {
    width: 24px;
    height: 24px;
  }

  .user-nickname {
    font-size: 0.9rem;
    max-width: none;
  }

  /* 서랍용 예약내역 및 관리자 버튼 터치 영역 보정 (로고 비례 아담화) */
  .btn-nav-action {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1rem; /* [패딩 통일] 다른 버튼들과 상하 높이 통일 (기존: 0.75rem) */
    font-size: 0.9rem;
    border-radius: 10px;
    box-sizing: border-box;
  }

  /* 서랍용 로그아웃 버튼 디자인 보정 (가독성을 위한 배경 톤 및 크기 제한) */
  .btn-nav-logout {
    width: 100%;
    text-align: center;
    padding: 0.6rem 1rem; /* [패딩 통일] 다른 버튼들과 상하 높이 통일 (기존: 0.75rem) */
    font-size: 0.9rem;
    background: rgba(244, 63, 94, 0.08);
    color: #fda4af;
    border-radius: 10px;
    margin-top: 0.25rem;
  }

  .btn-nav-logout:hover {
    background: rgba(244, 63, 94, 0.12);
    text-decoration: none;
  }

  /* 서랍용 로그인 유도 버튼 최적화 (가로 폭 똑같이 180px로 제한) */
  .btn-nav-login {
    width: 100%;
    max-width: 180px; /* 로그인 유도 버튼 가로 폭도 똑같이 180px로 제한 */
    margin: 0 auto;
    text-align: center;
    padding: 0.6rem 1rem; /* [패딩 통일] 다른 버튼들과 상하 높이 통일 (기존: 0.85rem) */
    font-size: 0.9rem; /* [폰트 통일] (기존: 0.95rem) */
    border-radius: 10px; /* [라운드 통일] (기존: 12px) */
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* ==========================================================================
     본문 섹션 및 레이아웃 모바일 대응 (768px 이하)
     ========================================================================== */


  .hero-title {
    font-size: 2.75rem;
  }

  .hero-desc {
    font-size: 1.1rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .content-section {
    padding: 5rem 1.5rem;
  }

  .services-grid,
  .partners-grid {
    grid-template-columns: 1fr;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
}

/* 펄스 애니메이션 정의 */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0.9; }
}

/* ==========================================================================
   17. 어드민 대시보드 - 회원 등급 동적 관리 전용 반응형 레이아웃
   ========================================================================== */
.admin-users-layout {
  display: grid;
  grid-template-columns: 380px 1fr; /* 좌측 등급설정 영역은 380px 고정, 우측 회원테이블은 남은공간 전부 차지 */
  gap: 2rem;
  align-items: start;
  width: 100%;
}

/* 등급 키 등 입력폼 디자인 세련되게 다듬기 */
.admin-users-layout .form-group input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(165, 180, 252, 0.15);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.admin-users-layout .form-group input:focus {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
  outline: none;
}

/* 등급 종류 테이블 헤더/셀 조밀화 */
.admin-users-layout #role-list td {
  padding: 0.8rem 0.6rem;
  font-size: 0.88rem;
  vertical-align: middle;
}

/* 회원등급 변경 셀렉트 박스 스타일 세련화 */
.role-control-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.select-role {
  background: rgba(12, 16, 32, 0.9);
  border: 1px solid rgba(165, 180, 252, 0.2);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.select-role:focus {
  border-color: rgba(99, 102, 241, 0.5);
}

/* 회원 테이블 가독성/줄바꿈 방지 */
.admin-users-full-layout .clinic-list-section .admin-table th,
.admin-users-full-layout .clinic-list-section .admin-table td {
  white-space: nowrap;
}

/* [외곽 테두리 여백 제거 및 가로폭 최적화] 등급 목록 섹션과 추가 폼의 너비를 일치시켜 우측 빈 공간 여백 및 외곽선 늘어짐 제거 */
.admin-users-full-layout .clinic-list-section,
.admin-users-full-layout .clinic-form-section {
  max-width: 1100px !important; /* 테이블 최대 크기와 일치시켜 불필요한 우측 연장 차단 */
  width: 100% !important;
}

/* [가로 간격 최적화] 등록된 등급 종류 테이블의 가로폭을 조금 늘려 컬럼 자간 간격을 소폭 여유 있게 조정 */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table {
  min-width: auto !important; /* 글로벌 스타일의 min-width: 1300px 강제 해제 */
  max-width: 1100px; /* 테이블 최대 가로 길이를 제한하여 자간 간격 소폭 확대 (기존: 950px) */
  width: 100%;
}

.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type {
  width: 100%;
  max-width: 1100px;
}

/* [라인 정렬 최적화] 테이블 th, td 셀의 패딩 축소 및 중앙 정렬 기본 세팅 */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th,
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td {
  padding: 0.75rem 0.5rem;
  font-size: 0.88rem;
  text-align: center; /* 데이터 및 토글 버튼을 열 중앙에 완벽 배치 */
  vertical-align: middle;
}

/* [컬럼 라인 맞춤] 등급 키와 표시이름 컬럼 정렬 및 너비 설정 (텍스트 중심이므로 좌측 정렬) */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(1),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(1) {
  text-align: left;
  font-weight: 700;
  width: 15%; /* 등급 키 컬럼의 가로폭 명시적 제한 */
}

.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(2),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(2) {
  text-align: left;
  width: 15%; /* 표시이름 컬럼의 가로폭 명시적 제한 */
}

/* [컬럼 라인 맞춤] 각 권한 토글 스위치 컬럼 정렬 및 너비 설정 (중앙 정렬) */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(3),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(3),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(4),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(4),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(5),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(5),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(6),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(6),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(7),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(7) {
  width: 10%; /* 각 토글 컬럼의 가로폭을 동일하게 고정하여 헤더 텍스트와 정렬선 일치 */
}

/* [컬럼 라인 맞춤] 등급변경(수정/삭제 액션 버튼) 영역 컬럼 수직 정렬 강제 일치화 */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table th:nth-child(8),
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(8) {
  text-align: center !important; /* [정렬 보장] 글로벌 left 정렬을 오버라이딩하여 가운데 정렬 강제 적용 */
  width: 20%; /* 액션 버튼 영역의 너비를 충분히 확보하여 라인 일치 */
  padding-left: 0 !important; /* 안쪽 좌우 패딩을 제거하여 순수 콘텐츠 기준 수직 정렬 유도 */
  padding-right: 0 !important;
}

/* 등급변경 셀 내부의 버튼 정렬 컨테이너 강제 가운데 정렬 */
.admin-users-full-layout .clinic-list-section .table-responsive:first-of-type .admin-table td:nth-child(8) > div {
  display: flex !important;
  justify-content: center !important; /* 자식 요소(수정/삭제 버튼) 가로 중앙 정렬 보장 */
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   18. 권한 설정용 글래스모피즘 토글 스위치 (Aesthetic Switch)
   ========================================================================== */
.switch-container {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 24px;
  vertical-align: middle;
}

.switch-container input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 34px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #6b7280;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.switch-container input:checked + .switch-slider {
  background-color: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.6);
}

.switch-container input:checked + .switch-slider:before {
  transform: translateX(24px);
  background-color: #a5b4fc;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.7);
}

/* 마우스 호버 시 글로우 효과 */
.switch-container:hover .switch-slider {
  border-color: rgba(99, 102, 241, 0.4);
}

/* 시스템 등급 잠금 제어(비활성) */
.switch-container input:disabled + .switch-slider {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 반응형 대응 (태블릿 및 모바일: 1200px 이하) */
@media (max-width: 1200px) {
  .admin-users-layout {
    grid-template-columns: 1fr; /* 상하 1열로 떨어지게 하여 찌러짐 차단 */
    gap: 2.5rem;
  }

  .admin-users-layout .clinic-form-section,
  .admin-users-layout .clinic-list-section {
    width: 100%;
  }
}

/* 100% 가로 폭 풀 레이아웃 스타일 정의 */
.admin-users-full-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* 모바일 디바이스 (768px 이하) 대응을 위한 3단 폼 1열 수직 정렬 전환 */
@media (max-width: 768px) {
  .admin-users-full-layout #role-register-form {
    grid-template-columns: 1fr !important; /* 모바일에서는 세로 1줄로 정렬 */
  }
}

/* [반응형 최적화] 가로폭이 매우 좁아져(600px 이하) 퀵 메뉴 아이콘들이 브랜드 로고 텍스트를 침범하기 직전에만 숨깁니다 */
@media (max-width: 600px) {
  .nav-brand-text {
    display: none;
  }
}