/* 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;
	}
}

/* ==========================================================
   부산교육청 OGQ / 2026-09-22
   PSD 1920 x 4400. --vw uses the viewport, including its scrollbar.
   Absolute positioning is limited to overlapping PSD artwork
   and the exact clickable bounds of supplied navigation images.
   ========================================================== */
:root { --vw: calc(100vw / 1920); }
@media (min-width: 1920px) { :root { --vw: 1px; } }
html { scrollbar-gutter: auto; }
.event-page { width: calc(1920 * var(--vw)); background: #fff; }
.event-page img { display: block; height: auto; }
.event-page a { color: inherit; text-decoration: none; }
.event-page a:focus-visible,
.event-page button:focus-visible,
#mainPopup :focus-visible { outline: 3px solid #133789; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.event-page .section .inner { width: calc(750 * var(--vw)); max-width: 750px; }
.event-page .section.main {
    padding: 0;
    height: auto;
    aspect-ratio: 1920 / 1154;
    background: #ffdf80 url('../img/main_bg.jpg') center top / 100% 100% no-repeat;
    isolation: isolate;
}
.hero-art {
    position: absolute;
    left: calc(var(--x) * var(--vw));
    top: calc(var(--y) * var(--vw));
    width: calc(var(--w) * var(--vw));
    animation: hero-arrive .9s cubic-bezier(.2,.8,.2,1) var(--delay) both;
    pointer-events: none;
}
.hero-art img { width: 100%; }
.hero-awning { transform-origin: center top; animation-name: awning-open; }
.hero-logo { animation-name: soft-appear; }
.hero-title-left { animation-name: title-left-in; }
.hero-title-right { animation-name: title-right-in; }
.hero-mascot { animation-name: sticker-pop; }
.hero-people, .hero-left-family, .hero-right-family { animation-name: people-rise; }
.hero-phone { z-index: 2; transform-origin: center bottom; animation-name: phone-in; }
.hero-cheer, .hero-right-mascot { z-index: 3; }
.hero-right-mascot { animation: hero-arrive2 .9s cubic-bezier(.2,.8,.2,1) var(--delay) both; }
.hero-devil img { animation: cloud-drift 5.5s ease-in-out 1.2s infinite; }
.hero-cloud img { animation: float-soft 4.6s ease-in-out 1.6s infinite; }
.hero-mascot img { animation: mascot-peek 5s ease-in-out 2s infinite; transform-origin: center bottom; }
.hero-cheer img { animation: cheer-wave 3.2s ease-in-out 1.5s infinite; transform-origin: center bottom; }
.hero-right-mascot img { animation: float-soft 4.2s ease-in-out 2s infinite; }
.hero-phone img { animation: phone-sway 6s ease-in-out 2s infinite; transform-origin: center bottom; }
.hero-left-family img, .hero-right-family img { animation: family-breathe 6s ease-in-out 2.5s infinite; transform-origin: center bottom; }
.hero-right-family img { animation-delay: 3.4s; }
.event-page .quick_bar.pc {
    position: absolute; left: calc(1477 * var(--vw)); top: calc(124 * var(--vw)); right: auto;
    width: calc(222 * var(--vw)); margin: 0; z-index: 5;
    animation: hanging-sign 1.1s ease-out .6s both;
    transform-origin: center top;
}
.quick_bar.pc img { width: 100%; }
.quick_bar.pc a { position: absolute; display: block; border-radius: 50%; }
.floating-download { left: 8.1%; top: 9.2%; width: 83.8%; aspect-ratio: 1; }
.floating-apply { left: 0; top: 44.7%; width: 100%; aspect-ratio: 1; }
.quick_bar.pc a:hover { box-shadow: inset 0 0 0 3px rgba(255,255,255,.75); }
.event-page .section_02 {
    padding: calc(102 * var(--vw)) 0 calc(64 * var(--vw));
    border-top: 1px solid #76736c;
    background-color: #fff;
    /* PSD merged preview: 177×136 repeat tile exported at (0,1156). */
    background-image: url('../img/section02_pattern.png');
    background-size: calc(177 * var(--vw)) calc(136 * var(--vw));
    background-position: left top;
    background-repeat: repeat;
}
.steps-art { margin-left: calc(-6 * var(--vw)); margin-right: calc(6 * var(--vw)); }
.steps-art img { width: 100%; }
.gift-art { position: relative; width: calc(700 * var(--vw)); margin: calc(-30 * var(--vw)) auto 0; }
.gift-art img { width: 100%; }
.event-page .section_03 { background: #62b6f6; padding: calc(82 * var(--vw)) 0 0; border-top: 1px solid #6f7071; }
.event-page .section_03 .event-actions { width: calc(700 * var(--vw)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--vw)); align-items: start; }
.image-button { display: block; width: 100%; transition: filter .2s; }
.image-button img { width: 100%; transition: transform .25s; }
.image-button:hover img { transform: translateY(-5px) rotate(-1deg); }
.image-button:active img { transform: translateY(2px); }
.event-page .section_phara { background: #62b6f6; padding: calc(98 * var(--vw)) 0 calc(105 * var(--vw)); }
.event-page .section_phara .inner { width: calc(690 * var(--vw)); max-width: 690px; text-align: left; }
.event-notes { font-size: calc(18 * var(--vw)); line-height: 1.65; color: #29485e; word-break: keep-all; }
.event-notes li { display: flex; gap: .25em; }
.event-notes li::before { content: '※'; flex: none; }
.event-page .section.sns { background: #1f1f1f; padding: calc(46 * var(--vw)) 0 calc(48 * var(--vw)); }
.sns-heading { width: calc(268 * var(--vw)); margin: 0 auto calc(41 * var(--vw)); }
.sns-links { position: relative; width: calc(514 * var(--vw)); max-width: 514px; margin: auto; }
.sns-links img { width: 100%; }
.sns-links a {
    position: absolute; top: 0; left: calc(var(--sns-x) / 514 * 100%);
    width: 15.953307%; aspect-ratio: 1; border-radius: 50%;
    transition: box-shadow .2s, background-color .2s;
}
.sns-links a:hover { background-color: rgba(255,255,255,.12); box-shadow: 0 0 0 4px #fff5; }
.event-page .footer { background: #fff; padding: 40px 16px; }
.event-page .footer .inner { width: 100%; }
.event-page .footer .logo { display: block; width: min(308px, 45%); margin: auto; }
.event-page .footer .logo img { width: 100%; }
.event-page .footer .info { color: #222; margin-top: 28px; font-size: 18px; line-height: 1.3; }
.mobile-event-nav { display: none; }

/* Scroll effects stay visible when JavaScript/IntersectionObserver is unavailable. */
.will-reveal { opacity: 0; transition: opacity .8s, transform 1s cubic-bezier(.2,.8,.2,1); }
.will-reveal[data-motion="rise"] { transform: translateY(44px); }
.will-reveal[data-motion="sticker"] { transform: translateY(32px) rotate(-2deg) scale(.97); transform-origin: center top; }
.will-reveal[data-motion="left"] { transform: translateX(-40px) rotate(-4deg); }
.will-reveal[data-motion="right"] { transform: translateX(40px) rotate(4deg); transition-delay: .12s; }
.will-reveal[data-motion="pop"] { transform: scale(.91); }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* Participation modal: visual order only, administrator field order is preserved. */
#mainPopup { padding: 24px 16px; overscroll-behavior: contain; }
#mainPopup .b_popup_inner { width: min(744px, 100%); max-height: calc(100dvh - 48px); background: #fff; border-radius: 0; padding: 28px 46px 42px; scrollbar-gutter: stable; }
#mainPopup .b_popup_title { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; color: #123488; font-size: 28px; line-height: 1.35; text-align: left; }
#mainPopup .b_popup_title span { flex: 1; order: -1; }
#mainPopup .b_popup_title .btn_close_popup { position: static; transform: none; flex: none; width: auto; height: auto; min-width: 44px; min-height: 44px; color: #123488; }
#mainPopup .b_popup_title svg { width: 32px; height: auto; }
#mainPopup .b_popup_content { padding: 0; }
#saveFrmProcess { display: flex; flex-direction: column; gap: 10px; }
#saveFrmProcess > input[type="hidden"] { display: none; }
#mainPopup .form_group { order: 3; display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid #181c57; border-radius: 0; overflow: visible; min-width: 0; background: #fff; }
#mainPopup .form_group > .label { width: 118px; flex: 0 0 118px; height: auto; min-height: 56px; padding: 12px 8px; gap: 4px; font-size: 22px; line-height: 1.4; background: #123488; color: #fff; font-family: 'Noto Sans KR', sans-serif; }
#mainPopup .form_group > .label .text { font-weight: 600; }
#mainPopup .form_group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#mainPopup .form_group select,
#mainPopup .form_group textarea {
    flex: 1 1 0; min-width: 0; width: 100%; height: auto; min-height: 56px;
    border: 0; border-radius: 0; padding: 12px 16px;
    font: 18px/1.5 'Noto Sans KR', sans-serif; color: #222; background: #fff;
}
#mainPopup .form_group input::placeholder,
#mainPopup .form_group textarea::placeholder { font: 16px/1.5 'Noto Sans KR', sans-serif; color: #777; }
#mainPopup .form_group textarea { min-height: 120px; resize: vertical; }
#mainPopup .form_group input[type="hidden"] { display: none; }
#mainPopup .form_group > label:not(.label):not(.file_label) { width: auto; height: auto; min-height: 48px; padding: 8px 12px; gap: 8px; background: #fff; color: #222; font-size: 16px; }
#mainPopup input[type="checkbox"], #mainPopup input[type="radio"] { width: 22px; height: 22px; padding: 0; flex: none; accent-color: #123488; }
#mainPopup .form_group.upload-group { order: 1; margin-bottom: 22px; }
#mainPopup .upload-group > .label { background: #ffdf42; color: #111; }
#mainPopup .form_group input[type="file"] { width: 0; height: 0; min-height: 0; padding: 0; border: 0; opacity: 0; flex: 0 0 0; }
#mainPopup .form_group input[type="file"]:focus-visible + label { outline: 3px solid #60b5f2; outline-offset: -3px; }
#mainPopup .form_group label.file_label { flex: 1 1 0; width: 100%; height: auto; min-height: 56px; padding: 10px; gap: 8px; align-items: center; font: 16px/1.4 'Noto Sans KR', sans-serif; }
#mainPopup .file_label .file-name { padding: 0 6px; font-size: 16px; }
#mainPopup .form_group label.file_label::after { content: '첨부하기'; height: auto; padding: 9px 13px; font: 600 16px/1.4 'Noto Sans KR', sans-serif; background: #080808; }
.upload-examples { order: 2; margin: 0 0 38px; width: 100%; }
.upload-examples img { display: block; width: 100%; height: auto; }
#saveFrmProcess.without-upload .upload-examples { order: 0; }
#mainPopup .term_zone { order: 4; margin-top: 50px; }
#mainPopup .term_zone .term { height: auto; margin: 0 0 16px; padding: 0; background: #f1f7ff; border: 1px solid #181c57; border-radius: 0; font-size: 16px; line-height: 1.5; }
#mainPopup .term_zone .term .inner { height: auto; max-height: 240px; overflow-y: auto; padding: 24px; scrollbar-color: #315fa0 #cbdcff; scrollbar-width: auto; overscroll-behavior: contain; }
#mainPopup .term_zone .term .h5 { font-weight: 500; margin-bottom: 22px; }
#mainPopup .term_zone .term .h6 { font-weight: 600; }
#mainPopup .term_zone .agree { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: #222; font-size: 16px; line-height: 1.5; text-align: left; }
#mainPopup .term_zone .agree > span:first-child { flex-basis: 100%; margin: 0; text-align: left; }
#mainPopup .term_zone .agree > span:not(:first-child) { display: flex; align-items: center; min-height: 44px; gap: 8px; margin: 0; }
#mainPopup .term_zone .agree input { appearance: auto; position: static; border: 0; background: transparent; }
#mainPopup .term_zone .agree input::after { display: none; }
#mainPopup .term_zone .agree label { padding: 10px 0; }
#mainPopup .btn_box { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 36px 0 0; padding: 0 32px; }
#mainPopup .btn_box button { width: 100%; height: auto; min-height: 72px; margin: 0; padding: 16px 12px; border: 2px solid #555; border-radius: 0; background: #a0a0a0; color: #fff; box-shadow: 7px 0 0 -2px #d4d4d4, 8px 0 0 0 #555; font-size: 30px; line-height: 1.3; }
#mainPopup .btn_box .btn_close_popup { grid-column: 1; grid-row: 1; }
#mainPopup .btn_box .confirm_btn { grid-column: 2; background: #123488; border-color: #171741; box-shadow: 7px 0 0 -2px #4e4a76, 8px 0 0 0 #171741; }
.event-password { display: flex; flex: 1; min-width: 0; width: 100%; }
.event-password-toggle { flex: none; padding: 12px; color: #123488; font-size: 16px; font-weight: 600; }

/* Leave no persistent offset: the PSD coordinates must remain the resting position at every width. */

@keyframes hero-arrive { from { opacity: 0; transform: translateY(20%); } to { opacity: 1; transform: none; } }

@keyframes hero-arrive2 { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: translateY(20%); } }
@keyframes soft-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes awning-open { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
@keyframes title-left-in { from { opacity: 0; transform: translateX(-12%) rotate(-9deg); } 75% { transform: rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes title-right-in { from { opacity: 0; transform: translateX(12%) rotate(9deg); } 75% { transform: rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes sticker-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } 70% { transform: scale(1.07) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes people-rise { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(15%) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes cloud-drift { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(8%,-8%) rotate(3deg); } }
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes mascot-peek { 0%,75%,100% { transform: rotate(0); } 82% { transform: rotate(-5deg); } 90% { transform: rotate(4deg); } }
@keyframes cheer-wave { 0%,65%,100% { transform: rotate(0); } 75% { transform: rotate(-8deg); } 85% { transform: rotate(6deg); } }
@keyframes phone-sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-1.5deg); } }
@keyframes family-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1.3%); } }
@keyframes hanging-sign { from { opacity: 0; transform: rotate(12deg); } 55% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } to { opacity: 1; transform: none; } }

@media (max-width: 991px) {
    .event-page .quick_bar.pc { display: none; }
    body { padding-bottom: calc(14.933333vw + env(safe-area-inset-bottom)); }
    .mobile-event-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; width: min(750px, 100%); margin-inline: auto; padding-bottom: env(safe-area-inset-bottom); background: #fff; box-shadow: 0 -4px 16px #2221; }
    .mobile-event-nav img { grid-row: 1; grid-column: 1 / -1; width: 100%; }
    .mobile-event-nav a { grid-row: 1; min-height: 48px; z-index: 1; }
    .mobile-event-nav a:nth-of-type(1) { grid-column: 1; }
    .mobile-event-nav a:nth-of-type(2) { grid-column: 2; }
    .mobile-event-nav a:nth-of-type(3) { grid-column: 3; }
}
@media (max-width: 750px) {
    html { scrollbar-gutter: auto; }
    .event-page { width: 100%; }
    .event-page .section.main { aspect-ratio: 850 / 1154; background-size: auto 100%; }
    .hero-art { left: calc((var(--x) - 535) / 850 * 100%); top: calc(var(--y) / 1154 * 100%); width: calc(var(--w) / 850 * 100%); }
    .hero-devil { left: 2%; top: 35.5%; width: 12%; }
    .hero-cloud { left: 86%; top: 43%; width: 10%; }
    .event-page .section .inner { width: calc(100% - 28px); }
    .event-page .section_02 { padding: 40px 0 36px; background-size: 88.5px 68px; }
    .steps-art { margin: 0; }
    .gift-art { width: 93.333333%; margin-top: -4%; }
    .event-page .section_03 { padding-top: 32px; }
    .event-page .section_03 .event-actions { width: calc(100% - 40px); gap: 12px; }
    .event-page .section_phara { padding: 30px 22px 38px; }
    .event-page .section_phara .inner { width: 100%; }
    .event-notes { font-size: 14px; line-height: 1.65; }
    .event-notes li + li { margin-top: 6px; }
    .event-page .section.sns { padding: 28px 16px; }
    .sns-heading { width: 180px; margin-bottom: 22px; }
    .sns-links { width: min(340px, 100%); }
    .event-page .footer { padding: 28px 16px; }
    .event-page .footer .logo { width: 190px; }
    .event-page .footer .info { font-size: 12px; margin-top: 20px; line-height: 1.5; }
    #mainPopup { padding: 12px; }
    #mainPopup .b_popup_inner { max-height: calc(100dvh - 24px); padding: 20px 16px 28px; scroll-padding-block: 20px; }
    #mainPopup .b_popup_title { font-size: 22px; margin-bottom: 24px; }
    #mainPopup .form_group { display: flex; flex-direction: column; }
    #mainPopup .form_group > .label { width: 100%; flex: auto; justify-content: flex-start; min-height: 44px; padding: 10px 12px; font-size: 16px; }
    #mainPopup .form_group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    #mainPopup .form_group select,
    #mainPopup .form_group textarea { flex: auto; width: 100%; min-height: 52px; font-size: 16px; padding: 12px; }
    #mainPopup .form_group textarea { min-height: 120px; }
    #mainPopup .form_group.upload-group { margin-bottom: 12px; }
    #mainPopup .form_group label.file_label { flex: auto; width: 100%; min-height: 54px; padding: 8px; }
    #mainPopup .form_group label.file_label::after { padding: 9px; font-size: 16px; }
    #mainPopup .file_label .file-name { padding: 0 4px; }
    .upload-examples { margin-bottom: 18px; }
    #mainPopup .term_zone { margin-top: 20px; }
    #mainPopup .term_zone .term { font-size: 16px; }
    #mainPopup .term_zone .term .inner { max-height: min(280px, 42dvh); padding: 16px; }
    #mainPopup .term_zone .agree { font-size: 16px; gap: 0 14px; }
    #mainPopup .btn_box { padding: 0 6px 0 0; gap: 18px; margin-top: 20px; }
    #mainPopup .btn_box button { min-height: 56px; padding: 12px 8px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .event-page *, .event-page *::before, .event-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .event-page .will-reveal { opacity: 1; transform: none; }
}