/* === 1. 기본 및 전체 디자인 설정 === */
@import url("https://use.typekit.net/aky8hff.css");
:root {
    --primary-color: #0d47a1;
    --secondary-color: #1565c0;
    --text-color: #333;
    --text-light: #666;
    --background-light: #f8f9fa;
    --border-color: #e9ecef;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', 'Noto Sans KR', sans-serif; line-height: 1.7; color: var(--text-color); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { color: var(--secondary-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--primary-color); text-decoration: none; }
ul { list-style: none; }

/* === 2. PC 헤더 === */
.site-header { background: #fff; padding: 10px 0; position: sticky; top: 0; z-index: 999; border-bottom: 1px solid var(--border-color); }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.logo img { height: 55px; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions .action-link { font-size: 0.9em; color: var(--text-light); font-weight: 500; }

.btn.btn-primary { background-color: var(--secondary-color); color: white; padding: 6px 18px; border-radius: 20px; font-weight: 700; font-size: 0.9em; transition: background-color 0.3s ease; }
.btn.btn-primary:hover { background-color: var(--primary-color); text-decoration: none; }
.main-nav-pc > ul { display: flex; justify-content: space-between; align-items: center; }
.main-nav-pc li { position: relative; }
.main-nav-pc > ul > li > a { display: block; font-weight: 700; color: #555; padding: 5px; }
.main-nav-pc > ul > li > a:hover { color: var(--primary-color); }
.submenu-pc { position: absolute; top: 100%; left: -15px; background-color: #fff; border: 1px solid var(--border-color); box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 240px; padding: 10px; border-radius: 5px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
.main-nav-pc li:hover > .submenu-pc { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu-pc a { font-weight: 400; white-space: nowrap; display: block; padding: 8px 15px; border-radius: 4px; }
.submenu-pc a:hover { background-color: var(--background-light); }
.menu-toggle, .mobile-nav-panel, .page-overlay { display: none; }

/* === 3. 메인 콘텐츠 === */
.hero-main-section { 
    position: relative; 
    text-align: center; 
    color: white; 
	width: 100%;
    margin: 0 auto;
}
.hero-section { 
    position: relative; 
    text-align: center; 
    color: white; 
	max-width: 1170px;
	width: 100%;
    margin: 0 auto;
}
.hero-section img { 
    width: 100%; 
    height: 450px; 
    object-fit: cover; 
    filter: brightness(0.7);
}
.hero-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 47, 85, 0.7);
    padding: 2rem 3rem;
    border-radius: 5px;
    width: 90%; 
    max-width: 900px;
}

.hero-main {
	margin: 0 auto;
}

.hero-main .top{
	margin: 0 auto;
	margin-left: -220px;
}

.hero-main .mid{
	margin: 0 auto;
	margin-left: -220px;
}

.hero-main .btm{
	margin: 0 auto;
	margin-left: -220px;
}

.hero-text h1 { 
    font-size: 2.5rem; 
}
.hero-text p { 
    font-size: 1.25rem; 
    margin-top: 0.5rem; 
}

.index-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 47, 85, 0.7);
    padding: 2rem 3rem;
    border-radius: 5px;
    width: 90%; 
    max-width: 900px;
}
.index-text h1 { 
    font-size: 2.5rem; 
}
.index-text p { 
    font-size: 1.25rem; 
    margin-top: 0.5rem; 
}

.main-content { 
    padding: 60px 0; 
}
.content-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 50px; 
}
.primary-content h2, .primary-content h3 {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
	margin-left: -10px;
}
.primary-content p {
    margin-bottom: 20px;
    color: var(--text-light);
}
.topics-list {
    list-style-type: '• ';
    padding-left: 20px;
}
.topics-list li {
    margin-bottom: 8px;
    color: var(--text-light);
}

..topics-list-num {
    list-style-type: decimal;
    padding-left: 20px;
}

.sidebar .widget {
	margin-left:-10px;
    background: var(--background-light);
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    border-left: 4px solid var(--primary-color);
}
.sidebar .widget h3 {
    margin-top: 0;
	margin-left: -15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    font-size: 1.2rem;
}
.dates-list li { 
    margin-bottom: 10px;
    font-size: 0.95em;
}

.sponsors { 
    background: var(--background-light); 
    padding: 50px 0; 
    text-align: center;
    border-top: 1px solid var(--border-color);
}
.sponsors h3 { 
    color: #555;
    margin-bottom: 25px;
}
.sponsor-logos { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 50px; 
    flex-wrap: wrap; 
}
.sponsor-logos img { 
    height: 50px; 
    filter: grayscale(100%); 
    opacity: 0.7; 
    transition: all 0.3s; 
}
.sponsor-logos img:hover { 
    filter: grayscale(0%); 
    opacity: 1; 
}

