/* ──────────────────────────────────────────────────────
   1) Reset & 기본 텍스트/레이아웃
────────────────────────────────────────────────────── */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Pretendard','Noto Sans KR',sans-serif;
  color:var(--text-dark,#333);
  background:#fff;
  padding:0;
  margin:0;
}

a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* ──────────────────────────────────────────────────────
   2) CSS 변수 (테마 컬러)
────────────────────────────────────────────────────── */
:root{
  --max-width:1280px;
  --primary:#0d6efd;
  --gray-50:#fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#e5e5e5;
  --gray-700:#555;
  --text-dark:#333;
}

/* ──────────────────────────────────────────────────────
   3) wrapper 클래스 (풀-브라우저 너비 배경색)
────────────────────────────────────────────────────── */
.wrapper_signature{background:#f0f0f0;padding:45px 0 18px;}
.wrapper_ai       {background:#fffbf5;padding:45px 0 18px;}
.wrapper_recommend {background:#f3faf3;padding:45px 0 18px;}
.wrapper_footer   {background:#e8e8e8;padding: 0 18px;}

/* ──────────────────────────────────────────────────────
   5) .container 기본 설정
────────────────────────────────────────────────────── */
.container,
.container_signature,
.container_ai,
.container_recommend{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1rem;
}

/* ──────────────────────────────────────────────────────
   6) 섹션 제목(h3) 스타일
────────────────────────────────────────────────────── */
section.container       h3,
section.container_signature h3,
section.container_ai    h3,
section.container_recommend h3{
  font-size:1.25rem;
  color:var(--text-dark);
  margin:0 0 .1rem;
}

/* ──────────────────────────────────────────────────────
   7) (이전) Topbar – 현재 헤더 통합 구조에서는 미사용
────────────────────────────────────────────────────── */
.topbar{
  background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
  font-size:.75rem;
}
.topbar .inner{
  display:flex;justify-content:flex-end;align-items:center;
  height:48px;max-width:var(--max-width);margin:0 auto;
  padding-right:50px;gap:1rem;
}
/* (검색 / 마이페이지 / 언어) 규칙은 그대로 두되,
   실제 화면에선 .top-utils 를 사용합니다. */

/* ──────────────────────────────────────────────────────
   8) Header & Main Navigation
────────────────────────────────────────────────────── */
/* =========================  HEADER 레이아웃 ========================= */
.site-header{
  background:#fff;
  border-bottom:none;         /* ▶︎ 하단 구분선 제거 */
}
/* ① 전체 헤더 그리드: [로고] | [오른쪽 영역] */
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:240px 1fr; /* 로고 고정폭 + 나머지 */
}

/* ② 왼쪽 로고 블록 -------------------------------------------------- */
.logo-block{
  display:flex;
  flex-direction:row;         /* ▶︎ 세로→가로 */
  justify-content:center;
  align-items:center;
  height:112px;               /* 48(top) + 64(menu) */
  gap:.5rem;
}
.logo-main{height:56px;}
.logo-icon{height:34px;}      /* ▶︎ 살짝 작게 */

/* ③ 오른쪽 스택 (.top-utils + .main-nav) ----------------------------- */
.right-block{display:flex;flex-direction:column;width:100%;}

/* ── (1) Top-bar(Utills) ------------------------------------------- */
.top-utils{
  display:flex;justify-content:flex-end;align-items:center;
  height:48px;gap:1rem;padding: 0;
  /*background:var(--gray-50);*/
  border-bottom:none;         /* ▶︎ 상·하 구분선 제거 */
}
/* ─ 검색창 ---------------------------------------------------------- */
.top-search{position:relative;display:flex;align-items:center;}
.top-search input[type="search"]{
  width:180px;height:32px;padding:0 36px 0 8px;
  border:1px solid var(--gray-200);border-radius:4px;
  font-size:.75rem;outline:none;transition:border-color .2s;
}
.top-search input[type="search"]:focus{border-color:var(--primary);}
.top-search .search-btn{
  position:absolute;right:4px;width:24px;height:24px;
  background:none;border:none;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0;
}
.top-search .search-btn svg{width:16px;height:16px;fill:var(--gray-700);transition:fill .2s;}
.top-search .search-btn:hover svg{fill:var(--primary);}
/* ─ 마이페이지 아이콘 ---------------------------------------------- */
.top-icon-btn{
  width:28px;height:28px;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.top-icon-btn img{width:100%;height:100%;object-fit:contain;filter:grayscale(30%);transition:filter .2s;}
.top-icon-btn:hover img{filter:none;}
/* ─ 언어 선택 ------------------------------------------------------- */
.lang-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:none;font-size:.75rem;color:var(--text-dark);cursor:pointer;
  outline:none;padding:0 16px 0 4px;
  background:transparent url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23777' height='10' viewBox='0 0 24 24' width='10'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right center;
  background-size:10px auto;
}

/* ── (2) 주메뉴 ----------------------------------------------------- */
/* 1) 메뉴 바 자체를 내용만큼만 줄이고 오른쪽에 붙이기 */
.main-nav {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 0 0 1rem;  /* top 0, right 0, bottom 0, left 1rem */
}

.main-nav .menu {
  width: 100%;
  display: flex;
  justify-content: space-between;  /* 양끝 아이템을 양끝에 딱 붙이기 */
}

/* ───────── 메뉴 리스트 (구분선 짧게) ───────── */
.menu{
  list-style:none;
  display:flex;
  justify-content:center;
  padding:0;
  margin: 0;
}

/* 1) border-left 제거  */
.menu-item{border-left:none;position:relative;}

/* 2) 첫 항목 제외한 나머지에 ‘짧은’ 세로선 삽입 */
.menu-item:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;                 /* 원래 border 자리 */
  top:30%;                /* 수직 가운데 기준 */
  width:1px;              /* 선 두께 */
  height:18px;            /* ← 원하는 길이로 조절 */
  background:var(--gray-200);
  transform:translateY(-50%);
  pointer-events:none;
}

/* 3) 햄버거엔 세로선 안 보이도록 */
.menu-item.hamburger::before{display:none;}

.main-nav .menu-item.hamburger > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;        /* nav 높이와 동일하게 */
  padding: 0 1.5rem;    /* 기존 좌우 패딩 유지 */
}

.menu-item>a{
  display:inline-block;
  padding:.4rem 1.5rem;
  color:var(--text-dark);
  font-weight:700;
  font-size:19px;
  line-height:.5;
  transition:color .2s;
}
.menu-item>a:hover{color:var(--primary);}

/* ───────── Mega-menu 폭 조정 ───────── */
.mega-menu{
  position:absolute;
  top:100%;
  left: 0px;                /* 왼쪽 정렬 */
  right: 64px;             /* 햄버거(48px) + nav 오른쪽 padding(16px) */
  width:auto;             /* right 값을 주면 자동 계산 */
  background:#fff;
  border:1px solid var(--gray-200);
  box-shadow:0 4px 8px rgba(0,0,0,.05);
  visibility:hidden;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease;
  z-index:100;
  margin: auto;
}

.main-nav.open .mega-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.main-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  background: transparent;
  pointer-events: auto;
  z-index: 99;
  gap: 16rem;
}

