@font-face {
  font-family: Pretendard;
  font-weight:700;
  font-display: swap;
  src: local('Pretendard Bold'),
       url(/assets/font/Pretendard-Bold.woff2) format('woff2'),
       url(/assets/font/Pretendard-Bold.woff) format('woff')
}
@font-face {
  font-family: Pretendard;
  font-weight:600;
  font-display: swap;
  src: local('Pretendard SemiBold'),
       url(/assets/font/Pretendard-SemiBold.woff2) format('woff2'),
       url(/assets/font/Pretendard-SemiBold.woff) format('woff')
}
@font-face {
  font-family: Pretendard;
  font-weight:400;
  font-display: swap;
  src: local('Pretendard Regular'),
       url(/assets/font/Pretendard-Regular.woff2) format('woff2'),
       url(/assets/font/Pretendard-Regular.woff) format('woff')
}

html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  overscroll-behavior: contain;
  background-color: #fff;
  font-family: Pretendard, sans-serif;
  /* iOS 26 스크롤 축소 대응 */
  scroll-padding-top: env(safe-area-inset-top, 0);
}
body:has(#modal.show) {
  overflow: hidden;
}
a, address, blockquote, body, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, label, li, ol, p, pre, select, span, strong, textarea, ul {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
video, img {
  width: 100%;
  font-size: 0;
  line-height: 0;
  vertical-align: top;
}
button {
  all: unset;
  cursor: pointer;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  border: 0;
}

main {
  --ratio: calc(100vw / 375px);
}
section, section .block {
  position: relative;
  width: 100%;
}

.tabs {
  position: -webkit-sticky; /* iOS Safari 지원 */
  position: sticky;
  top: 0;
  top: env(safe-area-inset-top, 0); /* iOS Safari 동적 영역 대응 */
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(48px * var(--ratio));
  background-color: #f76e9e;
  box-shadow: inset 0 calc(-0.5px * var(--ratio)) 0 0 rgba(255, 255, 255, 0.3 );
  /* iOS Safari sticky 버그 해결 */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* 렌더링 컨텍스트 분리로 잘림 방지 */
  isolation: isolate;
  contain: layout style paint;
}
.tabs button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: calc(15px * var(--ratio));
  font-weight: 700;
  color: #fff;
  opacity: 0.6;
}
.tabs button.active, .tabs:not(:has(button.active)) button:first-child {
  font-weight: bold;
  opacity: 1;
}
.tabs button.active::after, .tabs:not(:has(button.active)) button:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(2.5px * var(--ratio));
  background-color: #fff;
}

a.notice {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(130px * var(--ratio));
  height: calc(20px * var(--ratio));
  transform: translateX(-50%);
  z-index: 10;
}

/* chapter1 */
#chapter1 .input-container {
  position: absolute;
  bottom: calc(365px * var(--ratio));
  left: 50%;
  width: calc(178.2px * var(--ratio));
  height: calc(33px * var(--ratio));
  border-radius: calc(4px * var(--ratio));
  background-color: #fff;
  transform: translateX(-50%);
}
#chapter1 .input-container::placeholder {
  color: #555;
}
#chapter1 .input-container input {
  all: unset;
  width: 100%;
  text-align: center;
  font-size: calc(13.2px * var(--ratio));
  line-height: calc(33px * var(--ratio));
  color: #555;
  opacity: 0.5;
}
#chapter1 .input-container button {
  display: none;
  position: absolute;
  top: 0;
  right: calc(13px * var(--ratio));
  padding: 0 calc(7.5px * var(--ratio));
  height: 100%;
  font-size: calc(13.2px * var(--ratio));
  line-height: calc(33px * var(--ratio));
  color: #555;
  opacity: 0.5;
}
#chapter1 .input-container input:focus {
  text-indent: calc(-8px * var(--ratio));
}
#chapter1 .input-container input:focus + button {
  display: block;
}
#chapter1 .input-container input:not(:placeholder-shown) {
  opacity: 1;
}
#chapter1 .input-container input:not(:placeholder-shown) + button {
  font-weight: 700;
  opacity: 1;
}
#chapter1 .input-container input:not(:placeholder-shown):not(:focus) {
  font-size: calc(14.3px * var(--ratio));
  font-weight: 700;
  opacity: 1;
}
#chapter1 .input-container:has(input:not(:placeholder-shown):not(:focus))::after {
  content: '님';
  position: absolute;
  top: 0;
  right: calc(13px * var(--ratio));
  padding: 0 calc(7.5px * var(--ratio));
  height: 100%;
  font-size: calc(14.3px * var(--ratio));
  font-weight: 700;
  line-height: calc(33px * var(--ratio));
  color: #555;
}
#chapter1 .total {
  position: absolute;
  bottom: calc(109px * var(--ratio));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(14px * var(--ratio));
  line-height: calc(24px * var(--ratio));
  color: #000;
  opacity: 0.7;
}
#chapter1 a.link {
  position: absolute;
  bottom: calc(142px * var(--ratio));
  right: calc(14.5px * var(--ratio));
  left: calc(14.5px * var(--ratio));
  height: calc(56.5px * var(--ratio));
  z-index: 10;
}
#chapter1 a.notice {
  bottom: calc(52px * var(--ratio));
}

