/* ────────────────────────────────────────────
   1. 전역 변수 블록 (타이포 & 컬러)
──────────────────────────────────────────── */
:root {
  /* 폰트 */
  --font-family-base: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-size-h1: 2rem;  /* 28px */
  --font-size-h2: 1.75rem;   /* 24px */
  --font-size-h3: 1.5rem;  /* 20px */
  --font-size-h4: 1.25rem;     /* 16px */
  --font-size-h5: 1.25rem;  /* 20px */
  --font-size-h6: 1rem;     /* 16px */
  --line-height-base: 1.6;
  --spacing-vertical: 1.5rem;

  /* 색상 */
  --color-text: #333333; /*진회색*/
  --color-heading: #23378b; /*남색*/
  --color-link: #007bff;(하늘색)
  --color-link-hover: #ffffff(흰색)
  --color-blockquote: #666666; /*grey*/
}

/* ────────────────────────────────────────────
   2. 베이스 스타일 & 전역 타이포
──────────────────────────────────────────── */
html {
  font-size: var(--font-size-base);
}
body, main {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
}

/* 기본 여백 리셋 */
h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 var(--spacing-vertical) 0;
  padding: 0;
}

/* ────────────────────────────────────────────
   3. 헤딩 스타일
──────────────────────────────────────────── */
h1 {
  font-size: var(--font-size-h1);
  color: var(--color-text);
  font-weight: bold;
}
h2 {
  font-size: var(--font-size-h2);
  color: var(--color-heading);
  font-weight: bold;
}
h3 {
  font-size: var(--font-size-h3);
  color: var(--color-text);
  font-weight: bold;

}
h4 {
  font-size: var(--font-size-h4);
  color: var(--color-text);
}
h5 {
  font-size: var(--font-size-h5);
  color: var(--color-heading);
}
h6 {
  font-size: var(--font-size-h6);
  color: var(--color-hover);
}

/* ────────────────────────────────────────────
   4. 본문 & 링크 & 인용
──────────────────────────────────────────── */
p {
  font-size: 1rem;
  line-height: 1.4;    margin-bottom: 0.5em;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
blockquote {
  margin: var(--spacing-vertical) 0;
  padding: 0 1rem;
  border-left: 4px solid var(--color-blockquote);
  color: var(--color-blockquote);
}

/* ────────────────────────────────────────────
   5. 반응형 조정 (선택 사항)
──────────────────────────────────────────── */
@media screen and (max-width: 840px) {
  h1 { font-size: 1.4rem;  }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.15rem;  }
  h4 { font-size: 1rem;  }
  h6 { font-size: 0.6rem;  }
  p  { font-size: 0.9rem;  }
}






    /* 기본 스타일 */
    body { 
      margin: 0; 
      font-family: 'Arial', sans-serif;  
      overflow-x: hidden;
    }
    main {
       overflow-x: hidden;
       max-width: 1024px;
       margin: 0 auto;
       padding: 60px 1rem 1rem;
       }  /* 위 60px, 왼/오 1rem, 아래 1rem */

