@font-face {
	font-family: "Pretendard";
	font-weight: 600;
	font-display: swap;
	src: local("Pretendard SemiBold"), url(./woff2/Pretendard-SemiBold.woff2) format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-weight: 500;
	font-display: swap;
	src: local("Pretendard Medium"), url(./woff2/Pretendard-Medium.woff2) format("woff2");
}

@font-face {
	font-family: "Pretendard";
	font-weight: 400;
	font-display: swap;
	src: local("Pretendard Regular"), url(./woff2/Pretendard-Regular.woff2) format("woff2");
}

/* 폰트 크기의 팽창을 방지합니다. */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
	line-break: break-all;
	text-wrap: balance;
}

:where(html, body) {
	min-height: 100dvh;
	scroll-behavior: smooth;
}
:where(html) {
	text-size-adjust: none;
}
:where(body) {
	margin: 0;
	overflow-wrap: break-word;
	text-size-adjust: none;
}
:where(:lang(ko)) {
	word-break: keep-all;
}
:where(img) {
	max-width: 100%;
	height: auto;
}
:where([class]) {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
}
:where([class])::before,
:where([class])::after {
	box-sizing: border-box;
	pointer-events: none;
}
:where(ol[class], ul[class]) {
	list-style: none;
}
:where(hr[class], button[class], fieldset[class], iframe[class], input[class], select[class], textarea[class]) {
	border: 0;
}
:where(input[class], textarea[class]) {
	border-radius: 0;
}
:where(button[class], input[class], mark[class], meter[class], progress[class]) {
	background-color: transparent;
}
:where(table[class]) {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}
:where(button[class], input[class], meter[class], progress[class], select[class], textarea[class]) {
	appearance: none;
}

/* Start */
:root {
	--color-text: #fff;
	--color-text-2: #5d5d5d;
	--color-text-3: #212121;
	--color-text-green: #438d26;
	--color-text-lightGray: #969696;
	--color-red: #ea5b71;
	--color-red--light: #faa2af;
	--color-red--dark: #4b0a0a;
}

body {
	/* min-width: 330px; */
	background-color: rgb(0, 0, 0);
	color: var(--color-text);
	font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#wrapper {
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: rgb(0, 0, 0);
}

h1,
h2,
h3,
p {
	margin: 0;
	padding: 0;
	font-weight: 300;
}

a {
	text-decoration: none;
	color: var(--color-text);
}

.header {
	display: flex;
	width: 100%;
	padding: 24px;
	position: fixed;
	z-index: 99;
	flex-flow: column wrap;
	align-items: center;
}

