/* 1. 웹폰트 불러오기 (인코딩된 안전한 주소 버전) */
@font-face {
  font-family: "A2z";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-1Thin.woff2")
    format("woff2");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "A2z";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-4Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "A2z";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-7Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "A2z";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2601-6@1.0/%EC%97%90%EC%9D%B4%ED%88%AC%EC%A7%80%EC%B2%B4-9Black.woff2")
    format("woff2");
  font-weight: 900;
  font-style: normal;
}

/* 2. 적용하기 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "A2z", sans-serif;
}

:root {
  --bg-cream: #fdfaf0;
  --bg-yellow: #fad355;
  --text-brown: #5c2000;
  --btn-brown: #7c2400;
  --border-color: #d8c9ad;
}

body {
  background-color: var(--bg-cream);
  color: var(--text-brown);
  /* 고정 헤더 높이만큼 여백 확보 */
  padding-top: 120px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 상단바 고정 --- */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-cream);
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.header-top {
  border-bottom: 1px solid var(--border-color);
}

.logo {
  font-size: 24px;
  font-weight: 800;
}
.top-nav a {
  margin-left: 30px;
  text-decoration: none;
  color: var(--text-brown);
  font-weight: 500;
}

.info-group {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}
.info-group .divider {
  color: #ccc;
}

.btn-primary {
  background-color: var(--btn-brown);
  color: #fff;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  /* margin-left: auto는 지워도 됩니다. space-between이 해결해 줄 거예요! */
}

/* --- 메인 히어로 --- */
.hero-section {
  background-color: var(--bg-yellow);
  text-align: center;
  padding: 80px 0 150px;
  position: relative;
}
.hero-date {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
.hero-title {
  font-size: 80px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 30px;
}
.hero-desc {
  line-height: 1.6;
  font-size: 16px;
}

/* --- 프로그램 섹션 공통 --- */
.program-section {
  display: flex;
  align-items: center;
  padding: 100px 20px;
  gap: 60px;
  padding-left: 80px; /* ★ 왼쪽 여백을 더 주어 전체적으로 오른쪽으로 밈 */
}
.program-section.reverse {
  flex-direction: row-reverse;
}
.program-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: -15px 15px 0px #e6dfc8;
}
.program-text .num {
  font-size: 40px;
  font-weight: 900;
  display: block;
  margin-bottom: 10px;
}
.program-text h2 {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
}
.program-text .sub-title {
  font-weight: bold;
  margin-bottom: 30px;
}
.program-text .desc {
  line-height: 1.8;
  color: #444;
}

.program-image-group img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}

/* --- 행사 일정 --- */
.schedule-section {
  background-color: var(--bg-yellow);
  padding: 80px 0;
  text-align: center;
}
.section-title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 20px;
}
.section-desc {
  line-height: 1.6;
  margin-bottom: 50px;
}

.schedule-table {
  border-top: 2px solid var(--text-brown);
  border-bottom: 2px solid var(--text-brown);
}
.schedule-table .row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(92, 32, 0, 0.2);
  overflow: hidden; /* ★중요: 자식 요소가 부모 너비를 넘지 못하게 함 */
}
.schedule-table .row:last-child {
  border-bottom: none;
  border-right: none;
}
.schedule-table .col {
  width: 15%;
  flex: none !important; /* flex-grow 방지 */
  padding: 15px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(93, 64, 55, 0.3); /* 세로 구분선 */
  box-sizing: border-box;
}
.schedule-table .header-row .col {
  font-weight: bold;
}

.col:last-child {
  border-right: none; /* 맨 오른쪽 세로선 제거 */
}
.time-col {
  width: 10% !important; /* 너비를 %로 강제 고정 */
  flex: none !important;
  font-weight: bold;
  border-right: 1px solid rgba(92, 32, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.02); /* 살짝 어두운 배경으로 구분 */
}

/* 비고 내용 칸: 왼쪽 제목칸(1)을 제외한 나머지 6개 칸을 합친 너비 */
.full-col {
  width: 90% !important;
  flex: none !important;

  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border-right: none !important; /* 오른쪽 선 확실히 제거 */
}

