/********************************************************
 * (1) 기본 reset & global styles
 ********************************************************/
/* HTML과 BODY 초기화 + 전역 스타일 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; /* 브라우저 전체 높이 */
  overflow-x: hidden; /* 가로 스크롤바 숨김 */
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  color: #333;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* 맥OS 등에서 폰트 스무딩 개선 */
}

/* body를 flex 컨테이너로, 배경색 검정(#000) */
body {
  display: flex;
  flex-direction: column;
  background: #000; /* 페이지 배경색(필요 시 변경) */
}

/* a 태그 기본 스타일 (밑줄 제거, 색상 상속) */
a {
  text-decoration: none;
  color: inherit;
}

/********************************************************
 * (2) 전체 레이아웃: header + main + footer
 ********************************************************/
main {
  flex: 1; /* 본문 영역 자동 확장 */
}

/********************************************************
 * (3) 공통 Section 스타일
 ********************************************************/
section:not(.hero-slider) {
  /* clamp(1.5rem, 5vw, 3rem) 등으로 반응형 여백 */
  padding: clamp(1.5rem, 5vw, 3rem) 1rem;
  max-width: 1080px; 
  margin: 0 auto;
}

section:not(.hero-slider) > h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

/********************************************************
 * (4) Hero Slider (슬라이더)
 ********************************************************/
/*
  (A) Hero Slider의 세로 길이(높이) 설정
  - 현재 min-height: 60vh; (화면 높이 60%)
  - 만약 고정된 픽셀 값으로 지정하고 싶다면,
    여기서 height: 600px; 등으로 대체하여 사용
*/
section.hero-slider {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
  position: relative;
  /* min-height: 60vh; ← 반응형(화면 높이 60%) */
  min-height: 60vh;
  /* 
    예) 고정 높이로 쓰려면:
    height: 600px;  ← 이렇게 변경
    min-height: none;  ← 함께 제거 (권장)
  */
  overflow: hidden;
  margin-bottom: clamp(17rem, 10vw, 22rem);
}

/* 슬라이드 컨테이너 */
.slider-wrapper {
  display: flex; /* 여러 슬라이드를 가로로 나열 */
  width: 100%;
  transition: transform 0.5s ease;
  user-select: none;   /* 드래그로 텍스트 선택 방지 */
  touch-action: pan-y; /* 모바일에서 수직 스크롤 가능 */
}

/* 개별 슬라이드 */
.slide {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: 60vh;          /* 개별 슬라이드 높이 (이 부분도 고정될 수 있음) */
  background-size: cover;
  background-position: center;
}

/* 슬라이드 위 반투명 오버레이 */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* 텍스트/버튼 고정(슬라이드 교체되어도 유지) */
.hero-slider .slide-content {
  position: absolute; /* 부모(.hero-slider) 기준 */
  z-index: 2;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  max-width: 90%;
}

/* 텍스트 스타일 */
.hero-slider .slide-content h1 {
  overflow-wrap: break-word;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.hero-slider .slide-content h2 {
  overflow-wrap: break-word;
  font-size: clamp(1rem, 4vw, 1.4rem);
  opacity: 0.9;
  margin-bottom: 1.2rem;
}
/* 단어 단위로 줄바꿈 (한글+영문 혼합 시 권장) */
.hero-slider .slide-content h1,
.hero-slider .slide-content h2 {
  white-space: normal;        /* 기본 줄바꿈 허용 */
  word-break: keep-all;       /* 단어 중간 분할 방지 */
  overflow-wrap: break-word;  /* 너무 긴 단어는 경계에서 분할 */
}

/* CTA 버튼 스타일 */
.hero-slider .slide-content .slide-btn {
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 50px;
  font-weight: 600;
  transition: background 0.3s;
}
.hero-slider .slide-content .slide-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* 도트 인디케이터 */
.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.3s;
}
.dot.active {
  background: #fff;
}

/* 게시판 미리보기와 함께 있을 때 마진 축소 */
section.hero-slider.has-board,
section.hero-slider.has-custom,
section.hero-slider.has-contact2 {
  margin-bottom: 20px !important;
}


