@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

.inter-bold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

* {
    font-family: 'Pretendard';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --color-main: #C2C7D7;
    --color-sub: #CECED2;
    --color-dark: #1E1E24;
    --color-light: #F5F5F5;
}

.sub-title {
    color: #ffbe98;
}

.title-explain {
    color: #CECED2;
}

.card-backgounrd-dark {
    background-color: #1E1E24;
}

.cursor-pointer {
    cursor: pointer;
}

.section-background-wrapper {
    background-color: black;
    width: 100%;
}
.pages_template_container{
	width: 100%;
	position: relative;
	padding: 0;
}

.card-page-container{
	width: 100vw;
}

.sns-share-container{
	width: 100%;
	display:flex;
	flex-direction: row;
	justify-content:end;
	align-items:center;
	background-color: #d8e6f5;
	padding:0;
}
	
.share-icon{
	width: 1.375rem;
	height: auto;
}
.btn_sns_share_template{
	padding: 1.25rem !important;
}

.delete-propile-area{
	width:100%;
	display:flex;
	justify-content:end;
	align-items: center;
	padding-top: 1.875rem;
	padding-right: 1.625rem;
}

.delete-propile-btn{
	color: #5E5E5E;
	border: 1px solid #5E5E5E;
	width: auto;
	padding: 0.375rem 0.6875rem;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
	transition: all 0.3s ease;
	gap: 0 0.25rem;
	font-size: 0.8125rem;
	border-radius: 5.625rem;
}
.delete-propile-icon{
	width: 1.0625rem;
	height: 1.0625rem;
	font-size: 1.0625rem;
}

/*
.delete-propile-btn:hover{
  color: black;
}

.delete-propile-btn:active {
  color:black;
  transform: scale(0.98);
}

.delete-propile-btn:focus {
  outline: none;
  outline-offset: 2px;
}
*/



@media(min-width:576px){
	.card-page-container{
		width: 100%;
	}	
}


/* 반응형 폰트 관련 클래스 */
/* 기본 폰트 크기 (small) */
.responsive-text {
    font-size: 1rem; /* 기본 폰트 크기 16px */
}

.responsive-text-h1 {
    font-size: 2.125rem;
}

.responsive-text-h2 {
    font-size: 1.625rem;
}

.responsive-text-h3 {
    font-size: 1.5rem;
}

.responsive-text-h4 {
    font-size: 1.375rem;
}

.responsive-text-h5 {
    font-size: 1.25rem;
}

.responsive-text-h6 {
    font-size: 1.125rem;
}

.responsive-text-p {
    font-size: 1rem;
}

.responsive-text-small {
    font-size: 0.875rem;
}

.responsive-text-xs {
    font-size: 0.75rem;
}

/* 페이지 뷰어 용 */
.responsive-text-mk-title-t1 {
    font-size: 1.375rem;
	font-weight:700;
}
.responsive-text-mk-title-t2 {
    font-size: 1.375rem;
	font-weight:700;
}
.responsive-text-mk-text-t1 {
    font-size: 1rem;
	font-weight:400;
}
.responsive-text-mk-text-t2 {
    font-size: 0.875rem;
	font-weight:500;
}
.responsive-text-mk-input-t1 {
    font-size: 1rem !important;
	font-weight:400 !important;
}
.responsive-text-mk-input-t2 {
    font-size: 1rem !important;
	font-weight:400 !important;
}
.responsive-text-mk-input-t3{
	font-size: 1rem !important;
	font-weight:400 !important;
}
.responsive-text-mk-input-t4{
	font-size: 1.125rem !important;
	font-weight:500 !important;	
}

.responsive-img-mk-icon-t1{
	width: 1.25rem !important;
	height: auto !important;
}
.responsive-img-mk-icon-t2{
	width: 1.25rem !important;
	height: auto !important;
}
.responsive-img-mk-icon-t3{
	width: 1.5rem !important;
	height: auto !important;
}
.responsive-img-mk-logo{
	width: 1.75rem !important;
	height: auto !important;
}

/* 중간 브레이크포인트 (768px 이상) */
/*@container (min-width: 768px) {*/
@media(min-width: 768px) {
    .responsive-text {
        font-size: 1.125rem; /* 기본 폰트 크기 18px */
    }
	
	.responsive-text-h1 {
        font-size: 2.6875rem;
    }

    .responsive-text-h2 {
        font-size: 1.875rem;
    }

    .responsive-text-h3 {
        font-size: 1.75rem;
    }

    .responsive-text-h4 {
        font-size: 1.5rem;
    }
	
	.responsive-text-h5 {
        font-size: 1.375rem;
    }
	
	.responsive-text-h6 {
        font-size: 1.25rem;
    }

    .responsive-text-p {
        font-size: 1.125rem;
    }

    .responsive-text-small {
        font-size: 1rem;
    }
	
	.responsive-text-xs {
		font-size: 0.875rem;
	}
	
	/* 페이지 뷰어 용 */
	.responsive-text-mk-title-t1 {
        font-size: 1.4375rem;
    }
	.responsive-text-mk-title-t2 {
        font-size: 1.5rem;
    }
    .responsive-text-mk-text-t1 {
        font-size: 1.125rem;
    }
	.responsive-text-mk-text-t2 {
		font-size: 1rem;
	}
    .responsive-text-mk-input-t1 {
        font-size: 1.125rem !important;
    }
    .responsive-text-mk-input-t2 {
        font-size: 1.25rem !important;
    }
	.responsive-text-mk-input-t3 {
        font-size: 1.25rem !important;
    }
	.responsive-text-mk-input-t4{
		font-size: 1.25rem !important;
	}
	.responsive-img-mk-icon-t1{
		width: 1.25rem !important;
		height: auto !important;
	}
	.responsive-img-mk-icon-t2{
		width: 1.5rem !important;
		height: auto !important;
	}
	.responsive-img-mk-icon-t3{
		width: 1.8125rem !important;
		height: auto !important;
	}
	.responsive-img-mk-logo{
		width: 1.75rem !important;
		height: auto !important;
	}
}

