/* ------------------------------ */
/* 1) 기본 설정 & Reset           */
/* ------------------------------ */
@charset "UTF-8";

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
  background-color: #f8f8f8;
}
li { list-style: none; }
a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}
a:hover {
  color: #0B2C6B; /* 강조 색(원하면 바꿔도 됨) */
}

/* ------------------------------ */
/* 2) CSS 변수 (컬러/전역)        */
/* ------------------------------ */
:root {
  --main-color: #0F3D91; /* 남색 기본 */
  --accent-color: #0B2C6B; /* 남색 Hover 시 */
  --light-color: #E3EAF7;
  --text-color: #333;
  --white: #ffffff;
  --gray: #777;
  --transition-speed: 0.3s;

  /* 추가 포인트 컬러 (원하면 사용) */
  --point-color: #ff9043;
}

/* ------------------------------ */
/* 3) 공통 레이아웃               */
/* ------------------------------ */
#wrap {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 메인 영역: 고정 메뉴 때문에 상단 여백 부여 */
main {
  flex: 1;
  padding: 100px 25px 20px;
  min-height: calc(100% - 75px);
}
.container {
  max-width: 1000px;
  margin: 0 auto;
}

/* ------------------------------ */
/* 4) PC 메뉴 (fixed nav)         */
/* ------------------------------ */
.menu__pc {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: var(--main-color);
  text-align: center;
  z-index: 999;
  display: none; /* 모바일 우선, 나중에 미디어쿼리에서 보여줌 */
}
.menu__pc ul {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
  height: 60px;
}
.menu__pc ul li a {
  color: var(--white);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color var(--transition-speed);
}
.menu__pc ul li a:hover {
  background-color: var(--accent-color);
}
/* 활성 메뉴 표시 (on) */
.menu__pc ul li.on a {
  background-color: var(--accent-color);
}

/* ------------------------------ */
/* 5) 모바일 메뉴 (햄버거)        */
/* ------------------------------ */
/* (A) 상단바 높이/색상 설정 */
.menu__mo {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 60px;           /* 상단바 높이 */
  background-color: var(--main-color);
  z-index: 999;
}

/* (B) 햄버거 버튼 라벨(아이콘)을 왼쪽 + 수직 중앙 정렬 */
.menu__action {
  position: absolute;
  left: 16px;
  top: 70%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.5s ease;
  z-index: 50;
}
.menu__action .hamburger {
  width: 24px;
  height: 3px;
  background: var(--white);  /* 흰색 아이콘 */
  position: relative;
  transition: background 10ms 300ms ease;
  transform: translateY(0);   /* 중앙정렬이니 굳이 20px 이동 불필요 */
}
.menu__action .hamburger::before,
.menu__action .hamburger::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 3px;
  background: var(--white);
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
}
.menu__action .hamburger::before {
  top: -7px;
}
.menu__action .hamburger::after {
  top: 7px;
}

/* (C) 체크박스 숨기기 */
#menu__hamburger {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* (D) 펼쳐지는 메뉴(ul) - 기본 상태는 숨김 */
.menu__mo ul {
  position: absolute;
  top: 50px;  /* 상단바 아래 */
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  /* 남색 바탕 or 블러 등 원하는 색으로 */
  background: var(--main-color); 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* 메뉴 링크 스타일 */
.menu__mo ul li a {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  /* 테두리 등 필요시 추가 */
}

/* (E) 체크박스 활성화 -> 펼친 상태 */
#menu__hamburger:checked + label + ul {
  width: 100vw;
  height: calc(100vh - 50px);
  visibility: visible;
  opacity: 1;
}

/* (F) X 아이콘 (햄버거 -> X) */
#menu__hamburger:checked ~ .menu__action .hamburger {
  background: transparent;
}
#menu__hamburger:checked ~ .menu__action .hamburger::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--white);  /* 오렌지 X */
}
#menu__hamburger:checked ~ .menu__action .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--white);  /* 오렌지 X */
}

/* ------------------------------ */
/* 6) 반응형: PC/모바일 전환       */
/* ------------------------------ */
@media screen and (min-width: 768px) {
  /* PC에서는 모바일 메뉴 숨기기 */
  .menu__mo {
    display: none;
  }
  /* PC 메뉴 보이기 */
  .menu__pc {
    display: block;
  }
}

/* ------------------------------ */
/* 7) 본문(About 등) 스타일       */
/* ------------------------------ */
.about {
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}
.about h2 span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
}
.profile {
  display: block; 
}
.profile img {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.profile-name {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}
.profile-desc {
  color: var(--text-color);
  line-height: 1.6;
}
.profile::after {
  content: "";
  display: block;
  clear: both;
}

/* 목록 스타일 */
.list__bar li {
  position: static;
  padding-left: 0;
  margin-bottom: 0.2rem;
}
.list__bar li::before {
  content: none;
}

/* ------------------------------ */
/* 8) 푸터 스타일                */
/* ------------------------------ */
footer {
  background-color: var(--main-color);
  color: var(--white);
  text-align: center;
  padding: 1rem 0;
}
.link__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 15px 0;
}
.link__item a {
  font-size: 30px;
  color: var(--white);
  transition: color 0.3s;
}
.link__item a:hover {
  color: var(--accent-color);
}

/* ------------------------------ */
/* 9) 추가 반응형 미세조정       */
/* ------------------------------ */
@media screen and (max-width: 500px) {
  main {
    padding: 80px 20px 20px;
  }
  .profile img {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
  .profile-name, .profile-desc {
    text-align: center;
  }
}


.title-underline {
  display: inline-block;
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color); 
  font-size: 1.3rem;
}

.title-center-large {
  display: inline-block;
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color); 
  font-size: 2rem;    /* 더 크게 */
  text-align: center; /* 중앙 정렬 */
  
  margin: 0 auto 1.5rem; /* 가운데 배치 + 아래 간격 */
}

/* ================================ */
/* 2) dl, dt, dd 스타일링           */
/* ================================ */
.list__year {
  margin-bottom: 2rem;
}
.list__year dt {
  margin-top: 1rem;
  font-weight: 700;
  position: relative;
}
.list__year dt span {
  color: var(--text-color);
  margin-right: 10px;
}
.list__year dt em {
  font-style: italic;
  color: var(--text-color);
  display: inline-block;
  margin-left: 5px;
  font-weight: 300;
}
.list__year dd {
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.list__year dt ~ dd {
  padding-left: 0.5rem;
  border-left: 2px solid var(--light-color);
}

.Photo ul {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 한 칸 최소 250px, 공간 남으면 추가 칼럼 */
  gap: 15px; /* 사진 사이 간격 */
  list-style: none;
  padding: 0;
  margin: 2rem auto; /* 위아래 여백, 가운데 정렬 */
  max-width: 1000px; /* 갤러리 전체 폭 제한 (원하시면 조절) */
}
.Photo ul li {
  background-color: #fff; 
  border-radius: 8px; 
  overflow: hidden; /* 코너 둥글게 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.Photo ul li img {
  width: 100%;
  height: auto;
  display: block; /* 블록 요소로 만듦 */
}