@layer base {
	button:not(:disabled),
	[role="button"]:not(:disabled) {
	  cursor: pointer;
	}
  }

.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-8 {
    grid-column: span 8 / span 8;
}
.col-span-10 {
    grid-column: span 10 / span 10;
}
  

.bg-opacity-30{
    opacity: 30%;
}

.text-orange-500 {
    color: var(--color-orange-500);
}

.bg-cyan-600 {
	background-color: var(--color-cyan-600);
}
.bg-cyan-700 {
	background-color: var(--color-cyan-700);
}

.bg-orange-600 {
	background-color: var(--color-orange-600);
}
.bg-orange-700 {
	background-color: var(--color-orange-700);
}

.hover\:bg-cyan-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-cyan-700);
      }
    }
  }

.focus\:ring-cyan-300 {
	&:focus {
		--tw-ring-color: var(--color-cyan-300);
	}
}  

.dark\:focus\:ring-cyan-800 {
	&:where(.dark, .dark *) {
		&:focus {
		--tw-ring-color: var(--color-cyan-800);
		}
	}
}

.xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }

.xl\:col-span-6 {
    @media (width >= 80rem) {
      grid-column: span 6 / span 6;
    }
}

.xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
}

.xl\:col-span-8 {
	@media (width >= 80rem) {
		grid-column: span 8 / span 8;
	}
}

  .h2 {
	font-size: 1.5rem;
	font-weight: 600;
}

.h3 {
	font-size: 1.25rem;
	font-weight: 600;
}

.h4 {
	font-size: 1rem;
	font-weight: 600;
}

.md\:gap-8 {
	@media (width >= 48rem) {
		gap: 2rem;
	}
}

.md\:gap-12 {
	@media (width >= 48rem) {
		gap: 3rem;
	}
}

.lg\:py-2 {
	@media (width >= 64rem) {
		padding-block: calc(var(--spacing) * 2);
	}
}

.lg\:h-9 {
	@media (width >= 64rem) {
		height: calc(var(--spacing) * 9);
	}
}


.border-gray-400 {
	border-color: var(--color-gray-400);
}


.border-gray-700 {
	border-color: var(--color-gray-700);
}	



.box-primary {
	position: relative;
	padding-left: 1rem;
	background-color: #ffffff;
}
  
.box-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0.5rem;
	height: 100%;
	background-color: var(--color-primary-600);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.noto-sans-kr {
	font-family: 'Noto Sans KR', sans-serif;
}

.noto-sans-kr-400 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
}

.noto-sans-kr-500 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 500;
}

.noto-sans-kr-600 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 600;
}

.noto-sans-kr-700 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
}

.noto-sans-kr-800 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 800;
}

.noto-sans-kr-900 {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 900;
}


.shorts-video-wrapper {
	width: 100%;
	max-width: 400px; /* 원하는 최대 너비 */
	aspect-ratio: 9 / 16; /* 쇼츠 비율 */
	position: relative;
}
  
.shorts-video-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.aspect-\[9\/16\] {
	aspect-ratio: 9 / 16;
}