@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body{margin:0;padding:0;font-family: 'Pretendard-Regular';}
html { scroll-behavior: smooth; font-size:16px;}
header { background: #fff; padding: 20px; text-align: center; }
input,button{font-family: 'Pretendard-Regular';}
nav { position: sticky; top: 0; background: #222; z-index: 999; display: flex; justify-content: center; }
nav a { color: #fff; padding: 15px 20px; text-decoration: none; display: inline-block; }
nav a:hover { background: #444; }
.bold{font-weight:bold}
h2{font-size:3rem;font-weight:bold;padding-bottom:20px;}
h3{font-size:1.2rem;}
h3,p{margin:0.7rem 0 0 0;line-height:130%;word-break:keep-all}


/* 체크박스 기본 디자인 */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #888;
    border-radius: 0px;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    position: relative;
}

/* 체크된 상태 */
input[type="checkbox"]:checked {
    background-color: #1B3F79; /* 파란색 */
    border-color: #1B3F79;
}

/* 체크 아이콘 (✔) */
input[type="checkbox"]:checked::after {
    content: '✔';
    color: white;
    font-size: 12px;
	font-weight:900;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* 정확히 중앙 정렬 */
}

/* 기본스타일을 없애고, 버튼모양을 구현한다.*/
input[type='radio'] {
  -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
  -moz-appearance: none; /*모질라 브라우저에서 기본 스타일 제거 */
  appearance: none; /* 기본 브라우저에서 기본 스타일 제거*/
  width: 14px;
  height: 14px;
  border: 3px solid #fff; /* 체크되지 않았을 때의 테두리 색상*/
  border-radius: 50%;
  outline: none; /* focus 시에 나타나는 기본 스타일 제거*/
  cursor: pointer;
    vertical-align: middle;
    margin-bottom: 2px;
}

/* 체크될 시에, 변화되는 스타일 설정*/
input[type='radio']:checked {
  background-color: #fff; /* 체크 시 내부 원으로 표시될 색상*/
  border: 4.5px solid #fff; /* 테두리가 아닌, 테두리와 원 사이의 색상*/
  box-shadow: 0 0 0 2px #fff; /* 얘가 테두리가 됨*/
  /* 그림자로 테두리를 직접 만들어야 함 (퍼지는 정도를 0으로 주면 테두리처럼 보입니다.)*/
  /* 그림자가 없으면 그냥 설정한 색상이 꽉 찬 원으로만 나옵니다.*/
}


.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(22, 22, 22, 0.7);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transition: transform 0.3s ease; /* 부드러운 애니메이션 */
}

/* 숨김 상태 */
.navbar.hidden {
  transform: translateY(-100%);
}
.navbar .inner {
  width: 100%;
  margin:0 auto;
  max-width:1920px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  min-height:40px;
}
.navbar img.logo {  height: 40px;  margin-left:20px;}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;     /* ★ 추가 */
  gap: 10px;
  padding-right:20px;
}

.navbar ul li {  white-space: nowrap;   /* ★ 메뉴 줄바꿈 방지 */}

.navbar ul li a {
  position: relative;
  text-decoration: none;
  font-size:1.1rem;
  color: #fff;
  padding: 8px 10px;
  transition: all 0.5s ease-in-out;
}


.navbar ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 2px;
  background-color: #FFD700;
  transition: width 0.5s ease;
}

.navbar ul li a:hover::after {
  width: 100%;
}

.navbar ul li a:hover {
  color: #FFD700;
}