/* 기존 .mega-inner/.column 부분 수정 */
.mega-menu .mega-inner {
  display: flex;
  gap: 7px;
  padding: 12px;
  margin: 0 auto;
}

.mega-menu .column {
  flex: 0 0 auto;    /* JS가 설정한 width를 그대로 사용 */
}
.mega-menu .column h4{
  font-size:16px;
  margin-bottom:.75rem;
  color:var(--text-dark);
  font-weight:600;
}
.mega-menu .column ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.mega-menu .column ul li {
  width: 100%;               /* 리스트 항목도 컬럼 폭을 따르도록 */
  padding:5px 0;
}
.mega-menu .column ul li a {
  display: block;
  width: 100%;
  text-align: center;        /* 링크 텍스트도 중앙 정렬 */
}
.mega-menu .column ul li a:hover{color:var(--primary);}

/*!* ──────────────────────────────────────────────────────*/
/*   9) 오른쪽 요소(추가 기능) – 사용 시만*/
/*────────────────────────────────────────────────────── *!*/
/*.spacer{flex:1;}*/
/*.nav-right{display:flex;align-items:center;gap:1rem;}*/
/*.nav-right a.login,*/
/*.nav-right a.guide,*/
/*.nav-right .lang-btn,*/
/*.nav-right .search-btn-outer{*/
/*  font-size:.75rem;color:var(--gray-700);background:none;border:none;cursor:pointer;*/
/*}*/
/*.nav-right .search-btn-outer svg{width:20px;height:20px;fill:var(--gray-700);}*/
/*.nav-right .lang-btn{padding:.25rem .5rem;border:1px solid var(--gray-200);border-radius:4px;}*/
/*.nav-right a.login:hover,*/
/*.nav-right a.guide:hover,*/
/*.nav-right .lang-btn:hover,*/
/*.nav-right .search-btn-outer:hover svg{color:var(--primary);fill:var(--primary);}*/