.break-time .full-col {
  flex: 2;
  justify-content: flex-end;
  padding-right: 50px;
}

/* 대각선 칸 설정 */
.diagonal-split {
  position: relative;
  background-image: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    rgba(92, 32, 0, 0.3) 50%,
    transparent calc(50% + 0.5px)
  ) !important;
  display: block !important; /* 내부 텍스트 위치 조절용 */
  padding: 0 !important;
}

/* 우측 상단 텍스트 (부문) */
.diagonal-split .top-text {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-brown);
}

/* 좌측 하단 텍스트 (지역) */
.diagonal-split .bottom-text {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-brown);
}

/* --- 스폰서 섹션 --- */
.sponsor-section {
  display: flex;
  flex-direction: column; /* 요소를 세로로 배치 (제목 -> 그리드) */
  align-items: center; /* ★핵심: 가로 중앙 정렬 */
  justify-content: center;
  text-align: center; /* 텍스트 중앙 정렬 */
  padding: 80px 0;
}
.sponsor-left {
  flex: 1;
}
.sponsor-card {
  background-color: #f7f1e1;
  padding: 40px;
  border-radius: 20px;
  height: 100%;
  text-align: center;
}
.sponsor-card h3 {
  font-size: 24px;
  margin-bottom: 20px;
}
.sponsor-right {
  width: 100%;
  max-width: 1000px; /* 로고 그리드가 너무 퍼지지 않게 적절한 너비 제한 */
  margin: 0 auto; /* 한번 더 확실하게 중앙으로 */
  text-align: center; /* ★ 핵심: h3 같은 텍스트 요소를 가로 중앙으로 */
  align-items: center; /* ★ 핵심: 내부의 logo-grid 박스들을 가로 중앙으로 */
}
.sponsor-right h3 {
  width: 100%;
  margin-bottom: 20px;
  font-size: 24px;
  /* 만약 특정 브라우저에서 왼쪽으로 쏠리면 아래 추가 */
  text-align: center;
}
.logo-grid {
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  margin-top: 30px;
  margin-bottom: 50px; /* 로고 아래에 다음 h3와의 간격을 일정하게 생성 */
}
.logo-box {
  background-color: #f7f1e1;
  width: 200px; /* 박스 크기 지정 */
  height: 100px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  padding: 20px; /* 로고와 박스 테두리 사이의 여백 */
}

.logo-box2 {
  background-color: #faf9f6;
  width: 200px; /* 박스 크기 지정 */
  height: 100px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  padding: 20px; /* 로고와 박스 테두리 사이의 여백 */
}

/* 한 줄에 2개 전용 그리드 */
.logo-grid-double {
  display: grid;
  /* 1:1 비율로 두 칸을 만듭니다 */
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  max-width: 500px; /* 박스 2개가 너무 옆으로 길어지면 이 숫자를 줄이세요 */
  margin: 30px auto; /* 중앙 정렬 */
  justify-items: center;
  margin-bottom: 50px; /* 로고 아래에 다음 h3와의 간격을 일정하게 생성 */
}

.logo-img {
  width: 100%; /* 박스 너비의 90%까지 채움 */
  height: 80%; /* 박스 높이의 90%까지 채움 */
  object-fit: contain; /* 이미지 비율을 유지하면서 박스 안에 쏙 들어가게 */
}