/********************************************************
 * (5) 게시판 미리보기
 ********************************************************/
.board-list-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 992px) {
  .board-list-wrap {
    grid-template-columns: 1fr; 
  }
}
.board-item {
  background: #1c1c1c;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  padding: 1rem;
  transition: transform 0.3s;
}
.board-item:hover {
  transform: translateY(-4px);
}
.board-item h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #444;
  padding-bottom: 0.4rem;
  color: #ee5917; /* 오렌지 */
}
.board-item li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  color: #ccc; /* 밝은 회색 */
}
.board-item li a {
  color: #eee;
}
.board-item li a:hover {
  text-decoration: underline;
}
.board-item li small {
  color: #888;
}

/********************************************************
 * (6) 커스텀 섹션 (custom-section2)
 ********************************************************/
.custom-section2 {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  padding: 1.5rem;
  margin-top: 2rem;
}
/********************************************************
 * (7) 연락처(고객센터) - 통일된 다크 테마 스타일
 ********************************************************/
.contact2 {
  background: #1c1c1c;  /* 다른 섹션과 동일한 다크 배경 */
  color: #fff;
  padding: 2rem;
  text-align: center;
  border: 1px solid #333;           /* 게시판, 사이드바 등과 동일한 테두리 */
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); /* 살짝 어두운 그림자 */
  margin: 2rem 0;                    /* 섹션 간 공백 */
}

.contact2-inner {
  max-width: 480px;
  margin: 0 auto;
}

/* 제목 */
.contact2-inner h3 {
  font-size: 1.3rem;
  color: #ee5917;             /* 사이트 공통 포인트 색상 */
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #444;
  padding-bottom: 0.4rem;
}

/* 전화번호 */
.contact2-inner .phone2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* 안내 문구 (운영 시간 등) */
.contact2-inner .time2 {
  font-size: 0.95rem;
  color: #ccc;
}


/********************************************************
 * (9) 헤더 범위 (header-footer-black.css 통합)
 ********************************************************/
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

.header-scope {
  width: 100%;
  background: #000; 
  color: #fff;
  font-family: 'Nanum Gothic', "Helvetica Neue", Arial, sans-serif;
  border-bottom: 1px solid #ee5917;
}
.header-scope .site-header {
  max-width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  transition: top 0.5s ease-out;
  z-index: 1000;
  height: 60px; /* 데스크톱 헤더 높이 */
}
.header-scope .site-header h1 {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  font-weight: 600;
}
.header-scope .site-header h1 a {
  color: inherit;
  text-decoration: none;
}
.header-scope .header-right {
  display: flex;
  align-items: center;
  position: relative;
}
.header-scope .site-header nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-scope .site-header nav li {
  position: relative;
  border-left: 1px solid #424242;
  padding: 17px;
}
.header-scope .site-header nav li:first-child {
  border-left: none;
}
.header-scope .site-header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.header-scope .site-header nav a:hover,
.header-scope .site-header nav li:hover > a {
  background: #ee5917;
  color: #fff;
}
.header-scope .site-header nav > ul > li:hover > a {
  background: none !important;
  color: #fff;
}
.header-scope .site-header nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #000;
  border-bottom: 1px solid #ee5917;
  border-left: 1px solid #ee5917;
  border-right: 1px solid #ee5917;
  list-style: none;
  z-index: 999;
  padding: 0;
}
.header-scope .site-header nav li ul li a {
  display: block;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 30px;
  padding: 10px 15px;
}
.header-scope .site-header nav li ul li a:hover {
  background: #ee5917;
  color: #fff;
}
.header-scope .site-header nav li:hover > ul {
  display: block;
}
.header-scope .site-header nav li ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

/********************************************************
 * (10) 햄버거 버튼 + 모바일 메뉴
 ********************************************************/
.header-scope .menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: #ee5917;
  cursor: pointer;
  margin-left: 1.2rem;
}