.button-group {
  display: flex;
  gap: 20px;              
  justify-content: left;
  margin: 20px 0;
}

.custom-btn {
  display: flex;
  align-items: center;     
  justify-content: center; 
  width: 220px;            
  height: 80px;            
  background-color: #d7e0e7; 
  border-radius: 10px;     
  text-align: center;      
  color: #0a0a5a;          
  font-weight: bold;
  font-size: 16px;
  text-decoration: none; 
}

.custom-card {
  display: flex;
  flex-direction: column;   
  align-items: center;      
  justify-content: center;
  background-color: #10105e;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  width: 200px;
  height: 150px;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.3s;
}

.custom-card .icon {
  width: 60px;   
  height: 60px;  
  object-fit: contain;
  margin-bottom: 15px;
}

.custom-card:hover {
  background-color: #008cba;
}

.terms-box {
    padding: 17px;
    width: 100%;
    height: 400px;
    border: 3px solid #ddd;
    overflow-y: auto;
    font-size: 13px;
    line-height: 20px;
    color: #666;
    background-color: #fafafa;
}

.main-color {
	color: #10105e;
}

.sub-color {
	color: #008cba;
}



/* === 4. 푸터 === */
.site-footer { 
    background: #2c3e50; 
    color: #bdc3c7; 
    padding: 40px 0; 
    font-size: 0.95em; 
}
.site-footer a { 
    color: #ecf0f1; 
}
.site-footer .container { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 40px; 
}
.footer-info p { 
    margin-bottom: 8px; 
}
.footer-links h4 { 
    color: #fff; 
    margin-bottom: 15px; 
}
.footer-links li { 
    margin-bottom: 8px; 
}

.hero-swiper { 
	width: 100%; 
	height: 100%; 
	z-index: 10;
}
.swiper-slide img { 
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	filter: brightness(1); 
}

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 130px;
  z-index: 1;

  display: flex;
  flex-direction: column;    
  align-items: flex-start;    
  justify-content: center;    

  padding-left: 20px;
  padding-right: 20px;

  background: rgba(0, 47, 85, 0.7);
  color: #fff;

  width: 100%;
  max-width: none;
  border-radius: 0;
  transform: none;
  text-align: left;
  z-index: 10;
}

/* 메인 타이틀(가장 큼) */
.hero-text h1 { padding-left: 10px; margin: 0; line-height: 1.06; font-size: clamp(28px, 4.8vw, 48px); }
/* 서브 타이틀(중간) */
.hero-text h2 { margin: 0; line-height: 1.06; font-size: clamp(16px, 2.4vw, 24px); }
/* 상단 보조(작음) */
.hero-text h3 { margin: 0; line-height: 1.06; font-size: clamp(16px, 2.2vw, 24px); }
.hero-text .title {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-family: "myriad-pro", "Noto Sans KR",
               "Apple SD Gothic Neo", "Malgun Gothic",
               Arial, Helvetica, sans-serif;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    
  overflow: hidden;
  --lines: 3;               
  --lh: 1.12;               
  --vpad: 0px;              
  line-height: var(--lh);
  font-size: clamp(
    26px,
    calc((130px - var(--vpad)) / (var(--lines) * var(--lh))),
    64px
  );
}

.hero-font {
	font-family: "myriad-pro", "Noto Sans KR",
               "Apple SD Gothic Neo", "Malgun Gothic",
               Arial, Helvetica, sans-serif;
}


.swiper-pagination-bullet { 
	position: relative;
	z-index: 20;
	background-color: rgba(255, 255, 255, 0.7); 
	opacity: 1;
}
.swiper-pagination-bullet-active { 
	background-color: var(--primary-color);
}

.past-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 24px;
  height: 130px;

  display: flex;
  flex-direction: column;    
  align-items: flex-start;

  padding-left: 20px;
  padding-right: 20px;

  width: 100%;
  max-width: none;
  border-radius: 0;
  transform: none;
  text-align: left;
  z-index: 10;
}