body.home main {
      /* 전역 max-width 해제 */
      max-width: none;
      width: 100%;
      /* 좌우 마진도 없애서 화면 끝까지 꽉 채움 */
      margin: 0;
      overflow-x: hidden;
      padding: 60px 0 0; 
} 

    header {
      background: #000000; 
      color: #ffffff;
      padding: 0px 60px;
      display: flex; 
      align-items: center;
      justify-content: flex-start; /*로고옆에 바로 메뉴 붙게*/
      gap: 20px;      
      height: 60px;
      line-height: 60px; 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: background 0.3s ease, box-shadow 0.3s ease;
      overflow: visible;
    }
    header.scrolled {
    background: rgba(0, 0, 0, 0.8); /* 검정색, 60% 투명 */
    backdrop-filter: blur(10px);    /* 흐려지는 효과 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 살짝 그림자 */
    }
    .logo {
      display: flex;
      align-items: center;
    }
    .logo picture, .logo img {
      display: block;
      vertical-align: middle;
    }
    /* Navigation (PC) */
    nav {
      display: flex;
      gap: 30px;
    }
    nav ul {
      list-style: none;
      margin: 0;   
      padding: 0;
      display: flex;
      gap: 30px;
    }
    nav ul.main-menu > li {
      position: relative;
    }
    nav a {
      margin: 0 15px;
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      padding: 0 15px;
      line-height: 60px;
    }
    nav ul.sub-menu {
      display: none;
      position: absolute;
      top: 60px;
      left: 0;
      background: #333;
      padding: 10px 0;
      min-width: 160px;
      z-index: 2000;
    }
    nav ul.sub-menu.open {
      display: block;
    }
    nav ul.sub-menu > li {
      width: 100%;
      margin: 0;
    }
    nav ul.sub-menu a {
      display: block;
      padding: 10px 15px;
      color: #fff;
      font-weight: normal;
      line-height: 1.2;
      white-space: nowrap;
    }
    /* PC용 hover (원하는 경우) */
    nav ul.main-menu > li:hover > ul.sub-menu {
      display: block;
    }
    nav ul.sub-menu > li:hover {
      background: #444;
    }
    
    /* Hamburger 버튼 (모바일 전용, 기본 숨김) */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
    }
    .hamburger span {
      width: 25px;
      height: 3px;
      background: #fff;
      margin: 3px 0;
      transition: all 0.3s ease;
    }

    /* youtube media 등 기타 스타일 */
    .youtube-section {  display: flex;  max-width: 1500px;  margin: 0 auto;  gap: 20px;}
    .main-video {  flex: 3.2;}
    .main-video img {  width: 100%;  height: auto;  display: block;}
    .side-videos {  flex: 1;  display: flex;  flex-direction: column;  gap: 15px;}
    .side-videos img {  width: 100%;  height: auto;  display: block;}


    /* Banner, Sections 등 기타 스타일 */
    .banner {
      width: 100%;
      height: auto;
      position: relative;
     
    }
    .banner img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 1s ease-in-out;


    }
    .sections {
      display: flex;
      justify-content: space-around;
      padding: 40px 20px;
      background: #f9f9f9;
    }
    .section-box {
      text-align: center;
      width: 30%;
    }
    .media { margin-top: 50px; }
    footer {
      background: #333;
      color: #fff;
      padding: 30px 20px;
      text-align: center;
    }
    /* (나머지 schedule, partner, map-section 등 동일) */
     .schedule { background: #f0f0f0; }
     .map-section {  padding: 40px 20px;
     background: #f0f0f0;}
    .partner {  margin-top: 50px;  width:100%;}


.video-container {
  position: relative;
  width: 100%;
  /* 16:9 비율을 위해 padding-bottom: 56.25% */
  padding-bottom: 56.25%;
  margin-bottom: 1rem;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-info .phone {
  display: inline;
  margin-left: 0.5rem;  /* 파이프 기호와 약간의 간격 */
}


/*기타 스타일*/ 

  hr {
  border: none;               /* 기존 테두리 제거 */
  border-bottom: 1px solid #666666;  /* 아래에만 1px 선 */
  margin: 1rem 0;             /* 위/아래 간격 조절 */
}
hr.dotted-line {
  border: none;               /* 기본 테두리 제거 */
  border-top: 1px dotted #d3d3d3; /* 위쪽에 1px 점선 */
  margin: 1rem 0;             /* 위/아래 여백 조절 */
  height: 0;                  /* 높이 없애기 */
}

.img-100 {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0; /* 위아래 여백도 살짝 주기 */
}
figure {
  margin: 0;
}

/*title 관련*/
.title {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 250px; /* 필요에 따라 조절 */
}

.title-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.8);
  color: #fff;
  border-radius: 4px;
  font-size: var(--font-size-h2);
  font-weight: bold;
  text-align: center;
}

/* 사이드 드로어 우상단 X 버튼 */
.drawer-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 2001;
}

footer a[href^="tel:"] {
  color: #fff !important;
  text-decoration: none;
}
/*오시는길 관련 스타일*/
.clinic-info {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* wayto 스타일 */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;            /* 헤더와 본문 사이 간격 */
  margin-bottom: 2rem;  /* 블록 간 세로 간격 */
}
.info-header {
  flex: 0 0 120px;      /* 헤더(아이콘+제목) 고정폭 */
  display: flex;
  align-items: center;
  gap: 0.5rem;    /* 아이콘⇄타이틀 사이 여백 (원하는 값으로 조정) */
}
}
.info-icon {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  color:  #eee !important;
}
.info-details {
  flex: 1;              /* 나머지 공간 차지 */
}
.info-details p {
  margin: 0.25rem 0;
  line-height: var(--line-height-base);
}
/* 구분선 */
hr.dotted-line {
  border: none;
  border-top: 1px dotted #666;
  margin: 1rem 0 2rem;
}