section { scroll-margin-top: 60px;padding: 60px 0 40px 0;text-align:center;width:100%; border-bottom: 1px solid #ccc;margin:0 auto;}
section p{font-size:1.2rem; color:#444;}	
section .inner{max-width:800px; margin:0 auto; text-align:center;}
footer { color: #333; padding: 20px 0; text-align: center; text-align:left;max-width:1100px;margin:0 auto;}

.section_inner{width:100%;max-width:1200px;text-align:center;margin:0 auto;}
#title {padding: 80px 0 40px 0;text-align:center;width:100%;}
#title .title_img{max-width:95%;margin:0 auto;}
#greeting {background:#f9f9f9;}
#greeting .greeting_img{max-width:95%;margin: auto;}
#agenda{}
#agenda .agenda_img{max-width:95%;margin:0.5rem auto;}
#register-info{padding:60px 10px; color:#222;} 
#register-info .section_inner{color:#222;}
#register-info .point_txt{color:#fd7e14;}
#register-info .btn_group{margin: 30px 0; text-align: center;}
#register-info .btn_wrap{text-align:center; margin-top:2rem}
#register-info .chk_txt{margin:0 auto; margin-bottom:2rem; font-size:1.2rem;}
#register-info .privacy-box{text-align:left;  grid-column: span 2;width:100%;}
#register-info .privacy-box h4{margin-top:0.5rem;}
#register-info .privacy-box .privacy_text{ font-size:0.9rem;line-height:120%; color:#444;width: 100%;height:70px;overflow-y:scroll;padding: 0.3rem;box-sizing: border-box; border: 1px solid #999;border-radius: 4px; background:#fcfcfc;}
#register-info .agree_label{display:flex;justify-content:left;align-items:center;font-size:0.9em;cursor:pointer;margin-top:0.7rem;}
#location{padding-bottom:0}
#location .map_area{width:100%; height:400px;margin:0 auto;margin-top:1rem;}
#product {padding: 60px 0;}
#product .product_img{max-width:90%;margin: auto;}
#contact {color:#fff}
#contact .contact_info{display:flex;justify-content:center;align-items:center;margin-top:2rem;}
#contact .contact_info .contact_part{display:flex;justify-content:center;align-items:center;padding:0 10px;gap:5px;}
#contact p{ color:#f9f9f9}
#contact h3{ color:#fff}
#footer {padding: 10px 0;}
#footer .footer_inner{width:100%;max-width:1000px;text-align:left;margin:0 auto;}
#footer .footer_img{width:80%;max-width:700px;margin-left:1rem;}
#footer .approval{font-size:0.7em;color:#999;margin-left:1rem;}
 
/* 2열 그리드 레이아웃 */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
}

/* 각 필드 항목 박스 */
.reg-item {
  display: flex;
  flex-direction: column;
}

/* 2칸 차지하는 항목 (예: radio, checkbox) */
.col-span-2 {
  grid-column: span 2;
}

/* 라벨 스타일 */
.reg-grid label {
  margin: 0 0 0.5rem 0.3rem;
  font-size: 1.1rem;
  color: #222;
}

/* input, select, textarea 공통 스타일 */
.reg-grid input[type="text"],
.reg-grid input[type="email"],
.reg-grid input[type="tel"],
.reg-grid input[type="file"],
.reg-grid select,
.reg-grid textarea {
	height:3rem;
  color:#222;
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 4px;
  background:#fff;
  vertical-align:middle;
}
.reg-grid input[type="radio"],
.reg-grid input[type="checkbox"]{
  margin-left:10px;
  cursor:pointer;
  /*transform: scale(1.0);  1.0 = 기본 크기, 1.5 = 150% */
}

.reg-grid input:focus,
.reg-grid textarea:focus{
	outline:1px solid #777;	
    border: 1px solid #777;	
}
.reg-grid input[type="text"]::placeholder,
.reg-grid input[type="email"]::placeholder,
.reg-grid input[type="tel"]::placeholder,
.reg-grid textarea::placeholder {
	font-size:0.9rem;
	color:#999;	
    vertical-align:middle;
}

.radio{
  cursor:pointer;
}
/* radio/checkbox 그룹 가로 정렬 */
.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 수직 배열 전용 */
.radio-group-vertical,
.checkbox-group-vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* 각 radio/checkbox 항목 */
.radio-group label,
.checkbox-group label {
  white-space: nowrap;
  color: #222;
  font-size: 0.95rem;
  cursor:pointer;
  vertical-align:baseline;
}

.field-desc {
    margin: 6px 0 0 5px;
    font-size: 0.85em;
	line-height:1rem;
    color: #eee;
}
/* 버튼 스타일 */
.submit-btn {
  padding: 10px 25px;
  font-size: 1.2rem;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.submit-btn:hover {
}

.reg-btn {
    padding: 12px 24px;
    border:0;
    border-radius: 3px;
    font-size: 16px;
	color:#fff;
    cursor: not-allowed;
}
.reg-btn.active {
    cursor: pointer;
}

.reg-form-container{
	margin: 0px auto;
	max-width:800px;
	background:#fafafa;
	border:1px solid#ccc;
	border-radius: 5px;
	padding:20px;
	overflow: hidden;
	/*max-height: 0;
	opacity: 0;*/
	transition: max-height 0.7s ease, opacity 0.9s ease;
}
.reg-form-container.show {
  max-height: 100%; /* 충분히 큰 값으로 설정 */
  opacity: 1;
}



/* 등록확인 박스 영역 */
#regCheckContainer {
	max-width:800px;
	background:#fafafa;
	border:1px solid#ccc;
  padding: 30px 20px;
  margin-top: 20px;
  border-radius: 3px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.7s ease, opacity 0.9s ease;
}

#regCheckContainer.show {
  max-height: 100%; /* 충분히 큰 값으로 설정 */
  opacity: 1;
}

/* 등록확인 제출 버튼 */
#regCheckContainer .submit-btn {
  margin-top:1rem;
}

#regCheckContainer .check-btn:hover {
}