.header__title {
	font-size: 22px;
	list-style: none;
	line-height: 24px;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.header__caption {
	opacity: 100;
	visibility: visible;
	font-size: 18px;
	line-height: 20px;
	color: gray;
	transition: transform ease-in-out 0.3s, opacity ease 0.3s;
	transform: translateY(0px);
}

.header__caption--wrapped {
	opacity: 0;
	transform: translateY(-20px);
}

.dimmer {
	position: fixed;
	display: flex;
	width: 100%;
	max-width: 440px;
	z-index: 1;
	pointer-events: none;
}

.dimmer__top {
	width: 100%;
	top: 0;
	height: 200px;
	background: linear-gradient(0deg, #00000000 0%, #000 100%);
	transform: translateY(-200px);
	transition: transform ease 0.2s;
}

.dimmer--unwrapped {
	visibility: visible;
	opacity: 100;
	transform: translateY(-00px);
}

.navigation {
	background: rgba(217, 217, 217, 0.2);
	color: var(--color-text);
	backdrop-filter: blur(12px);
	border-radius: 8px;
}

.navigation__container {
	position: fixed;
	display: flex;
	gap: 8px;
	flex-direction: column-reverse;
	align-items: flex-end;
	width: 100%;
	max-width: 440px;
	bottom: 8px;
	margin-right: 16px;
	z-index: 40;
	padding-right: 16px;
	pointer-events: none;
}

.navigation__button {
	width: 60px;
	height: 60px;
	transition: transform ease 500ms;
	pointer-events: all;
}

.navigation__content {
	display: flex;
	flex-flow: column nowrap;
	gap: 4px;
	padding: 8px;
	width: 160px;
	opacity: 0;
	visibility: hidden;
	transition: all ease-in-out 0.3s;
	transform: translateY(-20px);
	pointer-events: all;

	> a {
		padding: 12px 12px;
		border-radius: 4px;
		transition: all ease-in-out 0.3s;

		&:hover {
			background-color: rgba(255, 255, 255, 0.5);
			backdrop-filter: blur(12px);
			opacity: 20;
		}
	}
}

.navigation__content--unwrapped {
	visibility: visible;
	transform: translateY(0px);
	opacity: 100;
}

.countdown {
	/* margin: 16px; */
	background: linear-gradient(0deg, rgba(250, 162, 175, 1) 5%, rgba(176, 110, 110, 1) 20%, rgba(0, 0, 0, 1) 50%);
	border-radius: 32px;
	display: flex;
	max-height: 812px;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.countdown__heading {
	display: flex;
	flex-flow: column;
	align-items: center;
}

#countdown-timer--large {
	position: relative;
	left: 2px;
	display: flex;
	font-size: 60px;
	font-weight: 800;
	line-height: 60px;

	> span {
		position: relative;
		top: -4px;
		margin-right: 4px;
		color: var(--color-red);
	}
}

.countdown-timer--text {
	padding-top: 40px;
}

.countdown-timer--container:nth-last-child(1) {
	width: 80px;
}
.countdown-timer--container {
	color: var(--color-red--light);
}

.countdown__content {
	font-size: 16px;
	line-height: 32px;
	font-weight: 500;
	color: var(--color-red--light);
	display: flex;
	flex-flow: column;
	text-align: center;
}

.countdown__img {
	width: 300px;
	height: 300px;
	margin-bottom: -20px;
}

.countdown__img--mini {
	width: 70px;
	height: 70px;
	margin-bottom: -5px;
}

.content__text {
	padding: 0px 16px;
}

.headline {
	font-size: 30px;
	line-height: 36px;
	font-weight: 400;
	margin-bottom: 32px;
}

.body {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px;
}

.caption {
	font-size: 12px;
	height: 16px;
}

.text--centered {
	text-align: center;
}

.content {
	margin-bottom: 100px;
	/* visibility: hidden; */
	opacity: 0;
	transform: translateY(50px);
	transition: transform ease 0.5s, opacity linear 0.3s;
}

.list_wrapper {
	display: flex;
	flex-flow: column nowrap;
}

.list__item {
	height: 56px;
	padding: 16px;
	display: flex;
	border-bottom: 1px solid var(--color-text-2);
	flex: 1;
}

.list__content {
	line-height: 28px;
}

.list__heading {
	display: flex;
	gap: 16px;
}

.list__icon {
	width: 24px;
	height: 24px;
	flex: 0;
}

.carousel {
	width: 100%;
	overflow: hidden;
}

.carousel__container {
	display: flex;
	will-change: transform;
	flex-flow: row nowrap;
}

.carousel__container--transition {
	transition: transform ease-in-out 0.3s;
}

.carousel__list {
	display: flex;
	flex-flow: column wrap;
	flex: 0 0 100%;
}

.carousel__headings {
	padding: 16px;
	display: flex;
	gap: 12px;
}

.carousel__btn {
	color: var(--color-text-2);
	font-size: 20px;
	padding-bottom: 4px;
	transition: color ease-in 0.2s;

	&:hover {
		color: var(--color-text);
	}
}

.carousel__btn--preseed {
	color: var(--color-text);
}

.carousel__item {
	display: flex;
	padding: 16px 16px 40px 16px;
	width: 100%;
	gap: 8px;
	border-top: 1px solid var(--color-text-2);

	> * {
		flex: 1;
	}
}

.carousel__img {
	border-radius: 8px;
	aspect-ratio: 16 / 9;
	background-color: aliceblue;
}

.carousel__annotation {
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: var(--color-text-2);
}

.carousel__annotiation--linked {
	display: inline;
	content: attr(data-url);
	margin-left: 4px;
	height: 16px;
	color: var(--color-text-green);
}

.carousel__annotiation--linked::after {
	content: attr(data-url);
	width: 16px;
	height: 16px;
}

.carousel__heading {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.list__container {
	display: flex;
	flex-flow: row wrap;
	opacity: 0;
	transition: opacity ease 500ms;
	padding: 0px 16px;
	gap: 8px;
	> * {
		display: flex;
		flex: 1;
	}
}

.list__head {
	border-top: var(--color-red--light) 1px solid;
	color: var(--color-red);
	padding-top: 8px;
	margin-bottom: 40px;
	flex-flow: column nowrap;

	& .list__headItem {
		font-size: 16px;
		line-height: 20px;

		> p.list__subhead::after {
			content: " –";
		}

		> * {
			font-weight: 400;
		}
	}

	& .list__subhead {
		padding-bottom: 4px;
	}

	& .list__header {
		color: var(--color-text);
		font-size: 18px;
	}
}

.list__chip {
	display: inline-block;
	text-align: center;
	font-size: 15px;
	line-height: 20px;
	min-width: 27px;
	padding: 4px 8px;
	border-radius: 16px;
	margin-bottom: 4px;
}

.list__chipStack,
.list__alert {
	margin-top: 16px;
}

.list__chip--trail {
	background-color: var(--color-text-3);
	color: var(--color-text-lightGray);
}

.list__chip--head {
	background-color: var(--color-red--dark);
	color: var(--color-red);
}

.list__trail {
	flex-flow: column nowrap;
	gap: 8px;

	> div:nth-child(1) {
		border-top: var(--color-text) 1px solid;
	}
}

.list__chip--link {
	padding: 4px 6px;
}

.list__trailItem {
	border-top: var(--color-text-2) 1px solid;
	padding-top: 8px;
	margin-bottom: 10px;
}

.list__trailHead {
	display: flex;
}

.list__alert {
	font-size: 14px;
}

.list__alertSymbol::before {
	content: "!";
	border-radius: 16px;
	font-size: 14px;
	width: 18px;
	height: 18px;
	background-color: var(--color-red--dark);
	color: var(--color-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.list__closure {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 8px;
	color: var(--color-red);

	> p {
		color: var(--color-text-2);
	}
}

.list__graphic {
	width: 50%;
}

.symbol__link {
	width: 20px;
	height: 20px;
	vertical-align: bottom;
}

.activities {
	display: flex;
	flex-flow: column nowrap;
	gap: 24px;
	padding: 16px;
	padding-bottom: 100px;
}

.activity__text--caption {
	margin-bottom: 4px;
	color: var(--color-text-2);
}

.activity__text--headline {
	color: var(--color-red--light);
	font-weight: 500;
}

.activity {
	display: flex;
	flex-flow: column nowrap;
	padding: 16px 16px 24px 16px;
	border-radius: 16px;
	background-color: #141414;
	gap: 16px;
	opacity: 0;
	transform: translateY(50px);
	transition: all ease 500ms;
}

.activity__graphic {
	display: block;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	padding-bottom: 40px;
	padding-top: 40px;
	width: 90%;
	margin-bottom: 42px;
}

.activity__graphic--isMoving {
	display: block;
	aspect-ratio: 1 / 1;
	padding-top: -120px;
	width: 100%;
	margin-bottom: 12px;
}

#introduction {
	margin-top: 50px;
	margin-bottom: 100px;
	& .headline {
		color: var(--color-red--light);
	}
}

#credit {
	display: flex;
	flex-flow: column wrap;
	margin-top: 200px;

	border-top: 1px solid var(--color-text-3);
	padding-top: 8px;
}

.credit__blocks {
	display: flex;
}

.credit__block {
	flex: 1;
}

.credit__block--captions {
	font-size: 12px;
	line-height: 16px;
}

.credit__text--caption {
	color: var(--color-text-2);
}

.credit__text--subhead {
	color: var(--color-text-lightGray);
}

.credit__headings {
	margin-bottom: 24px;
}

.credit {
	margin-bottom: 8px;
}

/* State */
.is-uncovered {
	opacity: 100;
	transform: translateY(0px);
}
.is-visible {
	opacity: 100;
	transform: translateY(50px);
}

.is-wiggle {
	animation: 500ms ease infinite alternate wiggle;
}

.is-popped {
	background: linear-gradient(0deg, rgba(234, 91, 113, 1) 0%, rgba(0, 0, 0, 1) 50%);
}

@keyframes wiggle {
	0% {
		transform: translateX(0px) scale(100%);
	}

	100% {
		transform: translateX(0px) scale(105%);
	}
}