/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Outfit:wght@100..900&family=Protest+Riot&display=swap');

/* font-family: "Noto Sans KR", sans-serif; */
/* font-family: "Outfit", sans-serif; */

@font-face {
    font-family: 'Ria';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafetyNotification';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
	font-family: "Noto Sans KR", sans-serif; 
	font-weight: 400;
}

ol, ul {
    list-style: none
}

blockquote,
q {
    quotes: '"' '"'
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

address {
    font-style: normal
}

textarea {
    width: 100%;
    resize: none;
}

button, img, input, select {
    vertical-align: middle
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1;
}

.ellipsis {
	display:inline-block;
	max-width:100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: normal;
	vertical-align:middle
}

table td a {
    overflow: hidden;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

body, html {
	overflow-x:hidden;
}

body {
	color:#353535;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	-webkit-user-drag: none;
}

::selection {
   background: #d99b71;
   color: #fff
}

::-moz-selection {
   background: #d99b71;
   color: #fff
}

::-webkit-selection {
    background: #d99b71;
   color: #fff
}

area {
    cursor: pointer;
}

button {
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;
}

.rel {
    position: relative;
}

.font_outfit {
	font-family: "Outfit", sans-serif; 
}

.container {
    max-width: 1920px;
    margin: auto;
}

.section .inner {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

.section.main {
	background-image: url('/PROJECT_HTML/폴더이름/img/section01_bg_new.jpg?new');
	background-size: cover;
	background-position: center;
	height: 1088px;
	padding-top: 72px;
	overflow: hidden;
}


.section dl {
	display: flex;
	justify-content: center;
	margin: auto;
	color: #09003e;
	margin-bottom: 4px;
}

.section dl:last-of-type {
	margin-bottom: 0;
}

.section dt {
	padding-right: 3px;
}

.section.sns {
	padding: 100px 0 75px;
	background-color: #1d170d;
}

.footer {
	background-color: #1d170d;
	padding-bottom: 100px;
}

.footer .info {
	color: #fff;
	margin-top: 30px;
}

.video_wrap {
  position: relative;
  width: 600px;
  margin: auto;
  margin-top: 68px;
  padding-bottom: 58.15%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 20px;
  border: 2px solid #000;
}

.video_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
}

/* 오버레이 (팝업) */
.b_popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  overflow: auto;
  display: none; /* 기본 숨김 */
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}

.b_popup.is-open { display: flex; } /* 열릴 때 flex */

.b_popup_inner {
  position: relative;
  width: min(680px, 100%);
  border-radius: 12px;
  max-height: calc(100svh - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.b_popup_title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
    font-size: 36px;
	
}

.b_popup_title span {
    font-family: 'Ria';
    font-weight: 900;
}

.b_popup_title .btn_close_popup {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 40px;
    color: #999;
    background: transparent;
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.b_popup_content  .form_group {
    display: flex;
    align-items: center;
	overflow: hidden;
	border-bottom: 1px solid #000;
}

.b_popup_content .form_group:first-of-type {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	
}

.b_popup_content .form_group:nth-of-type(3) {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border: none;
}

.b_popup_content  .form_group label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 166px;
    height: 60px;
    font-size: 24px;
    background-color: #7e4400;
    color: #fff;
	font-family: 'SchoolSafetyNotification';
}

.b_popup_content .form_group input {
    width: 514px;
    height: 60px;
    padding: 0 12px;
    font-size: 24px;
    border-radius: 0px;
    border: none;
    outline: none; 
	font-family: 'SchoolSafetyNotification';
	background-color: #fff;
}

.b_popup_content .form_group input::placeholder {
	font-size: 20px;
}

.b_popup_content .form_group:has(textarea) {
	align-items: stretch;
}

.b_popup_content .form_group textarea {
	flex: 1;
	min-width: 0;
	width: auto;
	height: 120px;
	padding: 14px 12px;
	font-size: 20px;
	border: none;
	outline: none;
	background-color: #fff;
	font-family: 'SchoolSafetyNotification';
	resize: none;
	display: block;
	line-height: 1.4;
}
.b_popup_content .form_group textarea::placeholder {
	font-size: 18px;
	color: #b3b3b3;
}

.b_popup_content .pharases {
    padding: 0 12px 12px;
}

.b_popup_content dl {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.b_popup_content dl dt {
    padding-right: 3px;
}

.b_popup .term_zone .term {
    height: 280px;
    background-color: #fff;
    padding: 24px;
    font-size: 18px;
    margin-bottom: 12px;
	border-radius: 20px;
	margin-top: 40px;
}

.b_popup .term_zone .term .inner {
	height: 100%;
    overflow-y: scroll;
}

.b_popup .term_zone .term .h5 {
	font-weight: 900;
	margin-bottom: 8px;
}

.b_popup .term_zone .term .h6 {
	margin-bottom: 4px;
}

.b_popup .term_zone .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    gap: 8px;
	color: #fff;
}

.b_popup .term_zone .agree input + label {
    cursor: pointer;
}

.b_popup .term_zone .agree input {
    appearance: none;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
}

.b_popup .term_zone .agree input::after {
    content:'';
    display: none;
    width: 12px;
    height: 12px;
    background-color: #d99b71;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.b_popup .term_zone .agree input:checked::after {
    display: inline-block;
}

/* ==============================================
   FILE LABEL - 흰 영역(파일명) + 검정 파일선택 버튼
   ============================================== */
.b_popup_content .form_group label.file_label {
	max-width: none;
	width: auto;
	flex: 1;
	min-width: 0;
	height: 60px;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: pointer;
	background-color: #fff;
	padding: 0;
	font-size: 16px;
	color: #888;
	overflow: hidden;
}
.b_popup_content .form_group label.file_label .file-name {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 0 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	color: #888;
	background-color: #fff;
}
.b_popup_content .form_group label.file_label.has-file .file-name {
	color: #1f1f1f;
	font-weight: 700;
}
.b_popup_content .form_group label.file_label::after {
	content: '파일선택';
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1f1f1f;
	color: #fff;
	height: 100%;
	padding: 0 22px;
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	font-family: 'SchoolSafetyNotification';
	flex-shrink: 0;
	cursor: pointer;
}

.b_popup .btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.b_popup .btn_box button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 70px;
    background-color: #fff;
    color: #000;
    font-size: 25px;
	cursor: pointer;
	border-radius: 15px;
	font-family: 'Ria';
	font-weight: 900;
}

.b_popup .btn_box button.confirm_btn {
    background-color: #9f010a;
	color: #fff;
}

.quick_bar.pc {
	position: fixed;
	margin-left: 836px;
	z-index: 50;
}

.quick_bar.mo {
	display: none;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 50;
}

.notice_table {
	width: 100%;
	margin-top: 40px;
	font-size: 14px;
}

.notice_table.mo {
	display: none;
}

.notice_table * {
	font-family: 'NanumSquareNeo';
	font-weight: 600;
}

.notice_table th,
.notice_table td {
	padding: 12px;
}

.notice_table th {
	background-color: #002046;
	color: #fff;
}

.notice_table td {
	border-bottom: 1px solid #002046;
	background-color: #fff;
}

.notice_table td span {
	border-radius: 4px;
	background-color: #002046;
	padding: 4px 8px;
	color: #fff;
	font-size: 12px;
}

.notice_table td span.notice_ticket {
	background-color: #FF8A5D !important;
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
}

.notice_table td span.complete {
	background-color: #FF6E44;
}

.notice_w_table {
	width: 100%;
	border-top: 2px solid #002046;
}

.notice_w_table th {
	border-bottom: 1px solid #f5f5f5;
	width: 200px;
}

.notice_w_table input,
.notice_w_table textarea {
	width: 100%;
	padding: 12px;
	font-size: 16px;
}

.notice_w_table textarea {
	height: 250px;
	resize: none;
}

.notice_w_table input {
	height: 40px;
	border: 1px solid #002046;
}

.notice_view td {
	text-align: left;
	background-color: #fff;
}

.notice_view td.fl {
	font-weight: 400;
}

.password_wrap {
	position: relative;
}

.password_wrap input {
  width: 100%;
  padding-right: 40px; /* 아이콘 자리 */
  box-sizing: border-box;
}

.pw input {
	height: 40px;
	border: 1px solid #002046;
	font-size: 16px;
	padding: 0 12px;
}

.password_wrap .toggle_pw {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagenation {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pagenation span,
.pagenation button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid #002046;
	background-color: #002046;
	color: #fff;
	font-family: 'NanumSquareNeo';
	font-weight: 600;
	cursor: pointer;
}

.pagenation span.active {
	background-color: #FF6E44;
	border-color: #FF6E44;
}

@media(max-width: 1600px) {
	.quick_bar.pc {
		margin-left: 0;
		right: 16px;
	}
}

@media(max-width: 991px) {
	.quick_bar.pc {
		display: none;
	}
	
	.quick_bar.mo {
		display: block;
	}
	
	.section.sns {
		padding-bottom: 120px;
	}
	
	.footer {
		padding: 100px 0;
	}
}

@media(max-width: 750px) {

	.video_wrap {
		
	}
	
	.video_wrap iframe {
		
	}
	
	.section_phara {
		padding: 7.89vw 2.8vw;
	}
	
	.section_phara dl {
		font-size: 3.2vw;
		word-break: keep-all;
	}
	
	.section.sns {
		padding: 13.6vw 2.8vw 24vw;
	}
	
	.footer {
		padding: 8vw 0;
	}
	
	.footer .logo img {
		width: 36vw;
	}
	
	.footer .info {
		margin-top: 4vw;
		font-size: 3.2vw;
	}
	
	.b_popup_title {
		font-size: 4.8vw;
		line-height: 1.3;
    }
	
	.b_popup_content {
		padding: 6vw;
	}
    
    .b_popup_content .form_group label {
        width: 32.13vw;
        height: 40px;
        font-size: 3.2vw;
    }
    
    .b_popup_content .form_group input {
        width: 58.53vw;
        padding: 1.6vw;
        height: 40px;
        font-size: 16px;
    }
    
    .b_popup_content .form_group input::placeholder {
        font-size: 2.53vw;
    }
	
	.b_popup_content .form_group textarea {
		width: 58.53vw;
		min-height: 22vw;
		height: 22vw;
		padding: 2.13vw;
		font-size: 16px;
		line-height: 1.4;
	}

	.b_popup_content .form_group textarea::placeholder {
		font-size: 3vw;
	}
	
	.b_popup_content .form_group:first-of-type {
		border-top-left-radius: 3.2vw;
		border-top-right-radius: 3.2vw;
	}

	.b_popup_content .form_group:nth-of-type(3) {
		border-bottom-left-radius: 3.2vw;
		border-bottom-right-radius: 3.2vw;
	}
   
    .b_popup_content .pharases {
        padding: 0 1.6vw 1.6vw;
        font-size: 2.4vw;
    }
    
    .b_popup .term_zone .term {
        height: 24vw;
        padding: 3.2vw;
        margin-bottom: 1.6vw;
        font-size: 2.4vw;
		border-radius: 3.2vw;
    }
	
	.b_popup .term_zone .term .h5 {
		margin-bottom: 8px;
	}

	.b_popup .term_zone .term .h6 {
		margin-bottom: 4px;
	}
    
    .b_popup .term_zone .agree {
        display: block;
        font-size: 3.2vw;
        gap: 1.07vw;
        text-align: center;
    }
    
    .b_popup .term_zone .agree > span:first-child {
        display: block;
        margin-bottom: 2vw;
        text-align: center;
    }
    
    .b_popup .term_zone .agree > span:nth-child(2) {
        margin-right: 1.6vw;
    }
    
    .b_popup .term_zone .agree input {
        width: 3.6vw;
        height: 3.6vw;
    }
    
    .b_popup .term_zone .agree input::after {
        width: 2vw;
        height: 2vw;
    }
    
    .b_popup .btn_box {
        gap: 3.33vw;
		margin-top: 5.22vw;
    }
    
    .b_popup .btn_box button {
        width: 42.67vw;
        height: 12vw;
        margin-top: 1.6vw;
        font-size: 4.33vw;
		border-radius: 3.2vw;
    }
	
	.notice_table.pc {
		display: none;
	}

	.notice_table.mo {
		display: block;
	}

	.pagenation {
		margin-top: 8vw;
		gap: 2vw;
	}

	.pagenation span,
	.pagenation button {
		font-size: 2.87vw;
		width: 6.27vw;
		height: 6.27vw;
	}

	.notice_table.mo {
		width: 100%;
		border-top: 2px solid #0d3462;
	}

	.notice_table.mo li {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 2vw;
		gap: 2vw;
		border-bottom: 1px solid #0d3462;
		font-size: 3.2vw;
	}

	.notice_table.mo li .no {
		width: 8vw;
	}

	.notice_table.mo li .title {
		font-size: 4vw;
		margin-bottom: 1.2vw;
		font-weight: 900;
		color: #000;
	}

	.notice_table.mo li .con {
		width: 76vw;
		text-align: left;
	}

	.notice_table.mo li .con .flex {
		display: flex;
		align-items: center;
		gap: 2vw;
	}

	.notice_table.mo li .con .flex .date {
		border-left: 1px solid #999;
		padding-left: 2vw;
	}

	.notice_table.mo li .answer {
		width: 20vw;
	}

	.notice_table.mo li .answer span {
		border-radius: 0.8vw;
		background-color: #002046;
		padding: 1.2vw 1.6vw;
		color: #fff;
		font-size: 3.2vw;
	}

	.notice_table.mo li .answer span.complete {
		background-color: #FF6E44;
	}

	.notice_w_table {
		font-size: 3.2vw;
	}

	.notice_w_table th {
		width: 24vw;
	}

	.section.notice .btn_box {
		margin-top: 15px;
	}

	.section.notice .btn_box .btn {
		font-size: 14px;
	}
	
	.b_popup#popup03 .btn_box .btn,
	.section.notice .btn_box .btn.big {
		width: 200px;
		height: 50px;
		font-size: 16px;
	}
}

/* 2026 풍기인삼축제: PSD 1920 × 4776 기준. 기존 공통 스타일 아래에 보완. */
:root { --festival-navy: #04355e; --festival-orange: #b64d19; --festival-coral: #e3856c; }
.festival-page { --u: min(1px, 0.0520833333vw); width: 100%; background: #242424; }
.festival-page img { display: block; height: auto; }
.festival-page .section > .inner { width: calc(750 * var(--u)); max-width: calc(100% - 32px); }
.festival-page a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #ff9b2f; outline-offset: 4px;
}
.festival-page .section.main {
    height: auto; padding: calc(35 * var(--u)) 0 calc(82 * var(--u));
    background: #509d94 url('../img/main_bg.jpg') center top / 100% 100% no-repeat;
    overflow: hidden;
}
.main .inner { display: flex; flex-direction: column; align-items: center; }
.main .top-logo { width: calc(344 * var(--u)); }
.main-slogan { width: calc(416 * var(--u)); margin-top: calc(18 * var(--u)); }
.main-heading { width: calc(572 * var(--u)); margin-top: calc(2 * var(--u)); }
.main-description { width: calc(446 * var(--u)); margin-top: calc(14 * var(--u)); }
.main-info { width: calc(556 * var(--u)); margin-top: calc(40 * var(--u)); }
/* 잘라낸 PNG의 중앙과 PSD의 원래 x 좌표 차이를 보정합니다. */
.main-slogan { position: relative; left: calc(-7 * var(--u)); }
.main-heading, .main-info { position: relative; left: calc(-2 * var(--u)); }
.main-description { position: relative; left: calc(-1 * var(--u)); }
.insta-scene { position: relative; width: calc(556 * var(--u)); margin-top: calc(13 * var(--u)); }
.insta-scene { left: calc(-1 * var(--u)); }
.insta-frame { width: 100%; }
/* PSD 프레임 (681,680); 말풍선 (688,921), (1186,1030). 겹치는 장식만 절대 배치. */
.insta-scene .heart { position: absolute; width: 14.0288%; pointer-events: none; animation: heart-float 3.8s ease-in-out 1.4s infinite; }
.heart-left { left: 1.259%; top: 34.827%; }
.heart-right { left: 90.827%; top: 50.578%; animation-delay: 2s !important; }
.main .video_zone { width: calc(683 * var(--u)); margin-top: calc(42 * var(--u)); }
.festival-page .video_wrap {
    display: grid; width: 100%; height: auto; padding: 0; margin: 0;
    aspect-ratio: 683 / 386; border: 0; border-radius: calc(10 * var(--u));
    overflow: hidden; background: #ab7375; box-shadow: 0 3px 5px #244c493d;
}
.video-poster { grid-area: 1 / 1; width: 100%; }
.video-poster img { width: 100%; }
.festival-page .video_wrap iframe {
    position: static; grid-area: 1 / 1; align-self: center; justify-self: center;
    width: 95.6%; height: auto; aspect-ratio: 634 / 356; border-radius: 0; border: 0;
}
.video-status { grid-area: 1 / 1; z-index: 1; align-self: end; justify-self: center; margin-bottom: 5%; padding: 5px 12px; border-radius: 3px; background: #08172ad9; color: #fff; font-size: clamp(12px, 1vw, 16px); pointer-events: none; }
.video-status[hidden] { display: none; }
.event-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(19 * var(--u)); width: calc(679 * var(--u)); margin: calc(40 * var(--u)) auto 0; }
.event-actions a { display: block; border-radius: calc(18 * var(--u)); transition: transform .25s, filter .25s; }
.event-actions img { width: 100%; }
@media (hover: hover) {
    .event-actions a:hover { transform: translateY(-5px) rotate(-1deg); filter: brightness(1.08); }
    .event-actions a:nth-child(2):hover { transform: translateY(-5px) rotate(1deg); }
}
.event-actions a:active { transform: translateY(3px); }
/* PSD 플로팅 (1477,184), floating_pc_v2 188 × 544. 버튼 경계 y=148,291,434. */
.festival-page .quick_bar.pc { position: fixed; top: calc(184 * var(--u)); left: calc(50% + 517 * var(--u)); right: auto; margin: 0; width: calc(188 * var(--u)); z-index: 50; }
.quick_bar.pc img { width: 100%; }
.quick_bar.pc a { position: absolute; left: 0; width: 100%; }
.quick-festival { top: 0; height: 27.2059%; }
.quick-instagram { top: 27.2059%; height: 26.2868%; }
.quick-apply { top: 53.4926%; height: 26.2868%; }
.quick-inquiry { top: 79.7794%; height: 20.2206%; }
.quick_bar a:focus-visible, .sns-links a:focus-visible { outline-offset: -3px; background: #fff2; }
.festival-page .section_02 { background: var(--festival-coral); padding-top: calc(60 * var(--u)); overflow: hidden; }
.event-heading, .event-steps, .event-prizes { width: calc(700 * var(--u)); max-width: 100%; margin-inline: auto; }
.event-heading img, .event-steps img, .event-prizes img { width: 100%; }
.event-steps { margin-top: calc(24 * var(--u)); }
.event-prizes { margin-top: calc(18 * var(--u)); }
.section_02 .event-actions { margin-top: calc(20 * var(--u)); }
.event-gifts { width: calc(722 * var(--u)); margin: calc(76 * var(--u)) auto 0; }
.event-gifts img { width: 100%; transform-origin: center bottom; }
.festival-page .section_phara { background: #232323; padding: calc(70 * var(--u)) 0; }
.festival-page .section_phara .inner { width: calc(680 * var(--u)); text-align: left; color: #e1e1e1; font-size: max(12px, calc(16 * var(--u))); line-height: 1.8; word-break: keep-all; }
.festival-page .section.sns { background: #5a3a3b; padding: calc(50 * var(--u)) 0; }
/* PSD SNS 원의 x=703,810,918,1025,1131, 각 지름 84. PNG 여백 포함 510 × 88. */
.festival-page .sns .sns-links { position: relative; width: calc(510 * var(--u)); max-width: calc(100% - 48px); }
.sns-links img { width: 100%; }
.sns-links a { position: absolute; top: 0; width: 16.47%; height: 100%; border-radius: 50%; transition: background .2s, box-shadow .2s; }
.sns-home { left: 0; }.sns-youtube { left: 20.98%; }.sns-instagram { left: 42.157%; }.sns-blog { left: 63.137%; }.sns-facebook { left: 83.53%; }
.sns-links a:hover { background: #fff2; box-shadow: 0 0 0 4px #ffffff30; }
.festival-page .footer { background: #232323; padding: calc(60 * var(--u)) 16px; }
.festival-page .footer .logo img { width: calc(406 * var(--u)); max-width: 100%; margin-inline: auto; }
.festival-page .footer .info { margin-top: calc(28 * var(--u)); color: #ddd; font-size: max(12px, calc(16 * var(--u))); line-height: 1.6; }
/* 모바일 플로팅: 이미지 없이 5칸 균등 분할. 색상은 floating 이미지와 동일. */
.festival-page .quick_bar.mo { display: none; width: min(750px, 100%); padding-bottom: env(safe-area-inset-bottom, 0px); background: #003669; }
.quick_bar.mo .qm {
    position: static; display: flex; align-items: center; justify-content: center;
    flex: 1 1 0; min-width: 0; height: 62px; padding: 4px 2px;
    text-align: center; line-height: 1.25; word-break: keep-all;
    font-size: clamp(10px, 2.7vw, 15px); font-weight: 700; color: #fff;
}
.quick_bar.mo .qm span { display: block; }
.qm-festival { background: #b75321; }
.qm-instagram { background: #ea1153; }
.qm-apply { background: #003669; }
.qm-kakao { background: #fae100; color: #342323; }
.qm-inquiry { background: #5e7dec; }
.quick_bar.mo .qm:active { filter: brightness(.92); }

/* 개인정보 팝업: PSD BOX 694 × 928, 입력 영역 x=676..1234, 폼 너비 558. */
#mainPopup { padding: 16px 12px; overscroll-behavior: contain; }
#mainPopup input, #mainPopup select, #mainPopup textarea { font-size: 16px; }
#mainPopup .b_popup_inner { width: min(694px, 100%); max-height: calc(100dvh - 32px); border: 2px solid #111; border-radius: 0; padding: 96px 60px 104px; background: #ffece5; scrollbar-gutter: stable; }
#mainPopup .b_popup_title { color: #333; font-size: 40px; line-height: 1.3; margin-bottom: 38px; }
#mainPopup .b_popup_title span { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #333; }
#mainPopup .b_popup_title .btn_close_popup { top: -76px; right: -42px; width: 44px; height: auto; aspect-ratio: 1; color: #333; }
#mainPopup .b_popup_title svg { width: 28px; height: 28px; }
#mainPopup .b_popup_content { padding: 0; }
#mainPopup .form_group { display: flex; align-items: stretch; border: 2px solid #111; border-radius: 0; margin-bottom: 6px; background: #fff; overflow: visible; }
#mainPopup .form_group > .label { flex: 0 0 29%; width: auto; height: auto; min-height: 54px; padding: 10px 8px; background: #353535; color: #fff; font-size: 24px; line-height: 1.3; text-align: center; }
#mainPopup .form_group > .label_0 { background: #ff8c28; }
#mainPopup .form_group > .label_1 { background: #032949; }
#mainPopup .form_group > .label .text { font-family: 'SchoolSafetyNotification', 'Noto Sans KR', sans-serif; }
#mainPopup .form_group > .label > span[style] { color: #fff !important; font-size: 16px; }
#mainPopup .form_group input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
#mainPopup .form_group select, #mainPopup .form_group textarea {
    flex: 1 1 0; min-width: 0; width: 100%; height: auto; min-height: 54px; border: 0; border-radius: 0; padding: 12px 16px; background: #fff; color: #222; font-family: 'Noto Sans KR', sans-serif; font-size: 20px; line-height: 1.4;
}
#mainPopup .form_group textarea { min-height: 120px; resize: vertical; }
#mainPopup .form_group input::placeholder, #mainPopup .form_group textarea::placeholder { font-size: 16px; color: #757575; }
#mainPopup .form_group input:focus-visible, #mainPopup .form_group select:focus-visible, #mainPopup .form_group textarea:focus-visible { outline: 3px solid #ff8c28; outline-offset: -3px; }
#mainPopup .form_group > label:not(.label) { width: auto; height: auto; padding: 10px; background: #fff; color: #333; font-size: 16px; gap: 6px; }
#mainPopup .form_group input[type="checkbox"], #mainPopup .form_group input[type="radio"] { flex: 0 0 22px; width: 22px; height: 22px; accent-color: var(--festival-navy); padding: 0; }
.instagram-follow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 22px 12px; background: #e2f7ff; border: 2px solid #111; margin-top: 6px; font-size: 18px; }
.instagram-follow strong { font-weight: 700; }
.instagram-follow a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 20px; background: #111; color: #fff; font-weight: 700; text-decoration: none; }
#mainPopup .term_zone .term { height: auto; margin: 24px 0 8px; padding: 22px; border: 2px solid #111; border-radius: 0; background: #fff; font-size: 16px; line-height: 1.55; }
#mainPopup .term_zone .term .inner { height: auto; max-height: 138px; overflow-y: auto; padding-right: 12px; overscroll-behavior: contain; scrollbar-color: #aaa #f2f2f2; }
#mainPopup .term_zone .term .h5 { font-size: 17px; font-weight: 500; margin-bottom: 20px; }
#mainPopup .term_zone .agree { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 12px; font-size: 16px; color: #111; }
#mainPopup .term_zone .agree > span { display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; }
#mainPopup .term_zone .agree input { appearance: auto; flex-shrink: 0; width: 24px; height: 24px; accent-color: #04355e; }
#mainPopup .term_zone .agree input::after { display: none; }
#mainPopup .term_zone .agree label { padding-block: 6px; }
#mainPopup .btn_box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px auto 0; width: min(468px, 100%); }
#mainPopup .btn_box button { width: 100%; height: auto; min-height: 66px; padding: 12px; border: 2px solid #111; border-radius: 0; background: #a2a2a2; color: #fff; font-size: 28px; margin: 0; }
#mainPopup .btn_box .confirm_btn { background: #b90000; }
.password-field { display: flex; flex: 1; min-width: 0; width: 100%; }
.password-toggle { flex-shrink: 0; padding: 10px; color: #04355e; font-size: 16px; font-weight: 700; }

/* 한 번씩 이어지는 축제 입장 연출과 스크롤 등장. 콘텐츠는 JS 없이도 표시됩니다. */
.entrance { animation: festival-arrive .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, 0s); }
.main-slogan.entrance { animation-name: festival-stamp; }
.insta-scene.entrance { animation-name: photo-arrive; }
[data-reveal].reveal-ready { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.2,1); }
[data-reveal="left"].reveal-ready { transform: translate(-40px, 16px) rotate(-1.5deg); }
[data-reveal="right"].reveal-ready { transform: translate(40px, 16px) rotate(1.5deg); }
[data-reveal="pop"].reveal-ready { transform: scale(.88) translateY(20px); }
[data-reveal="gift"].reveal-ready { transform: translateY(70px) scale(.85); transform-origin: center bottom; }
[data-reveal].reveal-ready.is-visible { opacity: 1; transform: none; }
[data-reveal="gift"].is-visible img { animation: gift-celebrate 1.1s ease-out .2s both; }
@keyframes festival-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes festival-stamp { 0% { opacity: 0; transform: scale(1.2) rotate(-5deg); } 65% { opacity: 1; transform: scale(.97) rotate(1deg); } 100% { transform: none; } }
@keyframes photo-arrive { from { opacity: 0; transform: translateY(35px) rotate(-4deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes heart-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
@keyframes gift-celebrate { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-2deg); } 65% { transform: rotate(1.5deg); } }

@media (max-width: 991px) {
    .festival-page { --u: min(1px, calc((100vw - 32px) / 750)); }
    .festival-page .quick_bar.pc { display: none; }
    .festival-page .quick_bar.mo { display: flex; }
    .festival-page .section.main { background-size: auto 100%; }
    .mobile-quick-anchor { padding-top: calc(62px + env(safe-area-inset-bottom, 0px)); background: #5a3a3b; }
    .festival-page .section_phara { padding: 32px 0; }
    .festival-page .section_phara .inner { width: min(680px, calc(100% - 40px)); font-size: 13px; line-height: 1.85; }
    .festival-page .section.sns { padding: 28px 0; }
    .festival-page .sns .sns-links { width: min(360px, calc(100% - 48px)); }
    .festival-page .footer { padding: 36px 16px; }
    .festival-page .footer .logo img { width: min(300px, 80%); }
    .festival-page .footer .info { margin-top: 20px; font-size: 12px; }
}
@media (max-width: 600px) {
    .main .top-logo { width: 46%; }
    .main .main-info { width: 94%; }
    .main .insta-scene { width: 84%; margin-top: 16px; }
    .main .video_zone { width: 100%; margin-top: 24px; }
    .main .event-actions, .section_02 .event-actions { width: 100%; gap: 10px; margin-top: 20px; }
    .festival-page .section_02 { padding-top: 30px; }
    .event-heading, .event-steps, .event-prizes { width: 100%; }
    /* section02_item 원본의 간격도 이미지 너비에 비례해 축소합니다. */
    .event-steps { margin-top: 3.428571%; }
    .event-prizes { margin-top: 2.571429%; }
    .event-gifts { width: 100%; margin-top: 38px; }
    #mainPopup { padding: 12px 10px; }
    #mainPopup .b_popup_inner { padding: 24px 18px 28px; max-height: calc(100dvh - 24px); scrollbar-gutter: auto; }
    #mainPopup .b_popup_title { display: grid; grid-template-columns: 1fr 40px; gap: 8px; align-items: center; margin-bottom: 24px; text-align: left; font-size: clamp(23px, 6vw, 30px); }
    #mainPopup .b_popup_title span { grid-area: 1 / 1; justify-self: start; }
    #mainPopup .b_popup_title .btn_close_popup { position: static; grid-area: 1 / 2; width: 40px; }
    #mainPopup .form_group { flex-wrap: wrap; margin-bottom: 12px; }
    #mainPopup .form_group > .label { flex: 0 0 100%; justify-content: flex-start; min-height: 0; padding: 9px 12px; font-size: 17px; }
    #mainPopup .form_group input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
    #mainPopup .form_group select, #mainPopup .form_group textarea { flex-basis: 100%; min-height: 50px; font-size: 16px; padding: 12px; }
    #mainPopup input, #mainPopup select, #mainPopup textarea, #mainPopup .term_zone .term, #mainPopup .term_zone .agree { font-size: 16px; }
    .instagram-follow { gap: 10px; padding: 16px 10px; font-size: 16px; text-align: center; }
    .instagram-follow a { min-height: 44px; }
    #mainPopup .term_zone .term { padding: 16px 12px; margin-top: 20px; line-height: 1.65; }
    #mainPopup .term_zone .term .inner { max-height: 180px; padding-right: 8px; }
    #mainPopup .term_zone .agree { gap: 2px 16px; }
    #mainPopup .term_zone .agree > span:first-child { flex-basis: 100%; text-align: left; }
    #mainPopup .term_zone .agree > span { min-height: 44px; }
    #mainPopup .btn_box { gap: 10px; margin-top: 24px; }
    #mainPopup .btn_box button { min-height: 54px; padding: 10px 6px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .festival-page *, #mainPopup * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    [data-reveal].reveal-ready { opacity: 1; transform: none; }
}

/* ==============================================
   공지 / 문의 서브페이지
   상단 sub_banner.jpg + 배너 하단 여백의 홈 버튼
   ============================================== */
.sub_visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 480;
    overflow: hidden;
    background: #fff0e5;
}
.sub_visual > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* 배너 하단(전체 높이의 약 21%)이 비어 있어 그 자리에 홈 버튼을 올립니다. */
.sub_visual .home_btn {
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .7em 1.8em;
    border-radius: 999px;
    background: #003669;
    color: #fff;
    font-size: clamp(13px, 1.1vw, 18px);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 54, 105, .28);
    transition: background .2s, box-shadow .2s, transform .2s;
}
.sub_visual .home_btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.sub_visual .home_btn:hover { background: #b75321; box-shadow: 0 8px 18px rgba(183, 83, 33, .35); }
.sub_visual .home_btn:active { transform: translateX(-50%) translateY(2px); }

.section.notice {
    background: #fdf7f0;
    padding: 60px 16px 100px;
}
.section.notice .inner { max-width: 1000px; }
.section.notice > .inner > .title {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    color: #003669;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.02em;
}
.section.notice > .inner > .title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: #b75321;
}

/* 목록 / 작성 / 보기 공통 테이블 */
.section.notice .notice_table {
    margin-top: 32px;
    border-top: 2px solid #003669;
    font-size: 15px;
    background: #fff;
    overflow: hidden;
}
.section.notice .notice_table * { font-family: "Noto Sans KR", sans-serif; }
.section.notice .notice_table th,
.section.notice .notice_table td { padding: 16px 12px; }
.section.notice .notice_table.pc th { background: #003669; color: #fff; font-weight: 700; }
.section.notice .notice_table td { border-bottom: 1px solid #e4d9cd; color: #4a4a4a; }
.section.notice .notice_table tr:hover td { background: #fff8f1; }
.section.notice .notice_table a { color: #1f1f1f; font-weight: 500; text-decoration: none; }
.section.notice .notice_table a:hover { color: #b75321; text-decoration: underline; }
.section.notice .notice_table span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.section.notice .notice_table span.notice_ticket { background: #b75321 !important; }
.section.notice .notice_table span.complete { background: #ea1153; }
.section.notice .notice_table span.waiting { background: #8c8c8c; }

/* 작성 / 상세 테이블 */
.section.notice .notice_w_table {
    border-top: 2px solid #003669;
    text-align: left;
}
.section.notice .notice_w_table th {
    width: 180px;
    background: #f4e9dd;
    border-bottom: 1px solid #e4d9cd;
    color: #003669;
    font-weight: 700;
    text-align: center;
}
.section.notice .notice_w_table td { background: #fff; text-align: left; }
.section.notice .notice_w_table input,
.section.notice .notice_w_table textarea {
    height: 48px;
    padding: 12px 14px;
    border: 1px solid #d8cabb;
    border-radius: 6px;
    background: #fffdfa;
    font-size: 16px;
    color: #222;
}
.section.notice .notice_w_table textarea { height: 260px; line-height: 1.6; }
.section.notice .notice_w_table input:focus-visible,
.section.notice .notice_w_table textarea:focus-visible { outline: 2px solid #b75321; outline-offset: 1px; }
.section.notice .notice_view td { line-height: 1.7; }

.section.notice .password_wrap .toggle_pw { color: #7a6a5c; }

/* 버튼 */
.section.notice .btn_box {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.section.notice .btn_box .btn,
.b_popup#popup03 .btn_box .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    background: #003669;
    color: #fff;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
}
.section.notice .btn_box .btn:hover,
.b_popup#popup03 .btn_box .btn:hover { background: #b75321; box-shadow: 0 6px 14px rgba(183, 83, 33, .3); }
.section.notice .btn_box .btn:active,
.b_popup#popup03 .btn_box .btn:active { transform: translateY(2px); }
/* 목록 화면의 문의하기 버튼만 포인트 컬러 */
.section.notice .btn_box .btn:not(.big) { background: #ea1153; }
.section.notice .btn_box .btn:not(.big):hover { background: #c10c44; box-shadow: 0 6px 14px rgba(234, 17, 83, .3); }

/* 페이지네이션 */
.section.notice .pagenation span,
.section.notice .pagenation button {
    width: 36px;
    height: 36px;
    border: 1px solid #003669;
    border-radius: 6px;
    background: #fff;
    color: #003669;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
}
.section.notice .pagenation span.active {
    background: #003669;
    border-color: #003669;
    color: #fff;
}

/* 비밀번호 확인 팝업 */
.b_popup#popup03 { padding: 20px 16px; }
.b_popup#popup03 .b_popup_inner {
    width: min(440px, 100%);
    padding: 34px 30px 30px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
}
.b_popup#popup03 .b_popup_title {
    margin-bottom: 22px;
    color: #003669;
    font-size: 21px;
    font-weight: 900;
}
.b_popup#popup03 .b_popup_title .btn_close_popup {
    top: -14px;
    right: -10px;
    color: #9a8d80;
    font-size: 30px;
}
.b_popup#popup03 .pw input {
    height: 50px;
    border: 1px solid #d8cabb;
    border-radius: 8px;
    background: #fffdfa;
}
.b_popup#popup03 .pw input:focus-visible { outline: 2px solid #b75321; outline-offset: 1px; }
.b_popup#popup03 .btn_box { margin-top: 22px; }

@media (max-width: 991px) {
    .sub_visual { aspect-ratio: 900 / 430; }
}

@media (max-width: 750px) {
    .section.notice { padding: 36px 14px 70px; }
    .section.notice > .inner > .title { font-size: 24px; padding-bottom: 10px; }
    .section.notice > .inner > .title::after { width: 40px; height: 3px; }
    .section.notice .notice_table { margin-top: 22px; font-size: 14px; }
    .section.notice .notice_table.mo { border-top: 2px solid #003669; }
    .section.notice .notice_table.mo li {
        padding: 14px 10px;
        gap: 10px;
        border-bottom: 1px solid #e4d9cd;
        font-size: 12px;
        background: #fff;
    }
    .section.notice .notice_table.mo li .no { width: auto; min-width: 22px; flex-shrink: 0; color: #8b7d6f; }
    .section.notice .notice_table.mo li .con { width: auto; flex: 1; min-width: 0; }
    .section.notice .notice_table.mo li .con .flex { gap: 0 10px; color: #8b7d6f; }
    .section.notice .notice_table.mo li .con .flex .date { position: relative; border-left: 0; padding-left: 11px; }
    .section.notice .notice_table.mo li .con .flex .date::before { content: '·'; position: absolute; left: 2px; }
    .section.notice .notice_table.mo li .title { font-size: 15px; font-weight: 700; color: #1f1f1f; }
    .section.notice .notice_table.mo li .answer { width: auto; flex-shrink: 0; }
    .section.notice .notice_table.mo li .answer span { padding: 5px 9px; border-radius: 999px; font-size: 11px; background: #8c8c8c; }
    .section.notice .notice_table.mo li .answer span.complete { background: #ea1153; }
    .section.notice .notice_table.mo li .answer span.waiting { background: #8c8c8c; }
    .section.notice .notice_table.mo li .no .notice_ticket { padding: 4px 7px; font-size: 10px; }
    .section.notice .notice_w_table th { width: 90px; padding: 12px 6px; font-size: 13px; }
    .section.notice .notice_w_table td { padding: 12px 10px; }
    .section.notice .notice_w_table textarea { height: 200px; }
    .section.notice .btn_box { margin-top: 22px; }
    .section.notice .btn_box .btn,
    .section.notice .btn_box .btn.big,
    .b_popup#popup03 .btn_box .btn {
        min-width: 0;
        width: 100%;
        max-width: 240px;
        height: 48px;
        padding: 0 18px;
        font-size: 15px;
    }
    .section.notice .pagenation { margin-top: 28px; gap: 6px; }
    .section.notice .pagenation span,
    .section.notice .pagenation button { width: 32px; height: 32px; font-size: 13px; }
    .b_popup#popup03 .b_popup_inner { padding: 26px 20px 24px; }
    .b_popup#popup03 .b_popup_title { font-size: 18px; }
}

@media (max-width: 600px) {
    .sub_visual { aspect-ratio: 700 / 430; }
    .sub_visual .home_btn { bottom: 2%; }
}