/* footer floaiting action*/
.fixed-actions {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 1000;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0052d4, #4364f7); /* 예시 그라데이션 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.fab svg, /* SVG 아이콘일 때 */
.fab i {  /* 폰트 아이콘일 때 */
  width: 24px;
  height: 24px;
  fill: #fff;
  font-size: 24px;
  color: #fff;
}

/* 초기 상태: 투명하고 살짝 아래로 내려가 있음 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
/* 화면에 보일 때 추가될 클래스 */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}



    /* 모바일 반응형 스타일 */
    @media screen and (max-width: 840px) {


 main {
    padding: 40px 0.5rem 0.5rem;
  }     

 header {
        padding: 0px 20px;
        height: 60px;
        line-height: normal;
        overflow: visible; 
      }
      /* 햄버거 버튼 표시 */
      .hamburger {
        display: flex;
       flex-direction: column;
       justify-content: center;
       cursor: pointer;
        margin-left: auto;   /* 왼쪽 여백을 자동으로 채워서 오른쪽 정렬 */
        margin-right: 50px;  /* 오른쪽 여백을 50px 줘서 양쪽 간격 조절 */
      }

 .contact-info .phone {
    display: block;
    margin: 0.5rem 0 0; /* 위 여백 조절 */
  }
  .nav-container.open .drawer-close {
    display: block;}

      /* 모바일용 사이드 드로어 내비게이션 */
  .nav-container {
  position: fixed;
  top: 0;
  right: -200px; /* 초기 숨김 */
  width: 200px;
  height: 100vh;  /* 화면 전체 높이 */
  background: #000; /* 검은색 배경 */
  overflow-y: auto; /* 드로어 내부 스크롤 */
  transition: right 0.3s ease;
  z-index: 1500;
  padding-top: 60px; 
}
.nav-container.open {
  right: 0;  /* 열릴 때 화면 안으로 슬라이드 */
}
      /* 모바일 내비게이션 내부 메뉴: 세로 정렬 */
      nav ul {
        flex-direction: column;
      }
      nav ul li {
        display: block;
      }
      nav a {
        margin: 0;
        font-size: 16px;
        padding: 10px 5px;
        border-bottom: 1px solid #444;
        line-height: normal;
      }
      /* 모바일에서는 서브메뉴는 상대 위치로 */
      nav ul.sub-menu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;

      }


/*wayto 서식 mobile*/
  .info-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;       /* 블록 간 간격 줄이기 */
  }
  /* 헤더(아이콘+제목)는 왼쪽에 고정하지 않고 상단에만 표시 */
  .info-header {
    flex: none;
    margin-bottom: 0.5rem;
     gap: 0.5rem;    
  }
  /* 상세 내용에는 여백 조금씩 추가 */
  .info-details p {
    margin-left: 1.75rem;  /* 아이콘 정도 들여쓰기 */
  }

/*title 관련*/
.title {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 120px; /* 필요에 따라 조절 */
}

.title-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.8);
  color: #fff;
  border-radius: 4px;
  font-size: var(--font-size-h2);
  font-weight: bold;
  text-align: center;
}

  .youtube-section {
    display: flex;
    flex-direction: column;  /* 메인 아래로 내려오도록 */
    gap: 15px;
  }

  .main-video,
  .side-videos {
    width: 100%;
    flex: none;              /* PC용 flex 설정 해제 */
  }

  .side-videos {
    display: flex;           /* 가로 정렬 */
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;                /* 썸네일 간 간격 */
  }

  /* 세 개가 균등하게 퍼지도록 각 링크에 비율 지정 */
  .side-videos a {
    flex: 1;                 /* 3개가 동일 비율로 공간 차지 */
    text-align: center;      /* 캡션 등이 있으면 가운데 정렬 */
  }

  .side-videos a img {
    width: 100%;             /* a 요소 너비에 맞춰 꽉 채우기 */
    height: auto;
    display: block;
  }
}