/* 992px 이하(모바일) */
@media (max-width: 992px) {
  .header-scope .site-header {
    height: 100px; /* 모바일 헤더 높이 */
  }
  .header-scope .site-header h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  .header-scope .menu-toggle {
    display: block;
    font-size: 3rem;
  }
  .header-scope .site-header nav ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 1rem;
    flex-direction: column;
    background: #000;
    border-bottom: 1px solid #ee5917;
    min-width: 200px;
    padding: 0;
  }
  .header-scope .site-header nav ul.show {
    display: flex;
  }
  .header-scope .site-header nav li ul {
    position: static;
    display: none;
    border: none;
  }
  .header-scope .site-header nav li.active > ul {
    display: block;
  }
  .header-scope .site-header nav li:hover > ul {
    display: none;
  }
  .header-scope .site-header nav li {
    border-left: none;
    padding: 0;
  }
  .header-scope .site-header nav li a {
    width: 100%;
    display: block;
    text-align: left;
    border-bottom: 1px solid #424242;
    padding: 1rem;
    font-size: 1rem;
  }
}

/********************************************************
 * (11) 반응형 푸터
 ********************************************************/
.footer-scope {
  width: 100%;
  background: #000;
  color: #fff;
  font-family: 'Nanum Gothic', "Helvetica Neue", Arial, sans-serif;
  border-top: 1px solid #ee5917;
}
.footer-scope .site-footer {
  max-width: clamp(320px, 90%, 1200px);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-top: none;
  text-align: center;
  font-size: 0.98rem;
  box-shadow: none;
  padding: 0;
}
.footer-scope .site-footer p {
  margin: 0;
}
.footer-scope .site-footer a {
  color: #ee5917;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-scope .site-footer a:hover {
  color: #ffa75e;
}

/********************************************************
 * (12) Hero Section (고정 높이 → 유연한 높이)
 ********************************************************/
.hero-section {
  width: 100%;
  min-height: clamp(100px, 40vh, 250px);
  background: #1a73e8 
    url('/make_test/uploads/img/hero_default.jpg') 
    center center / cover 
    no-repeat; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
  padding: clamp(1rem, 5vw, 2rem) 1rem;
}
.hero-section h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.hero-section p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
@media (max-width: 480px) {
  .hero-section h1 {
    font-size: 1.5rem;
  }
  .hero-section p {
    font-size: 0.95rem;
  }
}

/********************************************************
 * (13) Page Layout: container, sidebar, page-content
 * - 사이트 레이아웃을 크게 "사이드바 + 본문(page-content)"로 구성
 ********************************************************/
.page-container {
  max-width: clamp(320px, 95%, 1200px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 5rem 1.5rem;
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 240px;
  background: #1c1c1c;
  border-radius: 6px;
  padding: 1.2rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

.sidebar h3 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
  color: #ee5917;
  border-bottom: 2px solid #424242;
  padding-bottom: 0.5rem;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar li {
  margin-bottom: 0.5rem;
}

.sidebar li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.sidebar li a:hover {
  background: #333;
  color: #ee5917;
}

.page-content {
  flex: 1;
  background: #1c1c1c;
  border-radius: 6px;
  padding: 1.2rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

.page-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #ee5917;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
}

/* 반응형 레이아웃 (<= 992px) */
@media (max-width: 992px) {
  /* 전역 폰트 크게 -> 모든 텍스트 확대 */
  html {
    font-size: 180%; 
  }

  .page-container {
    flex-direction: column;
    padding: 1rem;
    border-radius: 0;
  }
  .sidebar {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0;
  }
  .page-content {
    width: 100%;
    border-radius: 0;
    padding: 1rem;
    font-size: 0.95rem; 
  }
}

/* 아주 작은 해상도(<= 480px)에서 더 확대 */
@media (max-width: 480px) {
  html {
    font-size: 120%; 
  }
  .hero-section h1 {
    font-size: 1.5rem;
  }
  .hero-section p {
    font-size: 0.95rem;
  }
}