/* chapter2 */
#chapter2 .carousel {
  position: absolute;
  bottom: calc(50px * var(--ratio));
  left: 0;
  width: 100%;
}
#chapter2 .splide__pagination {
  bottom: calc(43px * var(--ratio));
}
#chapter2 .splide__pagination__page {
  width: calc(7.5px * var(--ratio));
  height: calc(7.5px * var(--ratio));
  margin: calc(2.5px * var(--ratio));
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #000;
}
#chapter2 .splide__pagination__page.is-active {
  background-color: #000;
  box-shadow: none;
  transform: scale(1);
}
#chapter2 .floating {
  position: absolute;
  top: calc(112px * var(--ratio));
  left: 0;
  width: 100%;
  overflow: hidden;
}
#chapter2 .floating .scroll-container {
  padding: calc(60px * var(--ratio)) 0 calc(30px * var(--ratio));
  margin-bottom: calc(-30px * var(--ratio));
  overflow: scroll;
}
#chapter2 .floating .dates .button-group {
  --button-width: calc(77px * var(--ratio));
  --button-height: calc(45px * var(--ratio));
  --button-gap: calc(8px * var(--ratio));
  --button-padding: calc(13.5px * var(--ratio));
  display: flex;
  gap: var(--button-gap);
  width: fit-content;
  padding: 0 var(--button-padding);
  background-image: url('/assets/images/ch2-2_tabs.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
#chapter2 .floating .dates button {
  position: relative;
  min-width: var(--button-width) !important;
  height: var(--button-height);
}
#chapter2 .floating .dates button:hover, #chapter2 .floating .dates button.active {
  background-image: url('/assets/images/ch2-2_tabs-active.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: calc((var(--button-width) + var(--button-gap)) * 0 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(2):hover, #chapter2 .floating .dates button:nth-child(2).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -1 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(3):hover, #chapter2 .floating .dates button:nth-child(3).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -2 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(4):hover, #chapter2 .floating .dates button:nth-child(4).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -3 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(5):hover, #chapter2 .floating .dates button:nth-child(5).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -4 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(6):hover, #chapter2 .floating .dates button:nth-child(6).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -5 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(7):hover, #chapter2 .floating .dates button:nth-child(7).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -6 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(8):hover, #chapter2 .floating .dates button:nth-child(8).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -7 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(9):hover, #chapter2 .floating .dates button:nth-child(9).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -8 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(10):hover, #chapter2 .floating .dates button:nth-child(10).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -9 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(11):hover, #chapter2 .floating .dates button:nth-child(11).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -10 - var(--button-padding)) center;
}
#chapter2 .floating .dates button:nth-child(12):hover, #chapter2 .floating .dates button:nth-child(12).active {
  background-position: calc((var(--button-width) + var(--button-gap)) * -11 - var(--button-padding)) center;
}
#chapter2 .floating .dates button.active::after {
  content: '';
  position: absolute;
  right: 4%;
  bottom: 74%;
  width: calc(85px * var(--ratio));
  height: calc(75px * var(--ratio));
  background-image: url('/assets/images/ch2-2_tabs-deco.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#chapter2 .countdown {
  position: absolute;
  top: calc(238.5px * var(--ratio));
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(40px * var(--ratio));
  font-size: calc(31px * var(--ratio));
  font-weight: 700;
  color: #392220;
}
#chapter2 .countdown span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(68px * var(--ratio));
  height: 100%;
}
#chapter2 .countdown span + span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(3.5px * var(--ratio));
  height: calc(6.5px * var(--ratio));
  border: calc(3.5px * var(--ratio)) solid #392220;
  border-right: none;
  border-left: none;
  transform: translate(-50%, -50%);
}
#chapter2 .countdown span:last-child::after {
  content: '남음';
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(calc(-8px * var(--ratio)), calc(-23px * var(--ratio)));
  font-size: calc(14px * var(--ratio));
  font-weight: 400;
  white-space: nowrap;
}
#chapter2 a.more {
  position: absolute;
  top: calc(46px * var(--ratio));
  right: calc(46.5px * var(--ratio));
  width: calc(65.5px * var(--ratio));
  height: calc(23px * var(--ratio));
  z-index: 10;
}