/* ──────────────────────────────────────────────────────
   10) Slider Container
────────────────────────────────────────────────────── */
/*.slider-container{background:#8fbb8d;}*/
.slider{position:relative;max-width:var(--max-width);margin:0 auto;overflow:hidden;}
.slides{/*display:flex;transition:transform .5s ease;*/ overflow:hidden; position:relative; height:420px;}
.slide{/*min-width:100%;*/position:relative;}
.slide img{width:100%;height:420px;object-fit:cover;}
.controls{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1rem;font-size:.875rem;}
button.prev,button.next{
  background:rgba(0,0,0,.4);border:none;color:#fff;width:36px;height:36px;
  border-radius:50%;font-size:1rem;cursor:pointer;
}

/* ──────────────────────────────────────────────────────
   11) Signature Grid
────────────────────────────────────────────────────── */
.signature-grid{
  display:grid;grid-template-areas:"big s1 s2""big s3 s4";
  grid-template-columns:5fr 2fr 2fr;grid-auto-rows:200px;gap:1rem;
  max-width:var(--max-width);margin:0 auto 2rem;
}
.signature-grid .card{position:relative;overflow:hidden;}
.signature-grid .big{grid-area:big;}
.signature-grid .card img{width:100%;height:100%;object-fit:cover;}