/* --- 푸터 --- */
.footer-banner {
  /* 실제 배경 이미지로 교체하세요 */
  background: url("https://via.placeholder.com/1920x600/333/fff?text=Background+Image")
    center/cover no-repeat;
  padding: 30px 20px;
  color: #a35050;
}
.footer-banner h2 {
  font-size: 48px;
  margin-bottom: 20px;
}
.footer-banner p {
  line-height: 1.6;
  margin-bottom: 4px;
}
.btn-yellow {
  background-color: var(--bg-yellow);
  color: var(--text-brown);
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
  border-top: 1px solid var(--border-color);
}
.footer-links a {
  margin-right: 20px;
  color: var(--text-brown);
  text-decoration: none;
  font-weight: bold;
}
.footer-details {
  text-align: right;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

/* --- 스크롤 애니메이션 클래스 --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 데스크탑/모바일 유틸리티 클래스 --- */
.mobile-only {
  display: none !important;
}
.desktop-only {
  display: block !important;
}
.mobile-break {
  display: none;
}

.header-bottom.desktop-only {
  display: flex !important; /* block !important를 이기기 위해 클래스를 합침 */
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 20px;
  width: 100%;
}

.info-list {
  display: grid;
  grid-template-columns: 80px 1fr; /* 제목 너비 고정, 나머지는 내용 */
  row-gap: 8px; /* 여기가 핵심! 세로 줄 간격을 여기서 조절하세요 */
  align-items: center;
}

.info-list dt {
  font-weight: bold;
  color: var(--text-brown);
}

.info-list dd {
  margin: 0; /* 기본 여백 제거 */
  color: #444;
}

/* -------------------------------------------
   반응형 미디어 쿼리 (Mobile - max-width: 768px) 
   ------------------------------------------- */
@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  .mobile-only.mobile-nav-bar {
    display: flex !important;
  }
  .desktop-only,
  .desktop-break {
    display: none !important;
  }
  .mobile-break {
    display: block;
  }

  body {
    padding-top: 230px;
  } /* 모바일 헤더 높이에 맞게 조정 */

  /* 상단 고정 바 */
  .header-top {
    justify-content: center;
    padding: 15px;
    border-bottom: none;
  }

  /* 1. 고정 헤더 잘림 방지 (화면 꽉 차게) */
  .fixed-header {
    position: fixed;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    display: block;
  }

  .fixed-header .container {
    width: 100%;
    box-sizing: border-box;
    /* padding: 0 15px; 필요시 좌우 여백 추가 */
  }

  /* 2. 접수기간 & 문의 두 줄 처리 (숨겨진 영역 살리기) */
  .fixed-header .header-bottom {
    display: flex !important; /* 모바일에서도 보이도록 강제 활성화 */
    flex-direction: column; /* 가로 배치를 세로 배치로 변경 */
    align-items: center; /* 가운데 정렬 */
    padding: 5px 20px 15px;
    gap: 15px; /* 글자와 버튼 사이 간격 */
    background-color: #fdfaf0; /* 헤더 배경색과 맞춤 */
  }

  .header-bottom .info-group {
    display: flex;
    flex-direction: column; /* ★ 핵심: 글자를 두 줄로 분리 */
    align-items: center;
    gap: 5px; /* 두 줄 사이의 간격 */
    font-size: 14px;
    color: var(--text-brown); /* 기존 텍스트 색상 변수 사용 */
  }

  .header-bottom .info-group .divider {
    display: none; /* 모바일에서는 줄바꿈을 하므로 '|' 기호 숨김 */
  }

  /* 3. 모바일 다운로드 버튼 (선택사항: 가로로 꽉 차게) */
  .header-bottom .btn-primary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .logo {
    font-size: 20px;
    text-align: center;
    line-height: 1.3;
  }

  .mobile-nav-bar {
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    background-color: var(--bg-cream);
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: bold;
  }
  .mobile-nav-bar a {
    color: var(--text-brown);
    text-decoration: none;
  }
  .mobile-nav-bar .divider {
    color: var(--border-color);
    font-weight: normal;
  }

  /* 메인 히어로 */
  .hero-section {
    padding: 40px 20px 80px;
  }
  .hero-title {
    font-size: 46px;
    margin-bottom: 20px;
  }
  .hero-desc {
    font-size: 15px;
    line-height: 1.6;
    word-break: keep-all;
  }

  /* 프로그램 공통 */
  .program-section {
    flex-direction: column;
    padding: 60px 20px;
    gap: 30px;
    text-align: left;
  }
  .program-text {
    order: -1; /* 텍스트를 항상 이미지 위로 */
  }
  .program-text .num {
    font-size: 32px;
    margin-bottom: 5px;
  }
  .program-text h2 {
    font-size: 32px;
    margin-bottom: 15px;
  }
  .program-text .sub-title {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .program-text .desc {
    font-size: 14px;
    word-break: keep-all;
  }

  /* 행사 일정 */
  .schedule-section {
    padding: 60px 20px;
  }
  .section-title {
    font-size: 36px;
  }
  .section-desc {
    font-size: 14px;
    word-break: keep-all;
    margin-bottom: 30px;
  }

  /* 모바일 일정표 스타일 */
  .mobile-schedule {
    text-align: left;
    border-top: 2px solid var(--btn-brown);
    border-bottom: 2px solid var(--btn-brown);
  }
  .schedule-group {
    border-bottom: 1px solid rgba(92, 32, 0, 0.2);
  }
  .schedule-group:last-child {
    border-bottom: none;
  }
  .date-header {
    background-color: rgba(216, 201, 173, 0.4); /* 연한 베이지 톤 */
    padding: 15px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid rgba(92, 32, 0, 0.2);
  }
  .schedule-row {
    display: flex;
    padding: 15px 10px;
    border-bottom: 1px dashed rgba(92, 32, 0, 0.2);
    font-size: 14px;
  }
  .schedule-row:last-child {
    border-bottom: none;
  }
  .schedule-row .time {
    flex: 0 0 90px;
    font-weight: bold;
  }
  .schedule-row .event {
    flex: 1;
    line-height: 1.5;
    text-align: center;
  }

  /* 스폰서 섹션 */
  .sponsor-section {
    padding: 60px 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 밖으로 튀어나가는 것 방지 */
  }

  .sponsor-right {
    width: 100%;
    max-width: 100%; /* 부모 너비를 넘지 않게 */
  }

  .sponsor-right h3 {
    font-size: 22px;
    text-align: center;
  }
  .logo-grid {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  /* 3. 로고 박스 크기 유연하게 (핵심!) */
  .logo-box,
  .logo-box2 {
    width: 100%; /* 고정값(200px) 대신 100% 사용 */
    max-width: 280px; /* 너무 커지지 않게만 제한 */
    height: 90px; /* 높이 살짝 조절 */
    padding: 10px; /* 내부 여백 줄임 */
    box-sizing: border-box;
  }

  /* 4. 협찬(2개짜리) 그리드 조절 */
  .logo-grid-double {
    grid-template-columns: 1fr 1fr; /* 2열 유지 */
    gap: 10px; /* 간격 좁힘 */
    width: 100%;
    max-width: 100%; /* 모바일 화면 너비에 맞춤 */
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 5. 이미지 크기 최적화 */
  .logo-img {
    max-width: 100%;
    height: auto;
    max-height: 70%; /* 박스 안에서 넘치지 않게 */
  }

  /* 푸터 */
  .footer-banner {
    padding: 25px 20px;
    text-align: left;
  }
  .footer-banner h2 {
    font-size: 32px;
    line-height: 1.3;
  }
  .footer-banner p {
    font-size: 14px;
    word-break: keep-all;
  }
  .btn-yellow {
    padding: 12px 24px;
    font-size: 14px;
  }

  .footer-info {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
    gap: 20px;
  }
  .footer-logo {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }
  .footer-links a {
    margin: 0;
    font-size: 14px;
  }
  .footer-details {
    text-align: center;
    font-size: 12px;
  }
  .footer-details p {
    margin-bottom: 5px;
  }

  /* =========================================
   스크롤 내렸을 때 (고정 헤더 축소 모드)
   ========================================= */
  /* 1. 불필요한 정보 숨기기 */
  .fixed-header.scrolled .info-group,
  .fixed-header.scrolled .mobile-nav-bar,
  .fixed-header.scrolled .top-nav,
  .fixed-header.scrolled .logo,
  .fixed-header.scrolled .header-top.container {
    display: none !important;
  }

  .fixed-header.scrolled .header-bottom {
    padding: 15px 20px 15px;
  }
}