/* chapter3 */
#chapter3.status--in-progress .in-progress, #chapter3:not(.status--in-ended) .in-progress {
  display: block;
}
#chapter3.status--in-progress .ended, #chapter3:not(.status--in-ended) .ended {
  display: none;
}
#chapter3.status--ended .in-progress {
  display: none;
}
#chapter3.status--ended .ended {
  display: block;
}
#chapter3 a.link {
  position: absolute;
  bottom: calc(121.5px * var(--ratio));
  right: calc(37px * var(--ratio));
  left: calc(37px * var(--ratio));
  height: calc(50.5px * var(--ratio));
  z-index: 10;
}
#chapter3 a.notice {
  bottom: calc(61.5px * var(--ratio));

}
#chapter3.status--ended a.link {
  bottom: calc(270px * var(--ratio));
}
#chapter3.status--ended a.notice {
  bottom: calc(58px * var(--ratio));
}

/* chapter4 */
#chapter4 a.link {
  position: absolute;
  bottom: calc(151px * var(--ratio));
  right: calc(14.5px * var(--ratio));
  left: calc(14.5px * var(--ratio));
  height: calc(81px * var(--ratio));
  z-index: 10;
}
#chapter4 a.link--2 {
  bottom: calc(60px * var(--ratio));
}

/* modal */
#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* iOS 26 플로팅 네비게이션 바 대응 */
  min-height: 100vh; /* fallback for older browsers */
  min-height: 100dvh; /* iOS 26 플로팅 네비게이션 바 대응 */
  place-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 100;0
}
#modal.show {
  display: grid;
}
#modal .block {
  position: relative;
  width: 100%;
}
#modal .block > .close {
  position: absolute;
  top: calc(31.5px * var(--ratio));
  right: calc(31.5px * var(--ratio));
  width: calc(32px * var(--ratio));
  height: calc(32px * var(--ratio));
  pointer-events: auto;
  z-index: 10;
}
#modal.step3 .block > .close {
  top: calc(38.5px * var(--ratio));
  right: calc(37.5px * var(--ratio));
}
#modal.step3:has(.step3.result) .block > .close {
  top: calc(21px * var(--ratio));
  right: calc(19.5px * var(--ratio));
}
#modal section {
  display: none;
}
#modal.step1 .step1, #modal.step2 .step2, #modal.step3 .step3, #modal.step4 .step4 {
  display: block;
}
#modal .step1 .button-group {
  position: absolute;
  top: calc(111.5px * var(--ratio));
  right: calc(36px * var(--ratio));
  left: calc(34px * var(--ratio));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7.5px * var(--ratio));
}
#modal .step1 .button-group button {
  width: 100%;
  height: calc(96px * var(--ratio));
}
#modal .step1 .button-group button:last-child {
  margin-top: calc(-0.5px * var(--ratio));
}
#modal .step1 .button-group button.active {
  background-image: url('/assets/images/modal_index-selected.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#modal .step2 > div, #modal .step3 > div {
  display: none;
}
#modal .step2 .button-group {
  display: block;
  position: absolute;
  top: calc(125.5px * var(--ratio));
  right: calc(35px * var(--ratio));
  left: calc(35px * var(--ratio));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: calc(22px * var(--ratio)) 0;
}
#modal .step2 .button-group button {
  position: relative;
  width: 100%;
  height: calc(165.5px * var(--ratio));
}
#modal .step2 .button-group button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(15px * var(--ratio));
  height: calc(15px * var(--ratio));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #888;
  transform: translateX(calc(-2.5px * var(--ratio)));
}
#modal .step2 .button-group button.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(8px * var(--ratio));
  height: calc(8px * var(--ratio));
  border-radius: 50%;
  background-color: #888;
  transform: translate(calc(1px * var(--ratio)), calc(-3.5px * var(--ratio)));
}
#modal[data-step1="vacation"] .step2 .vacation, #modal[data-step1="vacation"] .step3 .vacation {
  display: block;
}
#modal[data-step1="watermelon"] .step2 .watermelon, #modal[data-step1="watermelon"] .step3 .watermelon {
  display: block;
}
#modal[data-step1="picnic"] .step2 .picnic, #modal[data-step1="picnic"] .step3 .picnic {
  display: block;
}
#modal[data-step1="sports"] .step2 .sports, #modal[data-step1="sports"] .step3 .sports {
  display: block;
}
#modal .step3 .top {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
#modal .step3 .items {
  position: absolute;
  bottom: calc(145px * var(--ratio));
  right: calc(51px * var(--ratio));
  left: calc(49px * var(--ratio));
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(68px * var(--ratio));
  padding: calc(7.5px * var(--ratio));
  border-radius: calc(3.5px * var(--ratio));
  background-color: #f0f0f0;
}
#modal .step3 .canvas-container {
  display: block;
  position: absolute !important;
  top: calc(35px * var(--ratio));
  left: calc(34px * var(--ratio));
  width: calc(305px * var(--ratio)) !important;
  height: calc(309px * var(--ratio)) !important;
}
#modal .step3.idle .coach {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
#modal .step3.idle .coach.hide {
  display: none;
}
#modal .step3.idle .coach .close {
  position: absolute;
  top: calc(8px * var(--ratio));
  right: calc(52.5px * var(--ratio));
  width: calc(23px * var(--ratio));
  height: calc(23px * var(--ratio));
  pointer-events: auto;
}
#modal .step3 .items img {
  min-width: 0;
  height: 100%;
  object-fit: contain;
}
#modal .step3.done .done {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
#modal .step3.done .done button {
  position: absolute;
  bottom: calc(88.5px * var(--ratio));
  right: calc(49.5px * var(--ratio));
  left: calc(48.5px * var(--ratio));
  height: calc(46px * var(--ratio));
  pointer-events: auto;
}
#modal .step3.result .top {
  display: none;
}
#modal .step3.result .result {
  display: block;
}
#modal .step3.result > :not(.result, .canvas-container) {
  display: none;
}
#modal .step3.result .message--1 {
  position: absolute;
  top: calc(90px * var(--ratio));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(14px * var(--ratio));
  font-weight: 500;
  line-height: calc(27.5px * var(--ratio));
  color: #392220;
}
#modal .step3.result .message--1 span {
  font-weight: 700;
}
#modal .step3.result .message--2 {
  position: absolute;
  top: calc(628px * var(--ratio));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(18px * var(--ratio));
  font-weight: 500;
  line-height: calc(27.5px * var(--ratio));
  color: #000;
}
#modal .step3.result .message--2 span {
  font-weight: 700;
}
#modal .step3.result .link--1 {
  position: absolute;
  bottom: calc(191px * var(--ratio));
  left: calc(49.5px * var(--ratio));
  right: calc(49px * var(--ratio));
  height: calc(46px * var(--ratio));
}
#modal .step3.result .link--2 {
  position: absolute;
  bottom: calc(83.5px * var(--ratio));
  left: calc(49.5px * var(--ratio));
  right: calc(49px * var(--ratio));
  height: calc(46px * var(--ratio));
}
#modal .step3.result .result__items {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(238px * var(--ratio));
}
#modal .step3.result .result__items img:not(.show) {
  display: none;
}
#modal .step3.result .result + img {
  display: none;
}
#modal .step3.result .canvas-container {
  top: calc(183px * var(--ratio));
  border-radius: calc(5px * var(--ratio));
  overflow: hidden;
}
#modal .step3.result .canvas-container canvas {
  pointer-events: none;
}