/* 큰 브레이크포인트 (1200px 이상) */
/* @container (min-width: 1200px) { */
@media(min-width: 1200px) {
    .responsive-text {
        font-size: 1.5rem; /* 기본 폰트 크기 24px */
    }
	
	.responsive-text-h1 {
        font-size: 3.4375rem;
    }

    .responsive-text-h2 {
        font-size: 2.125rem;
    }

    .responsive-text-h3 {
        font-size: 2rem;
    }

    .responsive-text-h4 {
        font-size: 1.875rem;
    }
	
	.responsive-text-h5 {
        font-size: 1.75rem;
    }
	
	.responsive-text-h6 {
        font-size: 1.625rem;
    }

    .responsive-text-p {
        font-size: 1.5rem;
    }

    .responsive-text-small {
        font-size: 1.375rem;
    }
	
	.responsive-text-xs {
		font-size: 1rem;
	}
	
	/* 페이지 뷰어 용 */
	.responsive-text-mk-title-t1 {
        font-size: 1.5rem;
    }
	.responsive-text-mk-title-t2 {
        font-size: 1.75rem;
    }
    .responsive-text-mk-text-t1 {
        font-size: 1.25rem;
    }
	.responsive-text-mk-text-t2 {
		font-size: 1.25rem;
	}
    .responsive-text-mk-input-t1 {
        font-size: 1.25rem !important;
    }
    .responsive-text-mk-input-t2 {
        font-size: 1.375rem !important;
    }
	.responsive-text-mk-input-t3 {
        font-size: 1.25rem !important;
    }
	.responsive-text-mk-input-t4{
		font-size: 1.375rem !important;
	}
	.responsive-img-mk-icon-t1{
		width: 1.5625rem !important;
		height: auto !important;
	}
	.responsive-img-mk-icon-t2{
		width: 2.0625rem !important;
		height: auto !important;
	}
	.responsive-img-mk-icon-t3{
		width: 2.1875rem !important;
		height: auto !important;
	}
	.responsive-img-mk-logo{
		width: 1.875rem !important;
		height: auto !important;
	}
}
/*
@media screen and (max-width: 992px) {
    html {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 0.75rem;
    }
}
*/

/* Animation 영역 */
.animation-fadeIn-down-bounce {
    animation-name: fadeInDownBounce;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-down-bounce {
    animation-name: fadeOutDownBounce;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeIn-noMove {
    animation-name: fadeInNoMove;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-noMove {
    animation-name: fadeOutNoMove;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeIn-moveUp {
    animation-name: fadeInMoveUp;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-moveUp {
    animation-name: fadeOutMoveUp;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeIn-moveDown {
    animation-name: fadeInMoveDown;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-moveDown {
    animation-name: fadeOutMoveDown;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeIn-moveRight {
    animation-name: fadeInMoveRight;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-moveRight {
    animation-name: fadeOutMoveRight;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeIn-moveLeft {
    animation-name: fadeInMoveLeft;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.animation-fadeOut-moveLeft {
    animation-name: fadeOutMoveLeft;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes fadeInMoveRight {
    from {
        opacity: 0;
        transform: translate(-3vw, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes fadeInMoveRight {
    from {
        opacity: 0;
        transform: translate(-3vw, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes fadeInMoveLeft {
    from {
        opacity: 0;
        transform: translate(3vw, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes fadeOutMoveLeft {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(3vw, 0);
    }
}

@keyframes fadeInMoveDown {
    from {
        opacity: 0;
        transform: translate(0, -3vh);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes fadeOutMoveDown {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(0, -3vh);
    }
}
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translate(0, 3vh);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes fadeOutMoveUp {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(0, 3vh);
    }    
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate(3vw, 0);
    }

    70% {
        opacity: 1;
        transform: translate(-0.5vw, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(3vw, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-3vw, 0);
    }

    70% {
        opacity: 1;
        transform: translate(0.5vw, 0);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(-3vw, 0);
    }
}

@keyframes fadeInDownBounce {
    from {
        opacity: 0;
        transform: translate(0, 3vh);
    }

    70% {
        opacity: 1;
        transform: translate(0, -0.5vh);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOutDownBounce {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(0, 3vh);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(0, 1.5vh);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }

    to {
        opacity: 0;
        transform: translate(0, 1.5vh);
    }
}


@keyframes fadeInNoMove {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutNoMove {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1vh);
    }

    100% {
        transform: translateY(0);
    }
}