@font-face {
  font-family: 'Aggravo';
  src: url('/res/event/fonts/SBAggroL.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Aggravo';
  src: url('/res/event/fonts/SBAggroM.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Aggravo';
  src: url('/res/event/fonts/SBAggroB.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'JoyfulStory';
  src: url('/res/event/fonts/OTEnjoystoriesBA.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/res/event/fonts/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
/* @font-face {
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Aggravo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'JoyfulStory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OTEnjoystoriesBA.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
} */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #f7f0a6;
  color: #4e4e4e;
  font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
.page { width: 100%; padding: 0; }
.fake-box {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  min-width: 0.72em;
  min-height: 0.72em;
  flex-shrink: 0;
  border: 0.09em solid currentColor;
  border-radius: 0.1em;
  background: #fff;
  vertical-align: middle;
}
.box {
  appearance: none;
  -webkit-appearance: none;

  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;

  flex-shrink: 0;

  border: 0.1em solid currentColor;
  border-radius: 0.12em;
  background: #fff;

  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.box:checked {
  background: #fff;
  border-color: #65461b;
}

.box:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;

  width: 0.32em;
  height: 0.58em;

  border-right: 0.16em solid #138b38;
  border-bottom: 0.16em solid #138b38;

  transform: translate(-50%, -50%) rotate(45deg);
}

.pc-rule-list .fake-box {
  flex: 0 0 0.72em;
}

.mo-rule-list .fake-box {
  justify-self: start;
  align-self: start;
  margin-top: 0.25em;
}


/* PC 버전: 기존 비율 유지*/
.pledge-pc {
  position: relative;
  width: min(100%, 950px);
  aspect-ratio: 950 / 1346;
  margin: 0 auto;
  background: url('/res/event/img/bg-pc.jpg') center top / 100% 100% no-repeat;
  overflow: hidden;
}
.pc-inner {
  position: absolute;
  inset: 0;
  font-size: clamp(10px, 1.62vw, 21px);
}
.pc-ribbon-title {
  position: absolute;
  top: 6.05%;
  left: 50%;
  width: 48%;
  transform: translateX(-50%);
  margin: 0;
  color: #65461b;
  font-family:'Aggravo';
  font-size: 2em;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.pc-hand-copy {
  position: absolute;
  top: 13.9%;
  left: 50%;
  width: 72%;
  transform: translateX(-50%);
  margin: 0;
  color: #138b38;
  font-family: 'JoyfulStory', cursive;
  font-size: 60px;
  line-height: 1.08;
  text-align: center;
  letter-spacing: -0.03em;
}
.pc-desc {
  position: absolute;
  top: 25.4%;
  left: 50%;
  width: 62%;
  transform: translateX(-50%);
  margin: 0;
  color: #65461b;
  font-size: 0.9em;
  line-height: 1.45;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.pc-section-title {
  position: absolute;
  top: 33.4%;
  left: 50%;
  width: 70%;
  transform: translateX(-50%);
  margin: 0;
  color: #d35b37;
  font-size: 1.2em;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.pc-rule-list {
  position: absolute;
  top: 38.0%;
  left: 9.6%;
  width: 82%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: -0.055em;
}
.pc-rule-list li { display: flex; align-items: center; gap: 0.62em; white-space: nowrap; }
.pc-rule-list b { min-width: 1.25em; font-size: 1.08em; font-weight: 700; }
.pc-promise {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 78%;
  transform: translateX(-50%);
  margin: 0;
  color: #6b491f;
  font-size: 1em;
  line-height: 1.45;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.pc-sign {
  position: absolute;
  top: 74.0%;
  left: 57%;
  width: 40%;
  transform: translateX(-50%);
  color: #575757;
  font-size: 0.98em;
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: -0.05em;
}
.pc-sign p { margin: 0; }
.pc-sign span { color: #aaa; }
.pc-sign input { border: unset; font-size: 0.98em; }
.pc-sign input:focus { border: unset; outline: unset;}
.pc-agree {
  position: absolute;
  top: 80.7%;
  left: 50.5%;
  width: 58%;
  transform: translateX(-50%);
  margin: 0;
  color: #65461b;
  font-size: 1.02em;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.pc-agree .agree-box {
  width: 1.35em;
  height: 1.35em;
  min-width: 1.35em;
  min-height: 1.35em;
  margin-left: 0.35em;
}
.pc-agree .agree-box:checked::after {
  width: 0.42em;
  height: 0.78em;
  border-right-width: 0.18em;
  border-bottom-width: 0.18em;
}



/* 제출 버튼 추가*/
.submit-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: #65461b;
  color: #fff;
  font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  cursor: pointer;
}
.pc-submit {
  position: absolute;
  top: 84.0%;
  left: 50%;
  transform: translateX(-50%);
  width: 24%;
  height: 3.2%;
  border-radius: 999px;
  font-size: 0.95em;
}
.mo-submit {
  display: block;
  width: min(58%, 320px);
  margin: 1.2em auto 0;
  padding: 0.72em 1em 0.68em;
  border-radius: 999px;
  font-size: clamp(18px, 4.2vw, 28px);
  line-height: 1.2;
}

/* MO 버전: 내용에 따라 세로 확장 */
.pledge-mo { display: none; width: 100%; max-width: 768px; margin: 0 auto; background: #f7f0a6; overflow: hidden; }
.mo-top {
  position: relative;
  width: 100%;
  aspect-ratio: 1366 / 346;
  background: url('/res/event/img/top.png') center top / 100% 100% no-repeat;
}
.mo-top h1 {
  position: absolute;
  top: 31.5%;
  left: 50%;
  width: 58%;
  transform: translateX(-50%);
  margin: 0;
  color: #65461b;
  font-size: clamp(23px, 6.2vw, 48px);
  font-family: 'Aggravo';
  line-height: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.mo-middle {
  position: relative;
  min-height: 420px;
   margin-top: -2px;
  margin-bottom: -2px;
  background: url('/res/event/img/middle.png') center top / 100% 100px repeat-y;
  padding: clamp(10px, 3vw, 28px) 0 clamp(26px, 6vw, 60px);
}
.mo-watermark {
  position: absolute;
  top: 18%;
  left: 50%;
  width: min(42%, 295px);
  transform: translateX(-50%);
  opacity: 0.95;
  pointer-events: none;
}
.mo-content {
  position: relative;
  z-index: 1;
  width: min(82%, 720px);
  margin: 0 auto;
  color: #4e4e4e;
}
.mo-hand-copy {
  margin: 0 0 0.65em;
  color: #138b38;
  font-family: 'JoyfulStory', cursive;
  font-size: clamp(38px, 10.5vw, 78px);
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.03em;
}
.mo-desc {
  width: min(92%, 650px);
  margin: 0 auto 1.4em;
  color: #65461b;
  font-size: clamp(18px, 3.5vw, 24px);
  line-height: 1.55;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.04em;
  word-break: keep-all;
}
.mo-content h2 {
  margin: 0 0 0.95em;
  color: #d35b37;
  font-size: clamp(19px, 4.9vw, 34px);
  line-height: 1.3;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.05em;
  word-break: keep-all;
}
.mo-rule-list {
  margin: 0;
  padding: 0 5px 0 5px;
  list-style: none;
  font-size: clamp(17px, 3.65vw, 24px);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: -0.055em;
  word-break: keep-all;
}
.mo-rule-list li {
  display: grid;
  grid-template-columns: 0.78em 1.55em 1fr;
  gap: 0.5em;
  align-items: start;
  margin-bottom: 0.65em;
}
.mo-rule-list b { font-size: 1.08em; font-weight: 700; line-height: 1.4; }
.mo-rule-list .fake-box { margin-top: 0.42em; }
.mo-promise {
  width: min(94%, 680px);
  margin: 1.65em auto 1.35em;
  color: #6b491f;
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1.5;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.055em;
  word-break: keep-all;
}
.mo-sign {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25em;
  color: #575757;
  font-size: clamp(18px, 3.8vw, 25px);
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: -0.05em;
}
.mo-sign p { margin: 0; }
.mo-sign span { color: #aaa; }
.mo-sign input { border: unset; font-size: clamp(18px, 3.8vw, 25px); }
.mo-sign input:focus { border: unset; outline: unset;}
.mo-agree {
  margin: 0;
  color: #65461b;
  font-size: clamp(18px, 4.4vw, 29px);
  line-height: 1.35;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.055em;
  word-break: keep-all;
}
.mo-agree .agree-box {
  width: 1.35em;
  height: 1.35em;
  min-width: 1.35em;
  min-height: 1.35em;
  margin-left: 0.35em;
}
.mo-agree .agree-box:checked::after {
  width: 0.42em;
  height: 0.78em;
  border-right-width: 0.18em;
  border-bottom-width: 0.18em;
}
.mo-bottom {
  width: 100%;
  aspect-ratio: 1366 / 484;
   margin-top: -2px;
  background: url('/res/event/img/bottom.png') center bottom / 100% 100% no-repeat;
}

@media (max-width: 1031px) {
  .page { background: #f7f0a6; }
  .pledge-pc { display: none; }
  .pledge-mo { display: block; }
}

@media (max-width: 420px) {
  .mo-content { width: 84%; }
  .mo-rule-list { line-height: 1.48; }
  .mo-rule-list li { grid-template-columns: 0.76em 1.35em 1fr; gap: 0.42em; }
}



.cert-inner {display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100vw; height: 100vh; font-size: 14px;}
.cert-inner .img-wrapper {position: relative; max-width: 100%; max-height: 100%; aspect-ratio: 667 / 946; font-size: calc(1vw + 1vh);}
.cert-inner img {width: 100%; height: 100%; object-fit: contain; display: block;}
.cert-inner .floating-text {
	position: absolute;
	font-weight: bold;
	color: #000000;
	transform: translate(-50%, -50%);
	line-height: 1;
}

.cert-inner .cert-name {top: 43.8%; left: 71%; font-size: 0.9em;}
.cert-inner .cert-month {top: 85.4%; left: 50%; font-size: 0.7em;}
.cert-inner .cert-date {top: 85.4%; left: 57.5%; font-size: 0.7em;}