/* 메인 타이틀(가장 큼) */
.past-title h1,h2,h3 { 
	margin: 0; 
	line-height: 1.06;
	font-family: "myriad-pro", "Noto Sans KR",
               "Apple SD Gothic Neo", "Malgun Gothic",
               Arial, Helvetica, sans-serif;
	padding: 10px;
}
.past-title .top {color: black;}
.past-title .mid {font-size: 50px; color: #10105e;}
.past-title .btm {color: #E21E79;}

.past-subtitle {
	margin-top: -60px;
	color: #008cba;
}

.top {color: #C4D700;}
.mid {}
.btm {color: #CCCCCC;}
/* 기존 배너
.hero-text { 
	position: absolute; 
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
	background: rgba(0, 47, 85, 0.7); 
	padding: 2rem 3rem; 
	border-radius: 5px; 
	width: 90%; 
	max-width: 900px; 
	z-index: 10; 
	color: white; 
}
.swiper-pagination-bullet { 
	background-color: rgba(255, 255, 255, 0.7); 
	opacity: 1; 
}
.swiper-pagination-bullet-active { 
	background-color: var(--primary-color); 
}*/


/* ================================================================
   --- 모바일 & 태블릿 화면 스타일 (1024px 이하) ---
================================================================ */
@media (max-width: 1024px) {
    .site-header { 
        padding: 0; 
    }
    .site-header .container {
        position: relative; /* [수정] 햄버거 버튼 위치의 기준점으로 설정 */
        height: 63px;
        padding: 5px 0; /* 로고의 상하 여백을 위해 유지 */
    }
    .header-actions, .main-nav-pc { 
        display: none; 
    }

    /* [수정] 햄버거 버튼을 헤더의 세로 중앙에 절대 위치로 고정 */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 20px; /* 오른쪽 끝에서 20px 안쪽 */
        transform: translateY(-50%); /* 세로 중앙 정렬 */
        width: 30px; 
        height: 20px;
        border: none; 
        background: transparent;
        cursor: pointer; 
        z-index: 1001;
    }

    .menu-toggle span { 
        display: block; 
        position: absolute; 
        width: 100%; 
        height: 2px; 
        background-color: #333; 
        transition: all 0.3s ease; 
        left: 0; 
    }
    .menu-toggle span:nth-child(1) { top: 0; }
    .menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .menu-toggle span:nth-child(3) { bottom: 0; }

    .page-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
    .mobile-nav-panel { display: block; width: 85%; max-width: 340px; height: 100%; position: fixed; top: 0; right: 0; background-color: #fff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transform: translateX(100%); transition: transform 0.4s ease; z-index: 1001; overflow-y: auto; }
    
    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open .page-overlay { opacity: 1; visibility: visible; }
    body.mobile-menu-open .mobile-nav-panel { transform: translateX(0); }

    .mobile-menu-close { display: block; position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background-color: var(--primary-color); border: none; border-radius: 4px; cursor: pointer; z-index: 10; }
    .mobile-menu-close::before, .mobile-menu-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background-color: white; }
    .mobile-menu-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .mobile-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

    .main-nav-mobile { 
		padding-top: 60px; 
	}
	.main-nav-mobile > ul > li { 
        position: relative; 
        border-bottom: 1px solid #f0f0f0; 
    }

	.main-nav-mobile > ul > li > a { 
		display: block; 
        padding: 8px 25px; 
        font-weight: 400; 
        font-size: 15px; 
        color: #333; 
	}
	.submenu-toggle { 
		position: absolute; 
        top: 0; 
        right: 0; 
        width: 50px; 
        height: 40px; 
        cursor: pointer; 
	}
	.submenu-toggle::before { 
		content: '+'; 
		position: absolute; 
		top: 50%; 
		left: 50%; 
		transform: translate(-50%, -50%); 
		font-size: 22px; 
		font-weight: 300; 
		color: #888; 
		transition: transform 0.3s ease; 
	}
	.submenu-open > .submenu-toggle::before { 
		transform: translate(-50%, -50%) rotate(45deg); 
	}

	.submenu-mobile { 
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.35s ease-in-out; 
        background-color: #fff; /* 배경색을 흰색으로 변경 */
    }

	.submenu-mobile li {
        border-bottom: none;
    }

    .submenu-open > .submenu-mobile { 
        max-height: 500px; 
    }
	
    .submenu-mobile a { 
        padding: 1px 25px 2px 40px; 
        font-size: 14px; 
        font-weight: 400; 
        color: var(--text-light); 
        display: block; 
        border-top: none; /* 구분선 제거 */
    }

	.content-grid { grid-template-columns: 1fr; }
    .site-footer .container { grid-template-columns: 1fr; }
	.hero-text {
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
    .hero-text h1 { font-size: 0.5rem; }
    .hero-text h2 { font-size: 1rem; }

	.past-title .top {color: black; font-size: 1.8rem }
	.past-title .mid {color: #10105e; font-size: 1.8rem}
	.past-title .btm {color: #E21E79; font-size: 1.8rem}

	.custom-btn {
	  display: flex;
	  align-items: center;     
	  justify-content: center; 
	  width: 170px;            
	  height: 80px;            
	  background-color: #d7e0e7; 
	  border-radius: 10px;     
	  text-align: center;      
	  color: #0a0a5a;          
	  font-weight: bold;
	  font-size: 16px;
	  text-decoration: none; 
	}

	.custom-card {
	  display: flex;
	  flex-direction: column;   
	  align-items: center;      
	  justify-content: center;
	  background-color: #10105e;
	  color: white;
	  text-decoration: none;
	  border-radius: 10px;
	  width: 170px;
	  height: 150px;
	  font-size: 16px;
	  font-weight: 500;
	  transition: background 0.3s;
	}

	.hero-text {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: auto;
	  height: 130px;

	  display: flex;
	  flex-direction: column;    
	  align-items: flex-start;    
	  justify-content: center;    

	  padding-left: 20px;
	  padding-right: 20px;

	  background: rgba(0, 47, 85, 0.7);
	  color: #fff;

	  width: 100%;
	  max-width: none;
	  border-radius: 0;
	  transform: none;
	  text-align: left;
	  z-index: 10;
	  white-space: normal;
	}
	.hero-main {
		margin-bottom: 100px;
	}
	.index-text {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: auto;
	  height: 130px;

	  display: flex;
	  flex-direction: column;    
	  align-items: flex-start;    
	  justify-content: center;    

	  padding-left: 20px;
	  padding-right: 20px;

	  background: rgba(0, 47, 85, 0.7);
	  color: #fff;

	  width: 100%;
	  max-width: none;
	  border-radius: 0;
	  transform: none;
	  text-align: left;
	  z-index: 10;
	  white-space: normal;
	}
	.index-text .top {font-size: 15px;}
	.index-text .mid {font-size: 25px;}
	.index-text .btm {font-size: 15px;}

	.swiper-slide img { 
		width: 100%; 
		height: 100%; 
		object-fit: cover; 
		filter: brightness(1); 
	}

	.site-header { 
		background: #fff; 
		padding: 10px 0; 
		position: sticky; 
		top: 0; 
		z-index: 999; 
		border-bottom: 1px solid var(--border-color); 
	}

	.header-top img { margin-left: 10px }

	.hero-main {
		margin-bottom: 30px;
	}

	.hero-main .top{
	margin: 0 auto;
	}

	.hero-main .mid{
		margin: 0 auto;
	}

	.hero-main .btm{
		margin: 0 auto;
	}

	.past-title .top {font-size: 21px; color: black;}
	.past-title .mid {font-size: 30px; color: #10105e;}
	.past-title .btm {font-size: 20px; color: #E21E79;}
	
}


/* ================================================================
   --- 작은 모바일 화면 스타일 (768px 이하) ---
================================================================ */
@media (max-width: 768px) {
    /* --- 히어로 섹션 높이 조정 --- */
	.hero-main-section {
		height: 350px;
	}
    .hero-section {
        height: 350px;
    }

    /* --- 히어로 텍스트 스타일 조정 --- */
    .hero-text {
        padding: 1.5rem;
    }
    .hero-text h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .hero-text p {
        font-size: 1rem;
    }

    /* --- 기타 콘텐츠 --- */
    h2 { 
        font-size: 1.8rem; 
    }


	/* ============ 모바일 메뉴 하단 버튼 스타일 (흰색 배경) ============ */
	/* --- 버튼들을 감싸는 전체 컨테이너 --- */
	.mobile-nav-actions {
		padding: 20px 25px !important;
		margin-top: 10px !important;
		border-top: 5px solid #f0f0f0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		margin-bottom: -10px !important; /* 버튼 섹션 아래 여백을 15px로 설정합니다. */
	}

	/* --- Log-in, Sign Up을 묶는 가로 그룹 --- */
	.btn-group {
		display: flex !important;
		gap: 10px !important;
	}

	/* --- 모든 버튼의 공통 스타일 (흰색 배경 스타일) --- */
	.action-btn {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 6px 15px !important;
		height: auto !important;

		/* ★ 스타일 변경: 연한 하늘색 배경, 파란 글씨, 회색 테두리 */
		background-color: #f0f7ff !important; /* 매우 연한 하늘색 배경 */
		color: var(--primary-color) !important;      /* 기본 파란색 글씨 */
		border: 1px solid #dde6f0 !important;      /* 배경보다 약간 진한 테두리 */
		border-radius: 6px !important;

		font-size: 14px !important;
		font-weight: 500 !important;
		text-align: center !important;
		text-decoration: none !important;
		transition: all 0.2s !important;
	}


	/* --- 가로 그룹 안의 버튼 너비 강제 설정 --- */
	.btn-group .action-btn {
		flex: 1 !important;
		width: 50% !important;
	}

	/* ★ 마우스를 올렸을 때 효과 변경 */
	.action-btn:hover {
		background-color: #e2eefd !important; /* 마우스 올리면 조금 더 진한 하늘색 */
		border-color: var(--secondary-color) !important;   /* 파란색 테두리 */
		color: var(--primary-color) !important;
	}

}