/* ──────────────────────────────────────────────────────
   12) Signature 오버레이
────────────────────────────────────────────────────── */
.signature-grid .big .overlay{
  position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,.7);
  padding:1.5rem 1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.signature-grid .big .overlay h4{font-size:2.2rem;font-weight:600;color:#fff;margin:0 0 .75rem;}
.signature-grid .big .overlay p {font-size:1rem;color:#f0f0f0;margin:0;}

.signature-grid .small .overlay{
  position:absolute;left:0;bottom:0;width:100%; height:50%; background:rgba(0,0,0,.8);
  padding:1.5rem 1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.signature-grid .small .overlay h4{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .75rem;}
.signature-grid .small .overlay p {font-size:0.8rem;color:#f0f0f0;margin:0;}

/*
4) Signature Header (제목 + 더보기)
────────────────────────────────────────────────────── */
.signature-header {
  display: flex;
  justify-content: space-between; /* 왼쪽과 오른쪽 끝에 정렬 */
  align-items: center;            /* 수직 가운데 정렬 */
  margin-bottom: 1rem;
  padding-top: 0;                  /* 내부 위쪽 여백 제거 */
}

.signature-header h3 {
  font-size: 28px;
  color: var(--text-dark, #333);
  margin: 0;
}

.signature-header h6 {
  margin: 0;
  font-size: 0.875rem;
}

.signature-header .more-link {
  color: #333333;
  text-decoration: none;
  transition: color 0.2s;
}

.signature-header .more-link:hover {
  color: #0b5ed7; /* 호버 시 짙은 파랑 */
  text-decoration: underline;
}
/* ──────────────────────────────────────────────────────
   13) Digital · AI 전용관
────────────────────────────────────────────────────── */
.digital-intro{margin:0 0 1rem;padding-left:10px;}
.digital-gallery{
  display:flex;justify-content:center;align-items:center;gap:2rem;overflow-x:auto;
  padding:1rem 0;background:#edf1f8;border:1px solid #c8cfdc;border-radius:9px;
  max-width:var(--max-width);margin:0 auto 2rem;height:390px;position:relative;
}
.digital-card{text-align:center;width:190px;flex-shrink:0;transition:transform .3s,opacity .3s;}
.digital-card img{width:100%;border-radius:50%;aspect-ratio:1/1;object-fit:cover;}
.digital-card .title{display:block;font-size:1rem;font-weight:600;color:var(--text-dark);margin-top:27px;}
.digital-card .year {display:block;font-size:.75rem;color:#999;margin-top:.25rem;line-height:1.2;}
.digital-card span  {display:block;margin-top:.5rem;font-size:.8125rem;}
.digital-gallery:hover .digital-card{opacity:.4;}
.digital-gallery .digital-card:hover{transform:scale(1.3);opacity:1;}

/* ──────────────────────────────────────────────────────
   14) 국가인재원 추천 과정
────────────────────────────────────────────────────── */
.recommend-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:30px;
  max-width:var(--max-width);margin:0 auto 2rem;
}
.recommend-card{
  display:flex;gap:30px;align-items:flex-end;background:transparent;border:none;
  box-shadow:none;padding:.5rem 0;
}
.recommend-card img{
  width:220px;height:140px;object-fit:cover;border-radius:0;margin-bottom:.5rem;
  box-shadow:6px 7px 0 4px rgba(0,0,0,.3);margin-right:35px;
}
.recommend-card .info{display:flex;flex-direction:column;justify-content:center; width:290px;}
.recommend-card .info .label{
  display:inline-block;background:#71aea3;color:#fff;font-size:.85rem;font-weight:500;
  padding:.1rem .5rem;border-radius:2px;margin-bottom:.5rem;width:fit-content;
}
.recommend-card .info strong{font-size:1.1rem;margin-bottom:.5rem;}
.recommend-card .info p{font-size:.75rem;color:var(--gray-700);}
.recommend-card .info span{font-size:.8rem;color:var(--gray-700);margin-top:.15rem;}

/* ──────────────────────────────────────────────────────
   15) 공지사항 · 자주 묻는 질문
────────────────────────────────────────────────────── */
.info-flex{
  display:flex;gap:1rem;max-width:var(--max-width);margin:0 auto;
  padding:30px 1rem;
}
.info-left{display:flex;gap:1rem;flex:1;}
.info-left .box{
  flex:1;background:#fff;border:1px solid var(--gray-200);border-radius:4px;
  padding:20px 0 0 30px;
}
.info-left .box h4{font-size:18px;/*margin-bottom:30px;*/width:100%;}
.info-left .box p {font-size:14px;margin-bottom:0;width:100%;}
.faq-box p:first-of-type::before{content:"Q ";color:var(--primary);font-weight:bold;margin-right:.25rem;}
/* .faq-box p:nth-of-type(2)::before{content:"A ";color:#e55353;font-weight:bold;margin-right:.25rem;} */
.faq-box p:nth-of-type(2)::before{content:"Q ";color:#e55353;font-weight:bold;margin-right:.25rem;}

/* 우측 버튼 */
.info-right{display:flex;flex-direction:column;gap:5px;width:210px;}
.action-btn{
  display:flex;align-items:center;justify-content:flex-start;gap:.5rem;background:#fff;
  border:1px solid var(--gray-200);border-radius:4px;font-size:.8125rem;cursor:pointer;
  width:100%;box-sizing:border-box;padding:.75rem .75rem .75rem 30px;
}
.action-btn .btn-text{flex:1;}
.action-btn svg{width:16px;height:16px;fill:var(--gray-700);}
.action-btn span{font-size:16px;}
.divider{border:none;border-top:1px solid var(--gray-200);margin:0;}

/* ──────────────────────────────────────────────────────
   16) Footer
────────────────────────────────────────────────────── */
.custom-footer{background:#fff;color:#555;font-size:.75rem;margin-top:5px;}
.footer-top{
  border-bottom:1px solid var(--gray-200);padding:.75rem 0;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;
  font-size:.6875rem;background:#fff;
}
.footer-top span{color:var(--gray-700);}

.footer-container{
  max-width:var(--max-width);margin:0 auto;padding:0 1rem;background:#e8e8e8;
}
.footer-main{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:1rem 0;flex-wrap:wrap;gap:1rem;
}

/* 좌측 */
.footer-left{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:1.5rem;row-gap:.5rem;align-items:start;
}
.footer-logo   {grid-column:1/2;grid-row:1/4;align-self:start;}
.footer-links  {grid-column:2/3;grid-row:1/2;display:flex;flex-wrap:wrap;align-items:center;font-size:.75rem;margin:0;padding:0;}
.footer-address{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:column;margin:0;padding:0;}
.footer-address p{font-size:.6875rem;color:var(--gray-700);margin:0;}
.footer-copy   {grid-column:2/3;grid-row:3/4;font-size:.6875rem;color:#777;margin:0;}

/* 우측 */
.footer-right{flex:1;min-width:180px;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;}
.footer-sns{display:flex;gap:.75rem;}
.footer-sns .sns-icon{width:20px;height:20px;display:inline-block;}
.footer-sns .sns-icon img,
.footer-sns .sns-icon svg{width:100%;height:100%;object-fit:contain;filter:grayscale(30%);transition:filter .2s;}
.footer-sns .sns-icon:hover img,
.footer-sns .sns-icon:hover svg{filter:none;}

.footer-dropdowns{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;}
.footer-dropdowns .dropdown{display:flex;align-items:center;gap:.5rem;}
.footer-select{
  width:160px;height:16px;padding:0 .5rem;font-size:.75rem;border:1px solid var(--gray-200);
  border-radius:4px;color:#333;appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23777' height='10' viewBox='0 0 24 24' width='10'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right .5rem center;
  background-size:10px auto;
}
.footer-select:focus{border-color:var(--primary);outline:none;}
.footer-select-btn{
  height:32px;padding:0 .75rem;font-size:.75rem;font-weight:600;color:#fff;
  background:var(--primary);border:none;border-radius:4px;cursor:pointer;transition:background .2s;
}
.footer-select-btn:hover{background:#0b5ed7;}


/* ──────────────────────────────────────────────────────
   A) 균등 너비 메뉴 아이템
────────────────────────────────────────────────────── */
.main-nav .menu-item {
  flex: 1;
  text-align: center;
}

/* ──────────────────────────────────────────────────────
   B) CSS 호버 기반 메가메뉴 토글 규칙 제거
────────────────────────────────────────────────────── */
/*
.menu:has(.menu-item:hover) + .mega-menu,
.mega-menu:hover {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.main-nav:hover .mega-menu {
  visibility: hidden;
  opacity: 0;
}
*/
/* ──────────────────────────────────────────────────────
   C) 햄버거 영역 빈칸 추가
────────────────────────────────────────────────────── */
/*.mega-menu .mega-inner::after {*/
/*  content: "";*/
/*  flex: 0.5;           !* 기존 컬럼과 동일한 비율로 빈 공간 생성 *!*/
/*}*/

/* ──────────────────────────────────────────────────────
   D) 텍스트 기반 가변 폭 + 중앙 분배
────────────────────────────────────────────────────── */
.main-nav .menu {
  display: flex;
  justify-content: space-around; /* or space-evenly, 필요에 따라 조정 */
}

.main-nav .menu-item {
  /* flex:1 제거 후, 내용물 너비만큼만 차지 */
  flex: 0 0 auto;
  text-align: center;
}

/* 줄바꿈 방지 */
.main-nav .menu-item > a {
  align-content: center;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────
   Mega 메뉴 리스트 중앙 정렬
────────────────────────────────────────────────────── */
.mega-menu .column ul {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 각 li 를 컬럼 중앙에 배치 */
  margin: 0 auto;
  padding: 0;
}

.mega-menu .column ul li a {
  display: block;
  text-align: center;   /* 링크 텍스트도 중앙 정렬 */
}

/* slick */
.slick-slider {position:relative;}
.slick-list {overflow:hidden; position:relative;}
.slick-list.dragging {cursor:pointer;}
.slick-track {position:relative; top:0; left:0; margin-right:auto; margin-left:auto;}
.slick-track:before, .slick-track:after {display:table;}
.slick-track:after {clear:both;}
.slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none; float:left;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide.slick-loading img {display:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block;}